[Resolved] Page Content Area Set to Full Width/ BG Image Full Width

[shihanluis]

Hi, I’ve been trying to set the content area of the pages to full width so I can utilize a background image in full width as well.

Example:

I have set background images in several places using similar CSS like so:

.front-page-body{
background: url(/wp-content/uploads/2014/09/RedFooter.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Which works fine and covers the entire HTML page, or div, etc. But what I want is actually the entire content area to be full width (width: 100% fluid) so I can use an image that will differentiate the content area from any other background image used on the page itself. I have tried using the element spacing and layout combination to see if I can extend it to full width, but even getting rid of the sidebars and widget areas its a no go for me.
Any suggestions?

Thanks in advance.

[Tom]

To make the whole site fluid, you could try using this CSS:

body .grid-container {
      max-width: 100%;
}

Let me know if that achieves what you’re looking for 🙂

[shihanluis]

The best customer support I have seen. Thanks.

Which is the container that I have to target to only set a full background image (cover) for the content area? Am trying to target the front static page specifically.

Can I use something like this? (seems to be working fine for me):

#post-37 .inside-article {
background: url(http://web-address-here/wp-content/uploads/2014/09/cropped-leatherbg31.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Thanks Again,

Definitely deserve a 5 star rating. Very happy with the overall experience.

[Tom]

Yea that code looks like it should work nicely! 🙂

Let me know if you have any issues with it.

Thank you!

[Author]

Posts