Grow your CSS skills. Land your dream job.

Full page background in wordpress

  • # June 24, 2013 at 8:03 pm

    hey

    so i am trying to make my background on my wordpress site to cover the entire browser window at all times.

    i’ve tryed the first example in this link http://css-tricks.com/perfect-full-page-background-image/

    But i get a white bar-bug check it out http://anton.stallbacka.com/

    any suggestions?

    # June 24, 2013 at 8:09 pm

    Looks fine for me. (Chrome) What browser are you using?

    # June 24, 2013 at 8:39 pm

    Oh okey, also chrome. The big white bar throught the header title, cant you see it?

    # June 24, 2013 at 9:09 pm

    # June 24, 2013 at 9:37 pm

    I bet the bar is about 35px and you’re logged into the WordPress backend. WordPress is trying to make room for the admin bar, but you probably haven’t included the `wp_footer()` function.

    # June 25, 2013 at 10:08 am

    i am talking about the red “bar” in the picture above. If you use chrome, and then right-click on the bar and view the source i am able to make it dissapear. How do
    i post a picture here to show you?

    # June 25, 2013 at 10:12 am

    The red bar?

    Remove this:

    body.custom-background {
    background-color: #dd3333;
    }

    Line 4O of your HTML inside the style tags

    # June 25, 2013 at 10:22 am

    > The big white bar throught the header title, cant you see it?

    > i am talking about the red “bar” in the picture above.

    Oh, okay.

    # June 25, 2013 at 10:58 am

    Paulie D, yes thats what i found aswell, but i dont get it anyway. Line 4O of your HTML inside the style tags, can you explain how to find this? Thanks

    # June 25, 2013 at 11:02 am

    It’s added in your HTML…I don’t know how it go there.

    How is your `` added…presumably it’s in your php template file somewhere?

    # June 25, 2013 at 11:16 am

    i’ve checked every .php file i can reach through wordpress, searched for “#dd3333;” but found nothing..

    # June 25, 2013 at 11:19 am

    Well, since it’s called `custom-background`, perhaps it’s setting or plug-in?

    http://codex.wordpress.org/Custom_Backgrounds

    # June 25, 2013 at 11:21 am

    Go into your theme settings and change the background color of the theme:

    http://anton.stallbacka.com/wp-admin/themes.php?page=custom-background

    I’m not sure how to remove it though (once it’s set), so you may just have to override it by adding this to your CSS:

    html body.custom-background {
    background-color:transparent;
    }

    # June 25, 2013 at 11:38 am

    thanks for the help, but overriding it in the css won’t work.. i’ve tried so many times by now. What do you think about setting the custom background to an empty-transparent png image?

    paulie_D – yes it’s wordpress’s own plugin, it makes it easy to set the background to either a color or image. but since i use this code in the css:
    html {
    background: url(images/bg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    }

    I set my own background image, so i guess i have to backgrounds by now and they fight about the space.

    # June 25, 2013 at 11:44 am

    Setting a background image on the `html` shouldn’t affect the body.

    Surprised you can’t do

    body.custom-background {
    background-color:transparent !important; /* or none */
    }

    in your CSS sheet.

Viewing 15 posts - 1 through 15 (of 19 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".