Black Friday Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

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

Home Forums Support Page Content Area Set to Full Width/ BG Image Full Width

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #30115
    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.

    #30121
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #30573
    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.

    #30586
    Tom
    Lead Developer
    Lead Developer

    Yea that code looks like it should work nicely! 🙂

    Let me know if you have any issues with it.

    Thank you!

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.