# Css backgrounds
**URL:** https://forum.kirupa.com/t/css-backgrounds/263257
**Category:** Uncategorized
**Created:** [June 13, 2008, 6:58pm UTC](https://forum.kirupa.com/t/css-backgrounds/263257 "2008-06-13T18:58:57Z")
**Posts on this page:** 11
**Page:** 1
### Author:  [@spyderfx](https://forum.kirupa.com/u/spyderfx)
#### Post date: [June 13, 2008, 6:58pm UTC](https://forum.kirupa.com/t/css-backgrounds/263257/1 "2008-06-13T18:58:57Z")
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?
---
### Author:  [@fasterthanlight](https://forum.kirupa.com/u/fasterthanlight)
#### Post date: [June 13, 2008, 7:11pm UTC](https://forum.kirupa.com/t/css-backgrounds/263257/2 "2008-06-13T19:11:42Z")
1.
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
---
### Author:  [@spyderfx](https://forum.kirupa.com/u/spyderfx)
#### Post date: [June 13, 2008, 7:17pm UTC](https://forum.kirupa.com/t/css-backgrounds/263257/3 "2008-06-13T19:17:24Z")
awesome! thanks.
do you know any secrets for getting the background to look seemless if it is repeating?
---
### Author:  [@fasterthanlight](https://forum.kirupa.com/u/fasterthanlight)
#### Post date: [June 13, 2008, 7:29pm UTC](https://forum.kirupa.com/t/css-backgrounds/263257/4 "2008-06-13T19:29:45Z")
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
---
### Author:  [@spyderfx](https://forum.kirupa.com/u/spyderfx)
#### Post date: [June 13, 2008, 7:36pm UTC](https://forum.kirupa.com/t/css-backgrounds/263257/5 "2008-06-13T19:36:05Z")
sweet! my website looks great now. thanks a bunch 🙂
---
### Author:  [@Syous](https://forum.kirupa.com/u/Syous)
#### Post date: [June 13, 2008, 8:19pm UTC](https://forum.kirupa.com/t/css-backgrounds/263257/6 "2008-06-13T20:19:00Z")
Also a good place to go for seamless striped background is [stripegenerator.com](http://stripegenerator.com)
---
### Author:  [@djheru](https://forum.kirupa.com/u/djheru)
#### Post date: [June 13, 2008, 8:30pm UTC](https://forum.kirupa.com/t/css-backgrounds/263257/7 "2008-06-13T20:30:46Z")
Also, a good tool to let you know what css rules are applied to what elements is firebug for firefox
---
### Author:  [@simplistik](https://forum.kirupa.com/u/simplistik)
#### Post date: [June 13, 2008, 9:08pm UTC](https://forum.kirupa.com/t/css-backgrounds/263257/8 "2008-06-13T21:08:47Z")
> [@djheru;2342400](#):
>
> Also, a good tool to let you know what css rules are applied to what elements is firebug for firefox
[ot]:lol: you must be part of the firebug development team or something cause you plug firebug into any post whenever you can[/ot]
---
### Author:  [@spyderfx](https://forum.kirupa.com/u/spyderfx)
#### Post date: [June 13, 2008, 10:34pm UTC](https://forum.kirupa.com/t/css-backgrounds/263257/9 "2008-06-13T22:34:03Z")
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?
---
### Author:  [@fasterthanlight](https://forum.kirupa.com/u/fasterthanlight)
#### Post date: [June 13, 2008, 11:59pm UTC](https://forum.kirupa.com/t/css-backgrounds/263257/10 "2008-06-13T23:59:24Z")
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
---
### Author:  [@spyderfx](https://forum.kirupa.com/u/spyderfx)
#### Post date: [June 14, 2008, 6:05am UTC](https://forum.kirupa.com/t/css-backgrounds/263257/11 "2008-06-14T06:05:49Z")
thanks fasterthanlight and everyone else! you guys are great