Docs

[zendog22]

Hi, some of the background images on my site resize on different screen sizes in a way that just doesn’t quite work adn I’m wondering if there’s a fix. Fingers crossed!

On the homepage the image in the first section with the starfish cuts off the starfish on some screens.

And the image of all the people in the last section on the homepage resizes to cut all tehir heads off!! On most screens I think.

Same with section 1 image on services page.

Any ideas would be muchly appreciated. Merci!
http://kentishandco.staging.wpengine.com/
x

[Rupok]

Hi there,

Thanks for writing in! Your background image is not suitable for the section background since the object is on a side. However you could try re-position the background-position with media query :

@media only screen and (min-width: 980px) (max-width: 1280px) {
#x-section-1 {
  background-position: 80% 80px !important;
}
}

Do the same for other sections and adjust the media query and values.

Cheers!

[zendog22]

thanks for this. wondering what the best solution is for an image with an object on the side, in your experience?

Any idea what the code would be for the image in section one of the services page?

http://kentishandco.staging.wpengine.com/services/

this?:
@media only screen and (min-width: 980px) (max-width: 1280px) {
#x-services-section-1 {
background-position: 80% 80px !important;
}
}

thanks!

[Nabeel A]

Hi there,

Please add the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

.page-id-35 #x-section-1 {
    background-color: #5A6771 !important;
    background-size: contain !important;
}

Let us know how this goes!

[zendog22]

Thanks for getting back to me. Not sure I really noticed any difference with this?

[Rue Nel]

Hello There,

To better understand how the background images works, please check out this topic: https://community.theme.co/forums/topic/section-background-image-2/#post-691126

Hope this helps.

[Author]

Posts