I want to use a background image that expands and fills the browser window. I uploaded a large image (optimized) and places it as a background image on my home page. The problems is the image fills the browser window horizontally but only vertically when other content is added to the page. I only want an image on the Home page without other content so how do I get the entire image to display both vertically/horizontally (height and width)? Would using a sticky footer accomplish this? Didn’t find any other thread that addressed this, so any ideas would be appreciated. Thanks.
Hi @LGDWP2017,
Try this css. Apply it to the image, or div you want to use.
background-size:contain;
background-repeat:no-repeat;
background-position:center;
Best regards.
Thank for your help, but how do I use the css? Do I add it to the “additional ccs” in customize or the child theme styles.css (I’m working in WordPress and using the Avada Child theme). How do I find out what id or class to use? Do I need to use the “!important” tag?
hummmm, you can use the developer tools from chrome, or install firebug and find the id or the class, and then under your style.css you can set the code there.
Try with the !important tag and see if it helps you. Relative to Avada we’ve never used it so we cannot help you with that.
But try their support and see if they can help you with that.
Best regards.