How to set CSS background properties?-Programming tutorial

Table of Contents

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>

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>

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: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: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: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-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