CSS Background - Use of Colors and Images as Background

1. Introduction To CSS Background

Whenever we need to define the background of some HTML elements, we use CSS background properties. In this way, we can define a number of properties apart from background color only. Below are all the CSS backgrounds properties:

• Background Color
• Background Image
  1. Repeat Background Image
  2. Position of Background Image
  3. Attachment Type of Background Image
• Clip Defines Scope of Background Image or Color
• Origin Depicts the Origin of the Background
• Size defines the Size of the Background Image
• Background Shorthand Property

2. CSS Background Color

We can define the background color of an element by using the background-color property. The background color must be a valid CSS color and must be from any of the following color types:

• Color Names
• RGB Color Values
• Hex Color Values
• HSL Color Values
• RGBA Color Values
• HSLA Color Values

Look at the below example to understand the proper usage of the background-color property.

body{
background-color: DeepSkyBlue; /*Background color value by name*/
}

3. CSS Background Image

Interestingly, CSS allow us to use an image as a background for an HTML element. We define background image of an HTML element by using background-image property. Also, we do not use images that disturb the text of an element. See the example below:

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

3.1. CSS Background Image - Repeat Property

By default, background-image property repeats the images horizontally and vertically. But sometime we need the image to repeat only horizontally or vertically or no repetition at all. We can do this by following way:

body{
background-image: url("ship.JPG");
background-repeat: repeat-x;
}

body{
background-image: url("ship.JPG");
background-repeat: repeat-y;
}

body{
background-image: url("ship.JPG");
background-repeat: no-repeat;
}

3.2. CSS Background Image - Position Property

The background Position property is used to specify the position of the background image. It may have the following values:

• left top
• left center
• left bottom
• right top
• right center
• right bottom
• center top
• center center
• center bottom

body{
background-image: url("coast.JPG");
background-repeat: no-repeat;
background-position:right center;
}

3.3. CSS Background Image - Attachment Property

CSS also provides another image property called background-attachment to make the image scroll or fixed. See the example below:

body{
background-image: url("coast.jpg");
background-repeat: no-repeat;
background-position:right center;
background-attachment: fixed;
}

body{
background-image: url("coast.jpg");
background-repeat: no-repeat;
background-position:right center;
background-attachment: scroll;
}

4. CSS Background - Clip Property

This background-clip property defines the background image or background color containing the area. It tells the browser how far the background will cover the HTML element. It can have the following properties:

• border-box: The background expands up to the border outline
• padding-box: The expansion of background will be limited up to the inner edge of the border
• content-box: Background will remain limited only to the content
• inherit: It will inherit the properties from its parent element
• initial: It will set the properties to default

Try in codelab to understand it clearly:

.clip {
border: 20px dotted black;
padding: 20px;
background: lightblue;
background-clip: border-box; /*This is the default value*/
}

5. CSS Background - Origin Property

The background-origin property defines the origin of the background image. It can have the following properties:

• border-box: The background image will start from the upper left corner on the outer edge of the border
• padding-box: Background Image will start from the upper left corner on the inner edge of the border
• content-box: The background image will start from the upper left corner of the content
• inherit: It will inherit the properties from its parent element
• initial: It will set the properties to default

.origin {
border: 20px dotted black;
padding: 20px;
background: url(paper.gif);
background-repeat: no-repeat;
background-origin: padding-box; /*This is the default value*/
}

6. CSS Background - Size Property

The size of the background image can be defined using the background-size property. It can have the following properties:

• auto: It is the default value, the background image will be displayed in its original size
• length: This property defines the width and height of the background. The first value defines the width and the second value defines height. Single value means both width and height have the same value
• percentage: It sets the width and height of background image size in percentages.
• cover: This property will make the background image to resize and cover the whole block or element
• contain: It will resize the background image to make it fully visible
• initial: It will set the properties to default
• inherit: It will inherit the properties from its parent element

.size{
border: 20px dotted black;
padding: 20px;
background: url("sunset.jpg");
background-size: 300px 50px;
background-repeat: no-repeat;
background-origin: border-box;
}

7. CSS Background - Short-Hand Property

Sometimes we need to shorten our code length. Therefore CSS background shorthand property comes in handy. We specify all background properties into a single property i.e background. We specify properties in background shorthand property in the following order.

• background-color
• background-image
• background-repeat
• background-attachment
• background-position

body {
background: DeepSkyBlue url("figure.png") no-repeat right top;
}