06 - CSS Backgrounds

Backgrounds in CSS are crucial and they are one of the basic things you need to know in CSS.

All basic things you need to know about CSS backgrounds will be covered here.

Backgrounds can be set for an HTML in various ways.

The following are the five main background properties used on any HTML element. They are,

  • background-color: With this property we can specify the color to fill the background with.
  • background-image: Using this property we can set an image in the background for an HTML element.
  • background-repeat: This property helps in controlling the repetition of an image in background.
  • background-position: This property helps us to control the position of a background image.
  • background-attachment: This property is used to specify whether an image in the background scrolls or not.

All the functionalities of the above properties can be merged into a short hand property called “background”.

More about the backgrounds

Background color

This property helps to fill the background of an HTML element with any color. They are various ways to specify a color. As discussed in the earlier sections, a color can be specified using an Hex code or simply by a name or using a rgb value etc

We use background-color property to set the background color of any HTML element. Background colors can be applied to most of the HTML elements like body, tables, frames etc.

The following lines of code give same output though the way we mentioned the color are different.

<p style="background-color: blue">I am in blue
<p style="background-color:rgb(0,0,255)">I am in rgb(0,0,255)
<p style="background-color:#0000FF">I am in #0000FF

The output of the above program would be:-

This property can also be used to set a background color for the body of an HTML page. The following line of code demonstrates the same,

<html>
<head>
    <style>
    body
    {
    background-color:aqua;
    }
    </style>
</head>
<body>
    The background-color property for the body of a web page
</body>
</html>

The output of the above program would be:-

Transparent Backgrounds

We can also make backgrounds transparent by setting the background-color to “transparent”.

Such backgrounds are useful when we want other HTML elements underneath the background to be visible.

Background Image

This property enables us to specify an image to be displayed in the background.

The following line of code helps in understanding more about background images.

<html>
<head>
    <style>
    p
    {
        background-image:url(forest.jpg);
        font-weight:bold;
        color:white;
    }
    </style>
</head>
<body>
    <p>The background-image property for a paragraph </p>
</body>
</html>

The output of the above program would be,

An image can be set as a background for any HTML element like tables, body, paragraphs etc. Background-color property is used in combination with background-color property so that if any space is left that would be set to the background color.

The image path used in the above example is relative as the image lies in the same folder as the HTML file.

If the image is in other folder then an absolute path should be specified. 

Background Repeat

Usually an image in the background is tiled and is repeated across the element until it is filled. To prevent the browser from repeating an image we will set the background-repeat property to “no-repeat”. Sometimes we may want to repeat the image either horizontally or vertically and all these requirements can be fulfilled using background-repeat property.

<html>
<head>
    <style>
    body
    {
    background-image:url(conch.jpg);
    font-weight:bold;
    color:white;
    }
    </style>
</head>
<body>
    <p>The background-image property for the body of a web page.</p>
</body>
</html>

The output of the above program would be:-

If the following line is added to the code within style tags then the output would have only one image.

background-repeat: no-repeat;

The below table gives information on other values for background-repeat property

Value

Syntax

Description

repeat

background-repeat: repeat;

Default value. Tiles the image in both directions until the element is filled.

no-repeat

background-repeat: no-repeat;

Tiling is not done and the image is displayed only once.

repeat-x

background-repeat: repeat-x;

Tiles the image horizontally along x-axis.

repeat-y

background-repeat: repeat-y;

Tiles the image vertically along y-axis.

inherit

background-repeat: inherit;

The background -property is same as the parent of the element.

Background position

The background position property helps us to place the background image at a specific position.

It’s obvious that this property can be used after setting a background image. The values specify the position of the top-left corner of the image.

We use this property to avoid unnecessary disturbance caused by the background image to the text.

Determining the position

The values for background-position property are usually mentioned in pixels the first being the x-axis position and the y-axis position following the x-axis value.

We can also mention other values than pixels like left, center and right for x-axis, top, center and bottom for y-axis. Percentages can also be mentioned.

The following example makes it clearer,

<html>
 <head>
    <style>
    body
    {
    background-image:url(apple.jpg);
    background-position: top left;
    background-repeat: no-repeat;
    }
    </style>
 </head>
 <body>
 </body>
</html>

The output of the above program would have the background image aligned to the top left.

 

We can easily identify the changes when the background-repeat property is set to no-repeat while using background-position property.

 

 Background Attachment

Using this property we can specify whether the background image is fixed or scrollable. The values available for this property are mentioned in the following table,

Value

Syntax

Description

scroll

background-attachment: scroll;

Default value. The background is scrolled along with the element when a user scrolls the web page.

fixed

background-attachment: fixed;

The background is fixed and is not scrollable.

inherit

background-attachment: inherit;

It inherits the property from its parent element.

 

The Short hand Background property

All the rules above discussed can be blended into one with this property. Simply mention the entire properties one after the other under the single property called background.

For example:-

background-image:url(apple.jpg);
background-position: top left;
background-repeat: no-repeat;
background-attachment: fixed;

All the above rules can be combined into one line of code.

background: url(apple.jpg) top left no-repeat fixed;

It’s not compulsory that you have to mention every value, the default value would be used when the value is not specified for that property.

A small piece of program demonstrating the short hand background property

<html>
<head>
    <style>
    body
    {
    background: url(apple.jpg) top left no-repeat fixed;
    color:white;
    }
    </style>
</head>
<body>
    <pre><i>
    "Sometimes people are beautiful.
    Not in looks.
    Not in what they say.
    Just in what they are."
    --Markus Zusak</i>
</body>
</html>

The output of the above program would be:

Like us on Facebook