I have added a background image and configured it, but I am unable to locate where to set the desired background-size of 100% auto to adjust the div dimensions based on the image size.
Can you help me, please.
Thanks a lot, I was stuck!
That is driving me crazy!
Here are the settings (in fact, I want to set the width to 100%):
Here is the result:
The background-size property is correctly applied, but the size of the div is fitting to the content…
What did I missed?
Make sure you apply the background to the Section, not the nested div. That will do what you want.
I changed the stucture to:
Section (with background image)
→ Content
However, the height of the section is still adjusting to the height of the content.
I am pretty sure that it is a bug.
Furthermore, I think that it could be a great feature to add this possibility to any sections and divs.
Hi @weedor,
The background-size only affects the size of the background image within the block it is in, it doesn’t influence the size of the block itself.
If you want the block to be a different size, you will have to directly size it or you can set the aspect ratio property if the background image has a known aspect ratio.
I agree!
I will post a feature request about that because I think that it could be usefull.
Thank you for your support.
To give you an example - if your image was 1600 x 900, you can calculate the aspect ratio by 1600 / 900 = 1.7777
This will automatically size the block to show the full background image no matter what section’s width is (as long as the content is small enough so it doesn’t stretch the height).
This is great!
All the featured images have the same size, so it will rock!
Thank you again; your help is precious!
PS: I tried with the proposed ratio (16:9) but the image was not displayed with this setting. With the 1.7777 value everything is ok and the image is correctly displayed.