You can Improve your skills in designing a whole lot better with HTML if you understand in full how CSS works. Let’s move on and Learn how to apply Colors and Background in our CSS Document and see how it affects our HTML Documents.CSS background properties are used to define the background effects of an element.
CSS properties used for background effects:

Background Color

The background-color property specifies the background color of an element.The background color of a page is defined in the body selector:

body {background-color:#3D3D3D;} 

Click to see a Standalone Example Background Sample 1

The background color can be specified by:

In the example below, the h1, p, div elements have different background colors:

h1 {background-color:#3333FF;}
p {background-color:#BFFF80;}
div {background-color:#870FFF;}

Click to see a Standalone Example Background Sample 2

Background Image

The background-image property specifies an image to use as the background of an element.
By default, the image is repeated so it covers the entire element.you would notice that by default the turtle image was repeated both horizontally and vertically to cover the entire screen? The property background-repeat controls this behaviour.
The background image for a page can be set like this:

body {background-image:url('sample-img.png');}

This example given is a bad combination of Text and images, when using the Image Background property make sure that is image used doesn’t block out the Text making it less visible.
Click to see a Standalone Example Background Image

Background Image – Repeat Horizontally or Vertically
By default, the background-image property repeats an image both horizontally and vertically.
If the Images is repeated only Horizontally, then it’s written like this:

body
{
background-image:url('sample-img.png');
background-repeat:repeat-x;
}

Click to see a Standalone Example Background Image 2

Background Image – Set position and no-repeat
When using a background image, use an image that does not disturb the text.
Showing the image only once is specified by the background-repeat property:

body
{
background-image:url('sample-img2.png');
background-repeat:no-repeat;
}

Click to see a Standalone Example Background Image 3

In the example above, the background image is shown in the same place as the text. We want to change the position of the image, so that it does not disturb the text too much.The position of the image is specified by the background-position property:
These are the Property Values for background-position:

body
{
background-image:url('sample-img2.png');
background-repeat:no-repeat;
background-position:right top;
}

Click to see a Standalone Example Background Image 4

Lock background image (background-attachment)
The property background-attachment specifies whether a background picture is fixed or scrolls along with the containing element.
A fixed background image will not move with the text when a reader is scrolling the page, whereas an unlocked background image will scroll along with the text of the web page.

→ For Fixed Images
body {
		background-color: #c0c0c0;
		background-image: url("sample-img2.png");
		background-repeat: no-repeat;
		background-attachment: fixed;
}

→ For Scroll Images
body {
		background-color: #c0c0c0;
		background-image: url("sample-img2.png");
		background-repeat: no-repeat;
		background-attachment: scroll;
}

Click to see a Standalone Example Background Image Fixed Background Image Scroll

Background – Shorthand property
As you can see from the examples above, there are many properties to consider when dealing with backgrounds.
To shorten the code, it is also possible to specify all the properties in one single property. This is called a shorthand property.
The shorthand property for background is simply “background”:

body {background:#ffffff url('sample-img.png') no-repeat right top;}

When using the shorthand property the order of the property values are:

It does not matter if one of the property values are missing, as long as the ones that
are present are in this order. → Source W3School.

---

Back

Main: CSS Programming

Previous Lesson: CSS Syntax

Next Lesson: Texts