Background image when resizing

Hi again

The background image on laptop is now working great, but is it possible to keep that format when resizing.
Especially on phones it´s looking weird, where the screen is pointing too much on the left side.
I am talking about the picture with the 2 guys and the dark background. It will be nice, if you can see them both on all devices.

The site is still this one: https://tobiasnielsendesigns.com/doxafilm/ :slight_smile:

Best regards
Tobias

Hello Tobias,

Please try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

@media only screen and (max-width: 991px) {
  #pg-2222-5 > [data-hasbg="hasbg"] {
    background-size: 100% !important;
  }  
}

Regards,
Kharis

Hi Kharis

It seems like it creates some problems with the paralaxing. When I scroll the image disappears and there becomes too much white space, what can I do to avoid that?
A little parallax effect would be nice by the way :slight_smile:

Hello there,

I am sorry, parallax background image is non ideal for such that purpose, where certain part of the image should be displaying. The solution I propose is actually turn off parallax effect which is resulting the entire image appears. However it draws a side effect. As some pixels surround will be cut off, your best bet is edit your image until you get it fits on smaller screen. Probably it would some live testing on the actual row. Or, use different image to alter the default one. It must be smaller one as it specifically will appear on mobile screen. For your additional information, check out this thread.

Regards,
Kharis

Hi Kharis

I tried to insert a new image on tablet size, but it dosn´t overwrite the other and it still decreasing the picture when resizing. How do I avoid that?

Is it possible to view the whole picture without parallax, then I prefer that? :slight_smile:

Best regards
Tobias’

Okay Great!

Regards,
Kharis

Hi Kharis

I think, I try again. Is it possible to view the whole picture without parallax, then I prefer that? :slight_smile:

Best regards
Tobias

Hello Tobias,

Try this code:

    @media only screen and (max-width: 991px) {
      #pg-2222-5 > .panel-row-style[data-hasbg="hasbg"] {
        padding-bottom: 300px !important;
        background-size: contain !important;
        background-position: bottom center !important;
        background-repeat: no-repeat !important;
        background-color: #000;
      }
    }

    @media only screen and (max-width: 600px) {
      #pg-2222-5 > .panel-row-style[data-hasbg="hasbg"] {
        padding-bottom: 100px !important;
      }
    }

Regards,
Kharis

Hi

The picture are now in full size, but there becomes a large amont af black whitespace. It looks weird, can I get the picture to cover the whole area?

Regards
Tobias

The consequence of doing so, your image dimension will be unproportional. The ideal way is to prepare new small version of your image to make two images fit on small screen view port. Then alter the default one and display it only on specific screen size with CSS media query.

    @media only screen and (max-width: 991px) {
      #pg-2222-5 > .panel-row-style[data-hasbg="hasbg"] {
         background-image: url('http:// yoursite.com/path/to/new-image.jpg');
      }
    }

Regards,
Kharis

Hi

I think, I just use a smaller image and then just move it a little. It dosn´t get full size, but that dosn´t matter. But thanks for that :slight_smile:

Regards
Tobias