?

Log in

No account? Create an account

Previous Entry | Next Entry

How To Change Background Images (css)

  • Sep. 3rd, 2006 at 1:01 AM
The background of the page as a whole (i.e. under the central content strip) can be changed using the body tag:

body {
background-color: #fef9d2;
background-image: url("http://www.sampleurl.com/background.jpg");
background-repeat: repeat-x ;
background-attachment: fixed ;
}

In this case, I have used a gradient background, which is a thin vertical strip image repeated in the x-direction and fixed, with the underlying colour the same as the bottom of the gradient to blend in smoothly.

You can also change the background of the sidebar(s). Use:

.layout-wt #content-inner {
background-image: url("http://www.sampleurl.com/background.jpg");
}

.layout-tw #content-inner {
background-image: url("http://www.sampleurl.com/background.jpg");
}

These two will give you background images for single sidebar layouts on the right or left respectively. You can also use these to change the background colours of them. Again, you could use gradients if you like, remembering to specify the relevant positions and repeats of the background image strip.

Comments

nimoloth
Mar. 21st, 2007 11:36 am (UTC)
CSS in the Custom CSS box should always override anything in your layer unless you have specifically hard-coded it into the layer and removed the css class of the thing in question. But the body css tag should always override anything in the theme.

It could be that there is another element on top of the basic body that is hiding any changes you make to body. I had a look at your layout and in this case, it appears to be the element "container" that is visible, which is black, so I assume you've changed it to black now too, with something like:

#container { background-color: #000000; }

or similar.

You can customise pretty much everything through css - you just need to know what the classes are. Check out the source code for your layer, or have a sift back through this community to find the basic css guide that lists the common classes and their purposes.

If you have Firefox, there's an excellent web developer add-on (available from the Firefox home site) that allows you to highlight css elements and see info about them interactively, amongst other things.

Latest Month

March 2016
S M T W T F S
  12345
6789101112
13141516171819
20212223242526
2728293031  

S2 Help Communities

Tags

Powered by LiveJournal.com
Designed by chasethestars