The Background-Image Property

Day #10

The power of CSS

Check out this web site: to see how the same HTML can be displayed in many completely different ways!

The background-image property

You can use either the html element or the body element to display backgrounds for your pages. If you use the html element, your background will go from one edge of the browser window to the other. If you use the body element, your background will go from the one edge of the body to the other. If your body is set to a width of 100%, the effect will be the same as if you had set the background of the html element. But if the width of the body is less than 100%, the body will have one background and the html element will have another that will be visible "behind" the body.

body {

}

Add a body.

body {

background-color:white;

}

Change the width of the body.

width:80%;

Center the body on the background.

margin:auto;

Round the corners.

border-radius: 20px;

Now some of the text is truncated in the corners. Add some space. Try the following.

border:2em;

It doesn't work. Apparently we need to change the padding instead. Delete the above rule and replace it with this.

padding:2em;

Add a background image to the body. Copy the file GrayTile.jpg to your images folder. Then add the following:

background-image:url("../images/graytile.jpg");

Controlling the repetition

By default a background image is repeated to fill in the entire background of its element. To tile the image:

background-repeat: repeat; /* default */

background-repeat: no-repeat;

A sidebar image

To get a side image. Copy this to your images folder. Name it Grayleft.png.

Change the current image from this:

background-image:url("../images/graytile.jpg");

to this:

Preview the page. The image will be tiled to cover the entire screen. We only want it on the left edge, so add the following rule to the body rules.

background-repeat: repeat-y;

Move the body text out of the sidebar image by increasing its padding. Leave the current padding rule (which sets the padding to 2em on all four sides).

padding:2em;

But add the following

padding-left:10em;

A top-bar image

Copy the above image into Paint.net. Then rotate it 90 degrees to the right (to get the dark gray at the bottom). Save it as GrayTop.png. Then change the file name to GrayTop.png.

Then change the repeat-y to repeat-x to get the image to repeat in the x (horizontal) direction.

background-repeat: repeat-x;

Another side bar image

Copy the following image to your images folder and name it Border-left-flowers.jpg.

Then change the background-image rule to the following.

And change the background-repeat rule back to repeat-y.

background-repeat: repeat-y;

There is a problem with this. The green stops in the middle of the screen. There are two ways to "fix" the problem (if we want a green background for the entire width of the page).

Fix 1. Use the background-size property to set the width of the image to 100% of the body. However, this distorts the picture (the flowers on the left are expanded and don't look very good).

background-size:100%;

Fix 2. Do a bit of editing and make the picture wider. Go into Paint.net and open the Flower-Left.jpg image. It is 384x131. Create a new image that is 2000x131. Copy the Flower-Left.jpg file to the clipboard and paste it into the new picture. Then use the color picker tool to pick the green color. Use the paint bucket (fill) tool to fill in the empty right side. Save the image as Border-left-flowers-wide.jpg. Change your CSS.

Multiple background images

Save the following files to your images folder with the names ScrollTop.jpg, ScrollMiddle.jpg, and ScrollBottom.jpg.

Delete the html rule that draws the dark tiled background.

Then put the following in your body rule:

background:

url("../images/scrollBottom.jpg") left bottom no-repeat, url("../images/scrollTop.jpg") left top no-repeat, url("../images/scrollMiddle.jpg") left top no-repeat;

The images are listed as they are drawn, top layer to bottom layer (note that this is the opposite of XNA, which draws them in bottom layer to top layer order).

This rule leaves a gap between the middle and the bottom. We can fix this by changing the repeat value for the scrollMiddle.jpg image to repeat-y.

url("../images/scrollMiddle.jpg") left top repeat-y;

There are still some problems that I haven't been able to resolve. Add the following to the body rule:

font-family:verdana;

font-size:6pt;

When I do this, I get the bottom of the scroll at the bottom of the body, and the middle part of the scroll continues down below. This is not what I want. I want the bottom of the scroll to be at the bottom of the screen, not the bottom of the body.

Change the font-size from 6 to 10.

font-size:10pt;

Gradients

Linear gradients

You no longer need to use a graphics program to create gradients. The browser will do gradients for you. Comment out your existing background rule. Then add this:

Nothing happens! Now change the rule to this. NetBeans may give you an error, but it should work.

"-webkit-" is a vendor prefix. What are vendor prefixes?

A list of vendor prefix properties is here. Note that linear-gradient does not appear on this list. I'm not sure why. But I know that linear-gradient does not work in Chrome, while
–webkit-linear-gradient does.

The problem with our above rule is that it only works in Chrome and Safari (but should work soon with Opera, too—Opera is switching to WebKit). If we want to make sure that the rule will work with all major browsers, we must do this:

You can also have more than 2 colors in your gradient. There's no limit. Replace your current background-image with this:

background-image: -webkit-linear-gradient(top, red, orange, yellow, green, blue, indigo, violet);

Note that nobody in their right mind would actually use the above for a background.

You can also change the direction. Options for the first argument are:

top, bottom, left, right

top left, top right, bottom left, bottom right

Note that center does not appear to be an option (at least not in Chrome).

You can set the direction to any angle that you want. Change your first argument to 45deg (or any other angle):

background-image: -webkit-linear-gradient(45deg, red, orange, yellow, green, blue, indigo, violet);

Radial gradients

To create a radial gradient, comment out the existing linear-gradient rule and add the following:

Note that this also does not work in the current version of Chrome, but it will work if you add Chrome's vendor prefix: -webkit-

There are quite a few options for tweaking radial gradients (and linear gradients, too), but we won't consider them here.

Gradients with Colorzilla

Go to Check out their existing gradients and try copying the code from their site into your CSS styles.

Some sources for free images:

Day10.docx1October 22, 2018