WebDesign: Backgrounds and Gradients (W11-P2) [VID]

Given what we’ve already covered, to change the background of a web page or section of a web page, is pretty straight forward. For example see the CSS code below.

div {
      background-color: #000000;
}

The above code would change the background to what color?

You could add a background image with the following CSS code.

div {
      background-image: url(“fish.jpg”);
}

To do a gradient background a little more of a challenge, but is doable.

A gradient background, for example, can change colors as the background goes down the web page or section of a web page. For example:

(Source: Wikipedia)

But, how do you do that? What does the actual CSS code look like?

Let’s look at one the simpler gradients, the linear gradients.



If you are curious and you want to take your gradients to the next level, I’d recommend the Ultimate CSS Gradient Generator.


Share this post with others. See the Twitter, Facebook and other buttons below.
Please follow, add, friend or subscribe to help support this blog.
See more about me at my web site WilliamHartPhD.com.