Full page background in wordpress

[slaggsten]

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 https://css-tricks.com/perfect-full-page-background-image/

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

any suggestions?

[Alen]

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

[slaggsten]

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

[Alen]

[TheDoc]

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.

[slaggsten]

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?

[Paulie_D]

The red bar?

Remove this:

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

Line 4O of your HTML inside the style tags

[Senff]

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

[slaggsten]

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

[Paulie_D]

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?

[slaggsten]

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

[Paulie_D]

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

http://codex.wordpress.org/Custom_Backgrounds

[Senff]

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

[slaggsten]

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.

[Paulie_D]

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.

[Author]

Posts