CSS – Backgrounds
CSS – Backgrounds
Using CSS, different background properties can be set in the HTML document. These are as follows,
background-color: it sets the background color of an HTML element.
<tag_name style = "background-color:value;">
background-image: it sets the background image of an HTML element.
background-image: url("image_url");
background-repeat: this property lets to control the repetition of an image in the background.
background-image: url("image_url");
background-repeat: repeat/no-repeat;
To repeat the background-image vertically,
background-repeat: repeat-y ; and to repeat the background-image horizontally,
background-repeat: repeat-x is used.
background-position: it controls the position of the background image.
background-image: url("image_url");
background-position:x px ypx;
It sets the background image position x pixels away from left and y pixels down from top.
background-attachment: it controls the scrolling of a background image.
background-image: url("image_url");
background-attachment: fixed/scroll;
Example:
<html>
<head>
<style>
body {
background-image: url("Desert.jpg");
background-repeat: repeat-y;
background-position:150px 250px;
background-attachment:fixed;
}
</style>
</head>
<body>
<p style = "background-color:green;">
This text has background color.
</p>
</body>
</html>
Output:
Quiz :Quiz 1: What is the different background properties used in CSS?
Quiz 2: Give an example for setting a background image with position and attachment as scroll.
