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.


Oct. 23rd, 2007 06:38 pm (UTC)
I've been living here for the last week or so and got all the answers I needed do far except this one so far:
Is there a way to repeat the background image x and y in expressive? I tried all sorts of syntax and can't get it to work.
At the minute I made a long strip that repeats x, but it's a bit clumsy and since it's a pattern, I'd rather use the original little square for it.

(My skin is barely half done yet, if you look at it =))
Oct. 23rd, 2007 07:01 pm (UTC)
Try putting the following into the Custom CSS area:

body { background-repeat: repeat; }

That should cause the background image to repeat in both x and y. If you only wanted one, you would use repeat-x or repeat-y instead of repeat.
Oct. 23rd, 2007 07:03 pm (UTC)
Soooo easy. It's always the plain obvious that's harder to figure out. Thanks!!

Latest Month

March 2016

S2 Help Communities


Powered by LiveJournal.com
Designed by chasethestars