Click to See Complete Forum and Search --> : how do you create a gradient page colour in dreamweaver...
lokki
11-18-2006, 11:50 AM
hi..
how do you create a page background like this with a pattern and gradient.
http://www.websitedesignawards.com/flash.html
do you create a vertical strip in photoshop and set it as a reapeating background image in the page background?
cheers
transmit failure
11-18-2006, 03:03 PM
Yes, just open up photoshop/whatever and create a tiling image, try to keep it pretty small in size. Then use some CSS to make the image tile you can repeat it verticaly and/or horizontally.
<style type="text/css">
body
{
background-image: url('youbackground.jpg');
background-repeat: repeat-x
}
</style>
xplod_ldg
11-18-2006, 05:35 PM
The gradient is done in another program, like Photoshop, and then you embed it into the HTML like above.
deviled egg
11-21-2006, 03:31 AM
I feel dumb.... the directions above seem simple enough, but I don't really understand... I guess i need a beter understanding of css.... any good tutorials out there? any recomendations?
resdog
11-21-2006, 02:02 PM
The easiest way (if you are using CSS) is to do two things. First, make your photoshop image of the pattern. In this case, add a layer, and put a gradient going from clear to whatever color the background will be (in this case, #310200). So now, instead of having an image that is 256px wide by 1800px tall, you will have an image that is 256px wide and 400px tall, which saves image size. Then in your html editor, add this css:
body{
background:#310200 url(images/background.jpg) bottom left repeat-x;
}
This is the background shorthand. It assigns the background a color (the gradient at the top of your image), then applies a background image. The "bottom left" section tells it to put the image at the bottom of the page, and to the left. Then it is told to tile it horizontally only. With that, you will have a pattern to gradient background, without adding file size to your page.
It looks like that page linked above is a flash background, not css...but I could be looking at it incorrectly.
}
transmit failure
11-21-2006, 05:30 PM
<html>
<head>
<title>Webpage Title</title>
<style type="text/css">
body {
background-image: url('youbackground.jpg'); // <-----this is your background image, change the name
background-repeat: repeat-x
}
</style>
</head>
<body>
this is your webpage
</body>
</html>
transmit failure
11-21-2006, 05:31 PM
^^^ Do that