Tagged: 

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • January 3, 2014 at 3:12 pm #205006
    Weka

    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.

    January 3, 2014 at 6:24 pm #205075
    Devin

    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

    January 4, 2014 at 1:39 am #205219
    Weka

    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 10 years, 10 months ago by Weka.
    January 4, 2014 at 7:14 am #205270
    Ismael

    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

    January 4, 2014 at 1:47 pm #205312
    Weka

    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;
    }

    January 4, 2014 at 4:05 pm #205334
    Devin

    Glad you found a good work-around.

  • Author
    Posts
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.