Hello!
I have looked through the threads and I don’t seem to be coming across the same issue I’m experiencing, but if you’ve already answered this question I apologize!
I have two images on my home page that are set as background images in two separate rows. The images are set as full width, which is what I would like them to be, but when you change the size of the browser window, they do not adjust with it. Is there some fix for this issue??
Thanks!
Hi Sarah,
Do you have a public URL where we can take a look at what’s going on?
I suspect this issue is related to the row itself. Basically, background images can only scale by the size of the container it’s applied to. This means that if the container never changes height, the background image never will. I know, it’s silly but it sadly can’t be avoided (it’s a general CSS limitation). :(
As a result, depending on how things are setup, I should be able to provide advice on how to improve how the images look.
If there’s nothing on top of the images, consider adding them via a SiteOrigin Image widget instead. HTML-based images (ie. the SiteOrigin Image widget) don’t have this requirement so they’re much more responsive as a result.
Hi Alex,
I think I fixed the issue by changing the background image display to
"cover" in the design section of the row. Does it adjust for you when you adjust the size of your browser?
http://d19.4bd.myftpupload.com/
Hi Sarah,
Thank you.
No, setting it to cover won’t help in this instance.
Okay so based on your structure, your best bet would be to replace this SiteOrigin Editor widget with a SiteOrigin Headline widget which will allow you to enable FitText which will avoid this issue. To clarify, FitText will resize the text to, well, fit. Currently, it’s not your settings that’s causing you issues but the contents.