PDA

View Full Version : Faded Background....is this possible


graemepark
10-18-2008, 09:31 PM
I know when you select a background in DW it just tells the browser what to display and therefore doesn't take an eternity to load....i am looking at having a faded background...is the only way to do this by loading an image and using that as the background?

if so is it possible to have this load once and then be cached so it doesn't need to load a huge background file on each new page?

http://img510.imageshack.us/img510/7571/shadowot0.jpg (http://imageshack.us)

see the link for a idea...

domedia
10-18-2008, 10:19 PM
In your graphics program, slice out a 1px wide version of your bg, and then use repeat-x in CSS to make it repeat horizntally

graemepark
10-18-2008, 10:21 PM
In your graphics program, slice out a 1px wide version of your bg, and then use repeat-x in CSS to make it repeat horizntally

so you would have me goto my graphics program and take the bacground, move down the side 1 px at a time and place these into the CSS....sureley there will be hundreds?

domedia
10-18-2008, 10:24 PM
No, make one image only that is 1px wide and however tall you need it to be and then CSS will repeat it for you.

Rob_Che
10-18-2008, 10:26 PM
so you would have me goto my graphics program and take the bacground, move down the side 1 px at a time and place these into the CSS....sureley there will be hundreds?
You only need one image, 1px wide and as long as you like...
The CSS code:

body {
background-image: url(images/pageFade.gif) ;
repeat-background: repeat x ;
}
Will repeat the same image for you.

RC

edit: beat me to it DoMedia . . .

graemepark
10-18-2008, 10:36 PM
i dont understand, if i repeat 1 pixel then it will repeat the same pixel all over the screen....not the different colour fade i am trying to achieve?

if i choose a black pixel my page will all be black, i want a white fade to black

Rob_Che
10-18-2008, 10:41 PM
It's one pixel wide BUT (for example) 500 pixels deep (going down the page)

Create a file in photoshop - 1 px wide and 500 high.
Give it a gradient from black at the top to white at the bottom.
Repeat (using CSS) across your page.
BINGO !

Does that make sense ?

If not - head here: http://freeyourdesign.com/css/css-gradient-background-fade/

Cary
10-18-2008, 10:44 PM
Oops, nevermind...

graemepark
10-18-2008, 10:45 PM
spot on....

now I just need to work out these CSS things....i have the dreamweaver files made up mostly for my wesbite and they seem to be using CSS in the DWT i created...just gona have a play with were to put things....any premeptive help would be great guys

Cary
10-18-2008, 10:50 PM
You should remove default margins and padding from the body using CSS:

body {
margin:0;
padding:0;
}

Rob_Che
10-18-2008, 11:18 PM
You should remove default margins and padding from the body using CSS:
Good point Cary...

now I just need to work out these CSS things....
:-D