Problem Using the Parallax Background Component In BSS

Bootstrap Studio Help
1

Hi all, I need some help. I am trying to use the parallax background component and I notice at first when I import it the image is like contained. So I adjust the size to make it more like square, say 1200px x 1000px. Then I make the adjustments like cover or contain and while it looks good in Bootstrap Studio, as soon as I preview it in a browser the image is not containing and a lot of the image is off the screen. Yet in BSS it looks perfect.

Any help is appreciated as it is driving me crazy. Thanks in advance.

Anthony

2

Anyone have any ideas on the above issue?

Thanks.

3

I just did a trial test here:

http://empty-wildflower-5710.bss.design/

Seems to work with the default image.

What size is your picture so I can do a test with the size ?

4

Thanks for your help! Sorry for the late reply, from UK. The image size is 1000 x 667. I was wondering if the size had something to do with it. Also I had an navbar on the top, in case that makes any difference. Thanks again for your help and testing, much appreciated.

5

Hello, I updated the example using a navbar clean and changed the picture size to 1000 x 667.

http://empty-wildflower-5710.bss.design/

6

Thanks for your help, much appreciated. I have seemed to have narrowed my issue down to Chrome Vs Edge. I export the site and open in Chrome, the top of the image is cut off. But if I open it in Edge, then most of the image is there. I have included a link to a test of it

http://wip.collector-corners.co.uk/

Thanks

Anthony

7

Are you viewing this on different computers ? When I view this on my Windows 10 machine in Firefox, Chrome, and Edge the image is not chopped off. When I go to another computer with Chrome and Windows XP the image is cut off.

This probably is related to screen resolution dpi issues one can have when just serving up a single image.

You can get really complex with media queries and dpi queries mixed together in order to serve up the correct image for the display.

Its a great use for a Sass mixin. Create a mixin with all the different media queries and dpi settings. Assign it to a class and then whenever you use that class on a element that has a background image it will be added to your css when Sass is compiled. Write the mixin once and your done. Of course extra effort is needed to supply all the different images required, but for say a splash page hero background image like you have, it may be well worth it for the first initial impression of your site.