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