Background Using Css

In our last tutorials, we discussed about the css selectors. In this tutorials and further tutorials, how we apply the css properties on the selectors. Let’s start with the background properties.

Background properties are using shorthand and longhand properties.

Shorthand Example:


Background: background-image | background-position | background-repeat | background-size | background-origin and background-color.

Longhand Example:


Background-image: url(image.jpg);
background-position: left center right | top center bottom | 50% | 100px 100px;
background-repeat: repeat |  repeat-x | repeat-y | no-repeat;
background-size: auto|length|cover|contain|initial|inherit;
background-origin: padding-box;
background-color: #f90 | Red | rgb(0, 0, 0) | transparent;

Background-image: Background-image property is used for given background image of an element. Background image as specified, but with urls made relative and absolute.


body {
    background-image: url("gradient_bg.png");
}

Background-position: The positions of the images are also adjusted through background-position property. Images are positioned according to axis-x and axis-y values. Default values of background-position center both x and y. Background positions are also given as an absolute length in pixels and percentage.


body {
    background-image: url("gradient_bg.png");
    background-position: center center;
}

Background-repeat: The background image repeats both horizontally and vertical. Default value of background-repeat is repeat means image covers the entire section. Repeat-x value image is repeated only horizontally and Repeat-y value image is repeated only vertically. Last background-repeat value is no-repeat, it display on one image.

body {
    background-image: url("gradient_bg.png");
    background-position: center center;
    background-repeat: repeat;
}

Background-color: Background-color property is used for given background color of an element. We can specified the color in hexadecimal, Rgb, and a color name.

body {
    background-image: url("gradient_bg.png");
    background-position: center center;
    background-repeat: repeat;
    background-color:#f90
}

Leave a Comment.