A Smarter Way To Learn HTML & CSS(2015)

77
Background images part 2

Suppose you have an image that’s smaller than the page and you want to keep it that way. You don’t want it to repeat. But if you write…

body {
background-image: url("images/faded-logo.png");
}

…the browser will automatically repeat it, to fill the page. So you write…

body {
background-image: url("images/faded-logo.png");
background-repeat: no-repeat;
}

A small image that doesn’t repeat is placed, by default, at the left-upper corner. But you can specify a position.

body {
background-image: url("images/faded-logo.png");
background-repeat: no-repeat;
background-position: right top;
}

Now the image will be positioned at the right-top corner.

The horizontal specifications are left, center, and right. The vertical specifications are top, center, and bottom. You always write the horizontal specification first. It’s left bottom, never bottom left. If you want to center an image both horizontally and vertically, you write:

background-position: center;

Do you want the image to scroll with everything else? If so, you write…

body {
background-image: url("images/faded-logo.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: scroll;
}

If you want the image to stay put, you write…

body {
background-image: url("images/faded-logo.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}

In your CSS file, add a background image to the right top of the window. Don’t let it repeat. Fix it in place. The image is http://www.asmarterwaytolearn.com/monarch.jpg. In your HTML file, use <!-- and --> to hide the fixed-position header from the browser so it doesn’t display. Save the file. Display the page.

Sample CSS code is at:
http://asmarterwaytolearn.com/htmlcss/practice-77-1.html.

Sample HTML code is at:
http://asmarterwaytolearn.com/htmlcss/practice-77-2.html.

Find the interactive coding exercises for this chapter at:
http://www.ASmarterWayToLearn.com/htmlcss/77.html