background-color

Background Color

The background-color property property is used to set up the background color of the box.

The possible values for css color specifications are:

ValuesDescription
named colorblue
rgb/ hslrgb(100, 200, 0)
hexadecimal#00ff00
transparentdefault
snippet
<html>
<head>
</head>
<body>
    <p style="background-color: rgb(100, 200, 0)"> Never cry for the person who hurts you. Just smile and say, 
	thanks for giving me a chance to find someone better than you. </p>
    <div style="background-color: #00ff00"> Never cry for the person who hurts you. 
	Just smile and say, thanks for giving me a chance to find someone better than you. </div>
</body>
</html>
Background Image

The background-image property is used to set the background image of the box.

The possible values are URIs that points to the valid image (gif, jpeg, png)

url('image.gif') 
url('http://www.quotefellas.com/quote.jpg')
snippet
<html> 
<head> 
</head> 
<body> 
    <p style="background-image: url(image.gif)"> Never cry for the person who hurts you.  
	Just smile and say, thanks for giving me a chance to find someone better than you. </p> 
    <button style="background-image: url(image.gif)">Button with Image</div> 
</body> 
</html>
Background Position

The background-position property is used specify the top and the left of the background image relative to the top and the left of the element box.

The possible values are.

PropertiesDescription
<percentage>
<length>
left | center | rightfor horizontal direction
top | center | bottomfor vertical direction
For example
background-position : 30px 50px    /* first value applies to horizontal direction,   
second value apply to vertical direction*/ 
background-position : left bottom 
background-position : 10%    /* applies to both the vertical and horizontal direction.*/ 
snippet
<html> 
<head> 
    <style> 
        p {margin: 10px} 
        body * {background-image: url(bg.jpg)} 
    </style> 
</head> 
<body style="background-image: url(image.png);background-position: 0px"> 
    <p style="background-position: 0px"> Say it before it's too late.</p> 
    <p style="background-position: 10px"> Say it before it's too late.</p> 
    <p style="background-position: -10px 10%"> Say it before it's too late.</p> 
    <p style="background-position: 6% -6%"> Say it before it's too late.</p> 
    <p style="background-position: 6cm"> Say it before it's too late.</p> 
</body> 
</html>
background position x

The background-position-x is similar to background-position. It applies to horizontal direction in internet explorer only.

background position y

The background-position-y is similar to background-position. It applies to vertical direction in internet explorer only.

background-repeat

The background-repeat property allows to specify how the background image is repeated.

The possible values are.

PropertiesDescription
no-repeatonly one instance of image will be rendered.
repeatthe image is rendered in both horizontally and vertically.
repeat-xthe image is repeated only horizontally.
repeat-ythe image is repeated only vertically.
snippet
<html> 
<head> 
    <style> 
        p {border: 1px solid #000000;width:300px; height:250px; background-image: url(bg.jpg)} 
    </style> 
</head> 
<body> 
    <form> 
        <p style="background-repeat: repeat-x"> 
		Commodi numquam adipisci sit consequatur vitae saepe beatae, vero sit dignissimos  
		harum accusamus fuga iusto facilis expedita omnis beatae, dolorum perferendis harum  
		blanditiis nemo cumque dignissimos recusandae a aliquid, laboriosam</p> 
        <p style="background-repeat: repeat-y"> 
		Commodi numquam adipisci sit consequatur vitae saepe beatae, vero sit dignissimos  
		harum accusamus fuga iusto facilis expedita omnis beatae, dolorum perferendis harum  
		blanditiis nemo cumque dignissimos recusandae a aliquid, laboriosam</p> 
        <p style="background-repeat: repeat"> 
                Commodi numquam adipisci sit consequatur vitae saepe beatae, vero sit dignissimos  
		harum accusamus fuga iusto facilis expedita omnis beatae, dolorum perferendis harum  
		blanditiis nemo cumque dignissimos recusandae a aliquid, laboriosam</p> 
    </form> 
</body> 
</html> 
Background Attachment

The background-attachment property is used to specify whether or not the background image scrolls with the document.

The possible values are.

PropertiesDescription
fixedthe image is fixed relative to the view-port
scrollthe image is fixed relative to the document, and the two will be scrolled together (the default value)
snippet
<html> 
<head> 
    <style> 
        p {width:300px; height:250px; background-image: url(bg.jpg)} 
    </style> 
</head> 
<body> 
    <form> 
        <p style="background-attachment: fixed; overflow: fixed"> 
		Commodi numquam adipisci sit consequatur vitae saepe beatae, vero sit dignissimos  
		harum accusamus fuga iusto facilis expedita omnis beatae, dolorum perferendis harum  
		blanditiis nemo cumque dignissimos recusandae a aliquid, laboriosam</p> 
        <p style="background-attachment: fixed; overflow: scroll"> 
                Commodi numquam adipisci sit consequatur vitae saepe beatae, vero sit dignissimos  
		harum accusamus fuga iusto facilis expedita omnis beatae, dolorum perferendis harum  
		blanditiis nemo cumque dignissimos recusandae a aliquid, laboriosam</p> 
    </form> 
</body> 
</html>
background

The background property is a shortcut that can be used to set the background-image properties.

syntax
background: <background-attachment> <background_color> <background_image> <background_position> <backgound_repeat>

Both the background-color and background-image can be rendered simultaneously.

snippet
<html> 
<head> 
    <style> 
        p {width:300px; height:250px; } 
    </style> 
</head> 
<body> 
    <form> 
        <p style="background: fixed blue url(bg.jpg) 5cm repeat-x;">This is a paragraph with the background style</p> 
    </form> 
</body> 
</html>
Related Tutorial
3 Margin
4 Border
Follow Us
https://www.facebook.com/Rookie-Nerd-638990322793530 https://twitter.com/RookieNerdTutor https://plus.google.com/b/117136517396468545840 #