Archived topic
Page Content Area Set to Full Width/ BG Image Full Width
3 replies · Started by shihanluis on September 16, 2014
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.
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 :)
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.
Yea that code looks like it should work nicely! :)
Let me know if you have any issues with it.
Thank you!
