How to set CSS background properties?

Backgrounds in CSS

When you develop a web page, the background plays an important role in beautification of your web page. The following background properties of an element can be set during the development of a web page.

  • background-color
  • background-image
  • background-position
  • background-repeat
  • background-attachment
  • background-size
  • background-origin
  • background-clip

Setting background-color

Let us write a code to understand the setting of background-color

<html>
<head>
</head>
<body>
<p style = "background-color:pink;">
 Welcome to the world of programming.
</p>
</body>
</html> 
Setting background-color, www.programmingtutorial.in

Setting background-image

Let us write a code to understand the setting of background-image. By default the inserted image repeats itself horizontally and vertically.

<html>
<head>
<style>
body{
    background-image:url("D:/Programming Tutorial/Logo.jpg");
     }
</style>
</head>
<body>
<p>
 The background image has been inserted.
</p>
</body>
</html> 
Setting background-image, www.programminttutorial.in

Let us now write the above code with no image repeat

<html>
<head>
<style>
body{
    background-image:url("D:/Programming Tutorial/Logo.jpg");
    background-repeat:no-repeat;
     }
</style>
</head>
<body>
<p>
 The background image has been inserted.
</p>
</body>
</html> 
Setting background-image, www.programmingtutorial.in

To insert images horizontally use below code:

<html>
<head>
<style>
body{
    background-image:url("D:/Programming Tutorial/Logo.jpg");
    background-repeat:repeat-x;
     }
</style>
</head>
<body>
<p>
 The background image has been inserted.
</p>
</body>
</html> 
Setting background-image

In the similar way, you can insert any background image vertically. Just change to repeat-y in place of repeat-x.

Setting background position

The background-position property sets the initial position for each background image. The image can be inserted at top, left, center or in terms of left and top percentage.

The following properties of background position are used:

  • background-position:top;
  • background-position:left;
  • background-position:center;
  • background-position:x% y%;

background-position:top;

<html>
<head>
<style>
body{
    background-image:url("D:/Programming Tutorial/Logo.jpg");
    background-position:top;
    background-repeat:no-repeat;
     }
</style>
</head>
<body>
<p>
 The background image has been inserted.
</p>
</body>
</html> 
background-position:top, www.programmingtutorial.in

background-position:left

<html>
<head>
<style>
body{
    background-image:url("D:/Programming Tutorial/Logo.jpg");
    background-position:left;
    background-repeat:no-repeat;
     }
</style>
</head>
<body>
<p>
 The background image has been inserted.
</p>
</body>
</html> 
background-position:left

background-position:center

<html>
<head>
<style>
body{
    background-image:url("D:/Programming Tutorial/Logo.jpg");
    background-position:center;
    background-repeat:no-repeat;
     }
</style>
</head>
<body>
<p>
 The background image has been inserted.
</p>
</body>
</html> 
background-position:center

background-position:x% y%;

<html>
<head>
<style>
body{
    background-image:url("D:/Programming Tutorial/Logo.jpg");
    background-position:150px 150px;
    background-repeat:no-repeat;
     }
</style>
</head>
<body>
<p>
 The background image has been inserted.
</p>
</body>
</html> 
background-position:x% y%;
The image is 150px away from top and left border

background-attachment

Background attachments defines whether the background is fix or scroll. Let us understand it by an example.

<html>
<head>
<style>
body{
    background-image:url("D:/Programming Tutorial/Logo.jpg");
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-attachment:scroll;
     }
</style>
</head>
<body>
<p>
 The background image has been inserted.
</p>
</body>
</html> 

In above example, the background image will also scroll when there is large text on screen. To check how is it working, just copy these codes and paste in notepad and open with