Css backgrounds

1

i’m trying to change the background for my web site but it doesn’t seem to be working

  1. the code i’m putting it (background-image: url (…)) doesn’t seem to be doing anything.

  2. the images i make for background don’t scale to fill everything

does anyone know how to fix this?

2

body { background: url(images/bg.jpg); }

  1. CSS does not resize images, it tiles them:

body { backgorund: url(images/bg.jpg) repeat-x top; } Tells the browser to repeat the image across the x-axis, and align it to the top of the browser window

There are a bunch of different combinations, so here is the general structure to work from:

body { background: url(images/bg.jpg) repeat-on-which-axis align-it-to-where; }

your options for repeating:

repeat-x
repeat-y
(blank repeats on both)
no-repeat

your options for aligning:
top
bottom
left
middle

and you can couple alignment like so

body { background: url(images/bg.jpg) repeat-x top left; }

repeats it along the x-axis, aligns the image to the top left

3

awesome! thanks.

do you know any secrets for getting the background to look seemless if it is repeating?

4

theres a photoshop filter called Offset, which offsets the layer so that the left and right edges appear in the middle showing the seam which you will have to repair

i use 1px wide and however tall images for doing gradients, and there are a bunch of sites that offer free pixel-patterns for you to use

5

sweet! my website looks great now. thanks a bunch :slight_smile:

6

Also a good place to go for seamless striped background is stripegenerator.com

7

Also, a good tool to let you know what css rules are applied to what elements is firebug for firefox

8

[ot]:lol: you must be part of the firebug development team or something cause you plug firebug into any post whenever you can[/ot]

9

if i were to create a drop shadow of the content onto the background, would that be a background image of the content, or is there some way you do it in the body background?

10

make a really really really really wide jpg that incorporates your dropshadow + background pattern

it shouldn’t be taller than the height of the pattern

and then

body { background: url(images/bg.jpg) repeat-y center; }

to center the repeating background as a column to create both your site container and background image at once

11

thanks fasterthanlight and everyone else! you guys are great