Background Image - Cover

Hello!

I am trying to use a background image that I want displayed full-sized regardless of content in the container. I have added the background image in the section wrapper, selected 'center, center - no repeat' and then 'cover' for the background size. However, when I add a content wrapper into that section, the background only displays a tiny row that falls behind the content.

Is there a way to force the entire background image to show regardless of the content that's in the container?

Thanks in advance.

Comments

  • Hi,
    Please always attach a link so we can check it out. If the page is offline(localhost) then our help will be limited, you will have to contact us when the page is online. Also please make sure that the page is not under maintenance before you provide us the link.
    thanks
  • Hi Pablo,

    Sorry about that. Hopefully this link shows the issue I am having:


    Thanks
    JC
  • edited September 2020
    You cannot attach a background image into the whole #Content at all, but you can insert it into the <html> tag and it will be look like it's behind the content.
    Just please upload an image in the field dedicated to it and turn on the Transparent option for Content.
    Theme Options > Global > General

    Thanks

  • Thanks for the quick reply - 

    Will that BG image then show in all my content boxes? I just want it in one particular content box - because I want to put another text image over top of it. And use a different BG with different text images elsewhere.

    The alternative is that I can cheat with padding to display the entire image, but that messes up responsiveness.


  • Well, it will be displayed on whole website, there is no option to change it on only one, particular page using the muffin options.
    You can only insert the background for section in this case :(

    Of course, you can use the Custom CSS code for the #Content container, just insert your code in the field on the bottom, while editing the page.
    Thanks
  • Awesome. Thanks for your help.
Sign In or Register to comment.
This website uses cookies

We use cookies to personalise content and ads, to provide social media features and to analyse our traffic. We also share information about your use of our site with our social media, advertising and analytics partners who may combine it with other information that you’ve provided to them or that they’ve collected from your use of their services.

Cookies are small text files that can be used by websites to make a user's experience more efficient.

The law states that we can store cookies on your device if they are strictly necessary for the operation of this site. For all other types of cookies we need your permission. This means that cookies which are categorized as necessary, are processed based on GDPR Art. 6 (1) (f). All other cookies, meaning those from the categories preferences and marketing, are processed based on GDPR Art. 6 (1) (a) GDPR.

This site uses different types of cookies. Some cookies are placed by third party services that appear on our pages.

You can at any time change or withdraw your consent from the Cookie Declaration on our website.

Learn more about who we are, how you can contact us and how we process personal data in our Privacy Policy.

Please state your consent ID and date when you contact us regarding your consent.