CSS Background

Background in CSS

CSS Background property is used to define the background effects on element. There are 5 background properties that affects the HTML elements:

i. background-color
ii. background-image
iii. background-repeat
iv. background-attachment
v. background-position


1.background-color

The background-color property is used to specify the background color of an element.

Example:

<!DOCTYPE html> 
<html> 
<head> 
<style> h2,p{     background-color: #b0d4de; } </style>
 </head> 
<body> 
<h2>;My first CSS page. </h2> 
<p>Hello Learner's. This is an example of CSS background-color. </p>
</body>
 </html>   

2. background-image

The background-image property sets one or several background images in an element. Let’s set a background-image for the <body> element.

Example:

<!DOCTYPE html>
 <html> 
<head>
<style> body { background-image: url("paper1.gif"); margin-left:100px; } </style> 
</head> 
<body> 
<h1>Hello Learner's>/h1> 
</body> 
</html>     

3. Background-repeat

The background-repeat property is used to control the repetition of an image in the background.

Example:

background-repeat: repeat-x;

<DOCTYPE html>
 <html>
 <head> 
<style> body {     background-image: url("gradient_bg.png");     background-repeat: repeat-x; } </style> 
</head> 
<body> 
<h1>Hello Learner's</h1>
 </body>
 </html>    

 


Example:

background-repeat: repeat-y;

<!DOCTYPE html> 
html> 
<head> 
<style> body {     background-image: url("gradient_bg.png");     background-repeat: repeat-y; } </style> 
</head>
 <body> 
<h1>Hello Learner's</h1> 
</body> 
</html>    

      


4.CSS Background-attachment

The background-attachment property sets whether a background image is fixed or scrolls with the rest of the page.

Even if an element has a scrolling mechanism, a “fixed” background doesn’t move with the element.

Example:

background: white url('bbb.gif'); 
background-repeat: no-repeat; 
background-attachment: fixed;    

5. CSS Background-position

The background-position property is used to control the position of an image in the background.

You can set the following positions:

i. Center
ii. Top
iii. Bottom
iv. left
v. Right

Example:

background: white url('good-morning.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center; 

Recommended Posts:

Spread the love

Leave a Comment

Your email address will not be published. Required fields are marked *