[jeanetteleblancParticipant]

I can never seem to figure out the best method for sizing and styling background images so that they display properly and responsively – every time it seems to be a trial and error of sizing and padding and styling. I’ve combed the forum and tried different custom CSS.

I’m just wondering if there is some sort of tried and true method to get these images to display correctly across devices.

I’m working on this page now (unfinished) – having a great deal of trouble with the desktop image in Section Four. Nothing i try seems to work across the screen sizes.

http://www.peacelovefree.com/manifesto-2-0/

I’d love to find a consistent method for this so that I don’t have to mess with it endlessly each time. hoping you can help.

[FriechModerator]

Hi There,

Thank you for writing in! Please read the posts below on how background-size works.

– https://community.theme.co/forums/topic/section-background-image-2/#post-691126

– https://community.theme.co/forums/topic/background-image-on-phone/#post-780991

Are you referring to this image, yes? Try adding it as an Image Element, then turn off the ROW’s column container option to make it full-width.

Also remove the huge paddings (padding: 400px 0px 200px;) you applied on the section.

Let us know how it goes.

Cheers!

[jeanetteleblancParticipant]

so add as an image element instead of background image?

[FriechModerator]

Hi There,

Yes add it as an image element since there is no other element on that section and you want the image to be full on all screen size.

The background-image is responsive but different kind of responsive, because in some cases it needs to be stretch (but keeping its width/height ratio) in order to cover a larger container (Section/ROW).

Hope this shed some lights.

Thanks.

[jeanetteleblancParticipant]

What is the best way to do an image that does have other elements?

I want to format the header image on this page so that it doesn’t cut off her head on different screen sizes – is this possible?

http://rachaelmaddox.com/home-3/

[FriechModerator]

Hi There,

I cant view that page. If there will be other elements on top of the image, then we need it to be a section’s background.

To address the cutting issue, you need to prefer a landscape (for desktop and landscape screen) and a portrait version (for mobile) of the image so we can switch them base of the viewers screen size.

Thanks.

[jeanetteleblancParticipant]

I’m not sure i fully understand. can you explain?

[jeanetteleblancParticipant]

the page should be visible now.

[LelyModerator]

Hi There,

When we use an image as background (like in section), it will stretch depending on the content of this section. The background will just cover section. With this, the shorter the height of the section which depends on its content, the shorter the image will be. When there’s more content, the height of the section will increase thus we will see more of the background. The way the background image adjust it proportionate to it’s image width and height proportion. See this: http://screencast-o-matic.com/watch/cbebn86gMC

On the other hand, the content on small screen like mobile is vertical. You can see this that when you adjust the screen size, the content squeeze and the height increase. Thus needs vertical type image or portrait type.

Your background image size is 2048×1365. With that image size, and it’s width and height proportion, your content height should be at least 828 pixels just to show the face from the image. But then with your current content, it’s height is just 386px. That’s the reason you don’t see the entire face.

Now to achieve what you want, either add GAP element to increase section height, or adjust the image using an editor like photoshop. Create a landscape type image (horizontal type)

Hope this helps and clarifies the issue.

[jeanetteleblancParticipant]

I’m sorry – i’m still quite confused about what i need to actulaly do to fix the issue – or if there is a foolproof method for creating future pages.

I’m also not sure what you meant about preferring a portrait version for mobile- how do i do that?

[FriechModerator]

Hi There,

Please read my reply here: https://community.theme.co/forums/topic/background-image-on-phone/#post-780991 why you need a portrait version of the background-image for mobile. You can edit your image with a Photo editor application (e.g. Adobe Photoshop).

Another explanation about background-image: cover; from https://www.w3schools.com

background-image: cover; – Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area

ref: https://www.w3schools.com/cssref/css3_pr_background-size.asp

Here’s a nice Playit about background-size property:

https://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=cover

Follow that link and play with it, choose a background-size value from the left and see the result on the right.

Notice what the values 100% 100% | cover | contain do to the background-image, you’ll realize there is no foolproof way to make a background-image fit in its container all the time/sizes.

Hope this shed some lights, Cheers!

[Author]

Posts