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

Tutorial Contents:

  1. What is CSS Background?
  2. How to Define Background Color in CSS?
  3. How to Use an Image as Background?
  4. Use of CSS Backgroud Clip Broperty
  5. Defining Origin of CSS Background
  6. Background Size Declaration
  7. What is the shorthand way to declare CSS Background?

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
For complete color information and usage, visit CSS Colors Tutorial

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

Example

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

Try in CodeLab

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:

Example

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

Try in CodeLab

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:

Background repeat-x

The background image will repeat along x-axis, i.e. horizontally.
body{
background-image: url(“ship.JPG”);
background-repeat: repeat-x;
}

Try in CodeLab

Background repeat-y

The background image will repeat along y-axis, i.e. vertically.
body{
background-image: url(“ship.JPG”);
background-repeat: repeat-y;
}

Try in CodeLab

Background no-repeat

The background image will have no repitition at all.
body{
background-image: url(“ship.JPG”);
background-repeat: no-repeat;
}

Try in CodeLab

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

Background Position

The background position is set to right horizontally and center vertically.
body{
background-image: url(“coast.JPG”);
background-repeat: no-repeat;
background-position:right center;
}

Try in CodeLab

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:

Background Attachment Fixed

The image will not scroll with page content.
body{
background-image: url(“coast.jpg”);
background-repeat: no-repeat;
background-position:right center;
background-attachment: fixed;
}

Try in CodeLab

Background Attachment Scroll

The image will scroll with page content smoothly.
body{
background-image: url(“coast.jpg”);
background-repeat: no-repeat;
background-position:right center;
background-attachment: scroll;
}

Try in CodeLab

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:

Example

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

Try in CodeLab

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

Background Origin

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

Try in CodeLab

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

Background Size

Try in codelab to experience other properties.
.size{
border: 20px dotted black;
padding: 20px;
background: url(“sunset.jpg”);
background-size: 300px 50px;
background-repeat: no-repeat;
background-origin: border-box;
}

Try in CodeLab

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

Background Shorthand

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

Try in CodeLab

Give Us Your Feedback
OR
If You Need Any Help!
Contact Us