How To Set Background Image Or Color Using CSS

With background property in CSS, you can set the background image or color in an HTML element. There are different sub-properties of background property, which are background-color-to set the background color, background-image-to set the image in the background, background-repeat-to tile image in the background when the image is smaller than the canvas space, background-attachment-to set an image to scroll or fixed and background-position-to set the position or align of an image. Using the shorthand property of background, you can specify all of these sub-properties at a time as given below.

Syntax: background: background-color background-image background-repeat background-attachment background-position;

Example: #section1 {background: pink url(back.png) no-repeat fixed 10px 10px;}

Table of Contents

How to Set Background Color Using CSS

You can set the background color using the background color property. The default value of this property is transparent, which allows any underlying content to show through. You can specify the color value in any format for this property.

Syntax: background-color: color|transparent|inherit

Example: #para1{background-color:#00AAFF;}

Demo:

See the Pen zGQGzx by Shuseel Baral (@shuseel) on CodePen.

How to Set Background Image Using CSS

CSS allows setting an image in the background using the background-image property. This property associates a background image with an element. Content laying under may show through transparent regions in the source image. The background image requires a URL whether complete or relative to link it to the source image specified with the url() syntax. The default value for this property is none which sets the background so that is doesn’t display image.

Syntax: background-image: url(image-url)|none|inherit

Example:

#div1 {background-image: url(background1.gif);}
#div2 {background-image: none;}

Demo:

See the Pen ZGNGyg by Shuseel Baral (@shuseel) on CodePen.

How to Make Background Image Scroll or not Using CSS

There is a property in CSS called background-attachment property to make background image to scroll or not to scroll with the associated content. The default value for this property is scroll, which sets the background to scroll with the associated content. The alternate value of this property is fixed which is intended to make the background static while associated content such as text scrolls over background. There is a another value called inherit to apply the value of this property from a containing parent element.

Syntax: background-attachment: scroll|fixed|inherit

Example:

div {background-image: url(image1.gif); background-attachment:scroll;}
#para1{background-image: url(image2.gif); background-attachment:fixed;}

Demo:

See the Pen YXbXxQ by Shuseel Baral (@shuseel) on CodePen.

How to Set Background Image Position Using CSS

Background position property determines how a background image is positioned within the canvas space used by its associated element. You can specify the position of the background image “upper-left corner” as an absolute distance in pixels or as a relative distance in percentage along with horizontal and vertical dimensions. The position of the image can be specified as named values for the horizontal axis like left, center, and right, and vertical axis like top, center, and bottom. The default value for an unspecified dimension os assumed to be center.

Syntax: background-position: percentage|length|left|center|right percentage|length|top|center|bottom

Example:

#para1 {background-image: url(imge1.gif); background-position: 20px; 30px;}
#div1{ background-image: url(image2.gif); background-position:5% 10%;}
#position{background-image: url(image3.gif); background-position:top right;}
#position2{background-image: url(image3.gif); background-position:bottom left;}

Demo:

See the Pen BNeNmV by Shuseel Baral (@shuseel) on CodePen.

How to Tile Background Images Using CSS

You can tile the background image horizontally or vertically using the CSS property background-repeat. This property determines how background images specified by the property background or background-image tile when they are smaller than the canvas space used by their associated elements. The possible value in this property are repeat-which repeats in both direction, repeat-x repeats only horizontally, repeat-y repeats vertically and no-repeat. The default value for this property is repeat.

Syntax: background-repeat: repeat|repeat-x|repeat-y|no-repeat|inherit

Example:

#div1{background-image: url(image1.gif) background-repeat:repeat;}
#div2{background-image: url(image2.gif) background-repeat:repeat-x;}
#div3{background-image: url(image3.gif) background-repeat:repeat-y;}
#div4{background-image: url(image4.gif) background-repeat:no-repeat;}