CSS Background

Background plays an important role in the visual presentation of a web page.

CSS provide several properties for styling the background of an element, including coloring the background, placing images in the background and managing their positioning, etc.

The background properties are background-color, background-image, background-repeat, background-attachment and background-position.


Background Color

This property is used to set the background color of an element.

Color values in CSS are most often specified in the following formats:

  • a color name – like “red”
  • a HEX value – like “#ff0000”

an RGB value – like “rgb(255, 0, 0)”

Input:-

Index.html	
<body>
	 <p> Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p>
</body>

Style.css

body {
    background-color: #999999;
}

Output:-


Background Image

The background-image property set an image as a background of an HTML element. When applying the background image to an element, make sure that the image you choose does not affect the readability of the element’s text content. Like an element which has black background color should not have black color as its element property which will effect visibility.

Input:-

Index.html	
<body>
	 <p> Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p>
</body>

Style.css

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

Output:-


Background Repeat

This property allows us to control how a background image is repeated or tiled in the background of an element. We can set a background image to repeat vertically (y-axis), horizontally (x-axis), in both directions, or in neither direction.

We can provide this property like repeat, no-repeat, repeat-x(horizontally), repeat-y(vertically).

Input:-

Index.html	
<body>
	 <p> Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p>
</body>

Style.css

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

Output:-

Input:-

Index.html	
<body>
	 <p> Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p>
</body>

Style.css

body {
    background-image: url("images/tile.png");
	   background-repeat: repeat-y;
}

Output:-


Background Position

This property is used to control the position of the background image. If no background position has been specified, the background image is placed at the default top-left position of the element i.e. at the upper leftmost corner

Input:-

Index.html	
<body>
	 <p> Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p>
</body>

Style.css

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

Output:-

Note: If two values are specified for the background-position property, the first value represents the horizontal position, and the second represents the vertical position. If only one value is specified, the second value is assumed to be center.


Background Attachment

This property determines whether the background image is fixed with regard to the viewport or scrolls along with the containing block.

body {
		background-image: url("images/tile.png");
		background-repeat: repeat-y;
		background-attachment: fixed;	   
}

Background Shorthand Property

As we can see in the examples above, there are many properties to consider when dealing with the backgrounds. However, it is also possible to specify all these properties in one single property to shorten the code or avoid extra typing.

The background property is a shorthand property for setting all the individual background properties, i.e., background-color, background-image, background-repeat, background-attachment and the background-position property at once.

background: color image repeat attachment position;

If the value for an individual background property is missing or not specified while using the shorthand notation, the default value for that property will be used instead, if any.

Input:-

Index.html	
<body>
	 <p> Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p>
</body>

Style.css

body {
		background: #f0e68c url("images/tile.png") no-repeat fixed 250px 25px;	   
}

Output:-

Note: The background properties do not inherit like the color property, but the parent element’s background will be visible through by default, because of the default transparent value of the background-color CSS property.