Hi,
I have a background image on a section with the size set as “cover” and "position is “center”. On all the screen sizes it resolves OK but the mobile version crops too much content of each side. I would like to get some control over this. I assume I can do this with a media query but I’m not 100% on where I should put it in the new version. I have been trying to avoid inline styles, but it looks like the background image is adding inline styles anyway, so I’m uncertain how to continue.
I would like the entire image to show and have it attached to the bottom of the section leaving space for the text to overlay the white space above. The section is the one titled “Watch a Video, Download the Materials,Teach Your Child”
Your assistace, as allways is greatly appreciated.
Cheers
David
Hi David,
The nature of the image that you want to use will prevent you to achieve the desired effect. I suggest that you split the image and have two images. One will be that printer and the other one the mother and child playing with cards or something.
The Section element has two options to add a background. One is the Upper layer and the other one is Lower layer.
I would add each one of the images into one of the layers and set one to be Contain and left-aligned and the other one Contain and right-align. And maybe both of them stick to the bottom or center vertically depending on your taste:
The options that you see in the background control group is similar to what you would add if you would use CSS code. I suggest that you check the link below to learn more about various keywords or sizes that you can use:
One final point is that the background nature on the web is not like the image tag. And browsers will cut off backgrounds depending on the browser size anyways.
Thank you.
Thanks for the info, all very relevant suggestions.
Cheers
David
You are most welcome David!
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.