In this tutorial I'll show you how to create a CSS gradient background.
Advertisement Sliding Billboard
Discover the power of interactive presentations – the Sliding Billboard ! Organize your work greatly in a virtual book, which auto scrolls and enables your users to slide from page to page or chapter to chapter naturally. You can present any type of work this way: your portfolio, photo albums, products index, web shop, ads and much more. Choose from the 13 cool CSS designs included, so your billboard always looks great and suites your site perfectly.
Creating a visual gradient background just like the one on the Adobe website with one easy CSS rule.
Create a new graphic file with Fireworks (or another graphic tool) with the following dimensions:
Insert a rectangle with the same dimensions and use the gradient tool
to create the gradient (see fig.1). Change your colors as desired.
The important thing is that you choose a "web-safe color" for the end color (bottom), because we are going to define this color in our webpage as the background color as well (considering lower resolution screens).
Export this file in the JPEG format and save it in your site root.
Now open up a document and create a new CSS rule within Dreamweaver (see fig.2 and 3).
Choose the BODY tag and define this in a separate CSS or in the current document only.
Choose the category "background" and choose the same background color as the end color of your graphic file. Choose your just created gradient JPEG file. Choose repeat-x as repeat method (horizontal repeat) and apply the rule to the page.
The resulting CSS code in your document will look like this:
You should already see the effect in your document within Dreamweaver (create a table with a height of 1200px to see the effect).