programplug Logo




CSS Background

The css background propertis are used to declare all background style or effects for an elements.
Some of the CSS background properties are:
1- Background-Color
2- Background -Image
3- Background-Repeat
4- Background-Attachment
5- Background-Postion



1) CSS background-color:

The css background-color property is specify to set the background- color of an element.
The example below deomonstrates the background color:



<!DOCTYPE html> <html> <head> <style> h3,p{ background-color:#ff0000; } </style> </head> <body> <h2> CSS page</h2> <p>Set an CSS background-color.</p> </body> </html>

2) CSS background-image:

The background image property is used to set an background-image of an element.
The example below give the demonstration of the background image:


<html>
  <head>
    <style>
      body {
        background-image: url("imagename.jpg);
           }
    </style>
   </head>
   <body>
    <p>My Site</p>
  </body>
</html>

3) CSS background-repeat:

The css background repeat property is specify the control the repetition of image in the background by horizantally or vertically.
The example will clear the property easily.


<!DOCTYPE html>  
<html>  
<head>  
<style>
body {  
    background-image: url("imagename.png");  
    background-repeat: repeat-x;  
}  
</style> 
</head>
<body> 
<h1>Hello Javatpoint.com</h1>  
</body>  
</html>

4) CSS background-attachment:

The background-attachment property is used to make control in the scrolling of an image in browser window.
The example will clear the property easily.


<!DOCTYPE html>
<html>
<head>
<style>
body  {
background-image: url(imagename.png');
background-repeat: no-repeat;
background-attachment: fixed;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do 
eiusmod tempor incididunt ut labore et dolore magna aliqua. 
Ut enim ad minim veniam, quis nostrud exercitation ullamco 
laboris nisi ut aliquip ex ea commodo consequat. 
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum 
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat 
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>


<p>If you unable to see the scrollbars, then resize the browser window.</p>
</body>
</html>

5) CSS background-position:

The background-position proprty is used to specify the background image. If there is no background-position has been mentioned, then the image is place at the default top-left postion of an element that is (0,0).
Example-


<!DOCTYPE html>
<html>
<head>
<style>
body  {
background: white url('imagename.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: left;   
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
 Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
 nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in 
 voluptate velit esse cillum dolore eu fugiat nulla pariatur.
 Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
 officia deserunt mollit anim id est laborum.
</p>
</body>
</html> 






Our Services

Developing Cheapest Websites
Offer Digital Marketing
Provide College Projects
Attractive Website Developing
Summer Training,Industrial Training
SCO,SMO

Contact Us

Dehradun Uttarakhand India
www.programplug.com
info@programplug.com
08534019974
Designed By : Mridul Gupta

Other Link

About Us

Contact Us

Disclaimer

Privacy Policy