HTML and CSS Gradient

Hey Guys!

Today I am going to talk about backgrounds. These are a struggle for me, trying to figure out what looks good, what looks professional, and what I am actually capable of.

Here is one cool thing that I did figure out: how to do a gradient background.

Notice how along the sides it goes from white to light blue? One way of doing this is creating an image file that is really thin, and then having it repeat over and over and over again. But, I found a better way.


HTML CODE: put <div id= “grad”> in between the header and the body divs

CSS CODE: well, see the following. Each browser has a different way of reading the code written here, and if they don’t like any of them, the browser will resort to the individual color in the top line.

This was honestly a life saver. Not only does it look cool, but the code takes care of everything for you. If you want to change the colors, just switch them out. No need for the extra steps that an image would take.

OH! and do not forget that this will be the background for the whole website unless you say otherwise ( like how I told the body area to be white)

Have a lovely Monday,

The Code Damsel

Leave a Reply

Your email address will not be published. Required fields are marked *