CODEWITHSUNDEEP
csswordpress
Doug Fir
Doug Fir

Reputation: 21204

Edit background on Wordpress CSS style sheet

I'd like to edit some background properties on my Wordpress site.

Using Chrome's Inspect Element I can see that currently I have:

body.custom-background {
background-color: #f6f6f6;
background-image: url('http://patchwood.ca/wp-content/uploads/2013/06/bktopright.png');
background-repeat: repeat;
background-position: top left;
background-attachment: fixed;

I would like to edit background-repeat to no-repeat and background-position to right.

Sounds simple but when I look in the Editor in Wordpress the selector does not exist. It turns out that this styling appears to be within the html on line 53 of the home page.

If it was a handcoded website I would just update the stylesheet but since it's a database driven Wordpress site it's more difficult to know where to edit.

I wonder if there is a means of adding styling to the body element background that overrides any other properties? So basically, if I was to add to the very bottom of the stylesheet the following code to override anything else.

 body.custom-background {
    background-repeat: no-repeat;
    background-position: top right;
}

I did try just adding that but with no success. Any ideas?

Upvotes: 1

Views: 2974

Answers (3)

Ravi Patel
Ravi Patel

Reputation: 5211

i have to manage background in inspect element css this is success css code:

<style>
body.custom-background {
    background-attachment: fixed;
    background-color: #F6F6F6;
    background-image: url("http://patchwood.ca/wp-content/uploads/2013/06/bktopright.png");
    background-position: right center;
    background-repeat: repeat-y;
}
</style>

Upvotes: 0

ASGM
ASGM

Reputation: 11381

It seems like it's hard-coded, as you suggest. It's located within the <head> tag, which means it's probably part of header.php. Instead of editing style.css, why not look in header.php and change it there (or better yet, delete the reference in <head> and move .custom-background's style information to style.css)?

Edit According to the Codex, custom backgrounds are enabled using the following line in functions.php:

add_theme_support( 'custom-background' );

Removing this line (and then setting your desired background properties in style.css) should do the trick.

Upvotes: 1

Moishy
Moishy

Reputation: 3648

its showing up in the header - by the looks of it - its probably a custom background image set in the wordpress backend.

a rather round about way of fixing this can be to add 

<style>
body.custom-background {
    background-repeat: no-repeat !important;
    background-position: top right !important;
}
</style>

to your header or footer

Upvotes: 1

Related Questions