Avoid zoom in on header image on small screens

Shapely
1

Hi,

is there a way (a css code maybe) to avoid that the header image in parallax section on homepage gets zoom in on smaller screens/tablets? I want the image to appear full width on all screens (except mobile).

Here is a link to my homepage: https://decor-atelier.dk/

Thanks,

Pernille

2

Hi there

You may use this css code, it will change image on mobile device:

@media (max-width: 991px){
#shapely_home_parallax-2 {
background-image: url(https://decor-atelier.dk/wp-content/uploads/2021/02/selvportraetter-9.jpg);
background-size: cover;
}
}

3

Hi,

thanks, I used the code, but it did not change anything. Image stayed the same on computer, tablets and moblie.
By the way, just to be sure I made myself clear, it is on tablets and pc I would like the image to appear full width (as is now it is being cropped or zoom in on), on mobile the images looks good the way it is now.

Thanks for your help,

Pernille

4

Hi

yes, but if I’m not wrong the code is not added to the website, can you show me the screenshot of the code?

5

Hi,

thanks for helping me. Here is a screenshot of the code paste in the extra CSS I been using a lot of CSS coding, so I think I done it right.

screenshot
screenshot1080×2340 224 KB

Thanks,

Nille

6

Hi Nillie

Yes, I see the problem, you need to add “” inside the () check this screenshot:

7

Hi,

I am not sure if I understand you correctly, but I tried adding “” inside (), but nothing happen.

Thanks

Screenshot2
Screenshot21080×2340 225 KB
,

Nille

8

Its still not correct Nille

Copy-paste code from this source:

9

Hi,

I tried copy-pasting the code, that did not work. then I tried change the max-width to 1991, then it got much better. Now it is only being cropped in the right side, but not in top and left side. I also tried to make the number even bigger, but the would not change the image from being cropped in the right side. Can you help me with that?

Thanks alot,

Pernille

Skærmbillede (16)
Skærmbillede (16)1366×768 325 KB
Skærmbillede (15)
Skærmbillede (15)1366×768 322 KB

10

Hi

Im afraid there is no other tools or methods to play with the appearance of the image, sorry

11

Hi,

allright, I made the header image smaller, so now it fits well without being cropped in the top and sides. But now the second widget image is no longer overlapping the header image when I scroll down the page. I liked that function, so can I get it to work again? Also now it has cropped the bottom of the header image.

Thanks again,

Nille

12

Nille, you cant avoid cropping the image, this is a very basic thing, image attached as a bg image will be always cropped for a certain image and if this is your goal im afraid that’s not reachable