www.pickatutorial.com Computer Tutorials
Top eBooks: C/C++ | C# | Android | Mathematics | Database | Cloud | Graphics | Networking | Oracle | Hardware | AI
Top Tutorials: C/C++ | C#.NET | PHP MySQL | Java | Java Script | jQuery | HTML | xHTML | HTML5 | VB Script| CSS
Lessons CSS Working with Background Images Bookmark and Share
Tutorial Home
Lesson 1
Lesson 2
Lesson 3
Lesson 4
Lesson 5
Lesson 6
Lesson 7
Lesson 8
Lesson 9
In the previous lesson we learned to use the CSS color and background-color properties.

In this lesson we will build upon the knowledge we have gathered thus far and learn more some more CSS properties.

CSS 'background-image' property

The CSS property background-image is used to insert a background image.

To insert an image as a background image for a web page, simply apply the background-image property to <body> and specify the location of the image.

body { background-color: #ff0000;
background-image: url("http://pickatutorial.com/resources/logo.jpg"); }

Note that here we are applying two CSS properties to the <body> tag and the two properties are seperated using a semi-colon(;). We can apply any number of properties to any element. The above code sets the background color as red and it also sets the following image as the background image of the HTML document, using its absolute path:

CSS 'background-repeat' property

When using the CSS 'background-image' property, the image is repeated both horizontally and vertically to cover the entire screen. The CSS background-repeat property is used to control this behavior.

The table below outlines the four different values for background-repeat .

Value Description
background-repeat: repeat-x The image is only repeated horizontally
background-repeat: repeat-y The image is only repeated vertically
background-repeat: repeat The image is repeated both horizontally and vertically
background-repeat: no-repeat The image is not repeated

For example, to avoid repetition of a background image the code should look like this:

body {
background-color: #ff0000;
background-image: url("http://pickatutorial.com/resources/logo.jpg");
background-repeat: no-repeat; }

CSS 'background-attachment' property

The CSS property background-attachment specifies whether a background picture is fixed or scrolls along with the containing element.

A fixed background image does not move with the text when a visitor scrolls the page, whereas an unlocked background image does scroll along with the text of the web page.

The CSS property background-attachment can take one of the following values:

background-attachment: scroll;

The above would make the image scroll as the page is scrolled.

background-attachment: fixed;

The above would lock the image and the same would not scroll as the page is scrolled.

Here is an example that fixes the background image:

body {
background-color: #FFCC00;
background-image: url("http://pickatutorial.com/resources/logo.jpg");
background-repeat: no-repeat;
background-attachment: fixed; }

CSS 'background-position' property

By default, a background image is positioned in the top left corner of the screen. The CSS property background-position allows us to change this default and position the background image anywhere on the page we like.

There are a number of different ways to set the values for background-position property. However, all of them are formatted as a set of coordinates. For example, the value '200px 200px' positions the background image 200px from the left side and 200px from the top of the browser window.

The coordinates can also be indicated as percentages of the browser window, fixed units (pixels, centimetres, etc.) or we can also use the words top, bottom, center, left and right. The table below provides some examples:

Value Description
background-position: 5cm 2cm The image is positioned 5 cm from the left and 2 cm down the page
background-position: 50% 50% The image is centrally positioned
background-position: top right The image is positioned in the top-right corner of the page

The code example below positions the background image in the bottom left corner:

body {
background-image: url("http://pickatutorial.com/resources/logo.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: left bottom; }

CSS 'background' property

The CSS property background provides us a shorter way to set different CSS background properties.

With background we can compress several properties and thereby write our style sheet in a shorter way.

See the following example:

background-color: #FFFF00;
background-image: url("http://pickatutorial.com/resources/logo.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;

Using the background property the above code can be reduced to the following:

background: #FFCC66 url("http://pickatutorial.com/resources/logo.jpg") no-repeat fixed right bottom;

The browser automatically sets different CSS background properties. If we omit a value the browser sets it to its default value. For example if we omit the values of the background-position from the above example the browser would place the image in the top left corner of the screen.


Next >>> Lesson No. 5: CSS Working With Fonts






Home - Advertise - Contact - Disclaimer - About Us
© Since 2006 pickatutorial.com -- All Rights Reserved.