Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #205006

    Is it possible to set a Full Page Background image for a given page?

    I tried the WP-Backgrounds Lite plugin, but need to make the containers transparent for the background to show through?
    - some of it shows through where there is no container.

    Any ideas?

    Thanks.

    #205075

    Hey Weka!

    It depends on where you want the background to show. As you said some containers have backgrounds while others already don’t.

    Your best route is to use WP Backgrounds and have a freelance developer customize the backgrounds of items that aren’t already transparent so that it works as you want it to.

    If you just want it in the page content area then you can use a color section to put all of your page content inside. This won’t have the background behind the header however.

    Regards,
    Devin

    #205219

    Thanks Devin.

    Yes, my aim would be to have it behind the header but could still work with the color content section.

    The challenge with the image inside the color content section is that to make it use the whole area – it also centers the containers. If you only have a few containers, then they appear in the middle of the screen.

    Is there any CSS to use all available area (not including behind the menu) via a color section AND make those containers align to the top of the screen and not the middle?

    Thanks

    • This reply was modified 8 months, 4 weeks ago by  Weka.
    #205270

    Hey!

    I’m sorry but can you please post a screenshot of what you’re trying to do? A link to the actual website will help.

    Regards,
    Ismael

    #205312

    I seemed to have solved it.

    The following CSS allows me to set a background image for a specific page. In this case the blog page.

    .blog .main_color {
    background: url(http://xyz.jpg) no-repeat fixed 100% 100%;
    }

    or this code works as well or better

    .blog .main_color {
    background: url(http://xyz.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    }

    #205334

    Glad you found a good work-around.

Viewing 6 posts - 1 through 6 (of 6 total)

The topic ‘How to implement a Full Page Background Image for a given page’ is closed to new replies.