Navigation
This is archived content. Visit our new forum.
  • Author
    Posts
  • #690511

    dubyajay
    Participant

    Why does X make it so hard to put a responsive background image on a section? Theoretically, this is relatively simple. But out of the box, it doesn’t work. Yeah, I could use revslider to slap a background on there but why add the weight? Gahhh! I have messed around for over half a day trying to get a simple background image to fully cover a page. Template no container (header, no footer) leaves a big white strip at the bottom and the photo is cut off. I’ve tried others but it doesn’t discriminate. Nothing works. I put a min height which works on my laptop but horks it up on every other media. I’ve changed the .x-section.bg-image, .x-section.bg-pattern{50% 50%} to varying percentages but it gets messed up somewhere. I’ve scoured the forum for a solution but nothing I can find works. I have blown almost the entire cost of the website trying to get a background on a section to work. ON ONE PAGE!!! Don’t get me started on the recent x update that added so many other issues I can’t even see straight. Ugh. Apologies for the rant, but really…WHY do you do this? Is it an optimization thing on the front end by sacrificing sanity on the backend? There has to be a reason.

    #691126

    Rue Nel
    Moderator

    Hello There,

    Thanks for writing in!
    Sorry for the inconvenience if you haven’t achieve yet what you are trying to do.

    With Background image you can hardly achieve a total responsiveness without compromises. I would like you to try this demo here: https://davidwalsh.name/demo/background-size.html which would explain how background image works.

    In Cornerstone, we use the background-image: cover; which would cover the whole area of the container. This is responsive enough which will always covers the whole area. The only thing to consider here is that if your image size is smaller, it will be stretch out and if you have a bigger image, it will get cut off.

    Yes we can use background-size: 100% 100%; which is also responsive but your image will either be stretch out or get squeezed depending on the size of the container.

    Yes we can also use background-size: 100% auto but then as soon as you resize your browser or on smaller screen sizes, you will probably have white spaces around the image.

    Or we can also use background-size: contain; but then this is not a good choice because you will see white spaces around your image.

    Most of us wants to have a responsive background image but we do not want the image to get cut off. What we can recommend is that if there is a person on the image, you can separate the person from the background as another image and you can insert it in a column. The same thing goes if there is a text in the image. As soon as background image gets smaller, those texts will be harder to read. You can simply separate the image and the text by using a with text element and insert in a column.

    To better assist what you are trying to do, would you mind sending us the url of the page that you are working on? Maybe we can give you some ideas how you can have your background image as responsive as it could possibly be.

    Hope this explains the background image property briefly. Thank you for your understanding.