CSS BACKGROUNDS

CSS BACKGROUNDS

We will be discussing the backgrounds of various HTML elements. You will learn how to set background properties for the following element

  • The background-color property: This is used to set the background color of an element.
  • The background-image property: is used to set the background image of an element.
  • The background-repeat property: is used to control the repetition of an image in the background.
  • The background-position property: is used to control the position of an image in the background.
  • The background-attachment property: is used to control the scrolling of an image in the background.
  • The background property is used as a shorthand to specify a number of other background properties.

Set the Background Color

Following is the example which demonstrates how to set the background color for an element. 

    •       
                    <!DOCTYPE html>	 
<html>
<head>
</head>
<body>
<p style="background-color:blue;">  This text has a blue background color </p>
</body>
</html>

    Set the Background Image

    We can set the background image by calling local stored images as shown below − 

    •       
                    <!DOCTYPE html>	 
<html>
<head>
<style>body {background-image:url("tryit/moonshine.jpg"); 
background-color:#ccccc;}</style>
<body>
<p> This text has a blue background color </p>
</body>
</html>

    Repeat the Background Image

    The following example demonstrates how to repeat the background image if an image is small. You can use no-repeat value for background-repeat property if you don't want to repeat an image, in this case image will display only once. By default background-repeat property will have repeat value. 

    •       
                    <!DOCTYPE html>	 
<html>
<head>
<style>body { background-image:url("tryit/moonshine.jpg"); 
background-repeat:repeat; }</style>
</head>
<body>
<p>  This text has a blue background color </p>
</body>
</html>

    The following example which demonstrates how to repeat the background image vertically. 

    •       
                    <!DOCTYPE html>	 
<html>
<head>
<style>body { background-image:url("tryit/moonshine.jpg"); 
background-repeat:repeat-y; }</style>
</head>
<body>
<p>  This text is not needed </p>
</body>
</html>

    The following example demonstrates how to repeat the background image horizontally.

    •       
                    <!DOCTYPE html>	 
<html>
<head>
<style>{ background-image:url("tryit/moonshine.jpg"); 
background-repeat:repeat-x; }</style>
</head>
<body>
<p>  This text is not needed </p>
</body>
</html>

    Set the Background Image Position

    The following example demonstrates how to set the background image position 100 pixels away from the left side. 

    •       
                    <!DOCTYPE html>	 
<html>
<head>
<style>body { background-image:url("tryit/moonshine.jpg"); 
background-postion:200px; }</style>
</head>
<body>
<p>  This text is not needed </p>
</body>
</html>

    Set the Background Attachment

    Background attachment determines whether a background image is fixed or scrolls with the rest of the page. The following example demonstrates how to set the fixed background image. 

    •       
                    <!DOCTYPE html>	 
<html>
<head>
<style>body { background-image:url("tryit/moonshine.jpg"); 
background-repeat:no-repeat;  background-attachment:fixed;}</style>
</head>
<body>
<p> The background-image is fixed. Try to scroll down the page.   
The background-image is fixed. Try to scroll down the page.
The background-image is fixed. Try to scroll down the page.    
The background-image is fixed. Try to scroll down the page.    
The background-image is fixed. Try to scroll down the page.  
The background-image is fixed. Try to scroll down the page. 
The background-image is fixed. Try to scroll down the page.
The background-image is fixed. Try to scroll down the page.   
The background-image is fixed. Try to scroll down the page.  </p>
</body>
</html>

    The following example demonstrates how to set the scrolling background image 

    •       
                    <!DOCTYPE html>	 
<html>
<head>
<style>body { background-image:url("tryit/moonshine.jpg"); 
background-repeat:no-repeat;  background-attachment:scroll;}>
</head>
<body>
<p> TThe background-image is not fixed. Try to scroll down the page.   
The background-image is not fixed. Try to scroll down the page.
The background-image is not fixed. Try to scroll down the page.    
The background-image is  not fixed. Try to scroll down the page.    
The background-image is not fixed. Try to scroll down the page.  
The background-image is not fixed. Try to scroll down the page. 
The background-image is not fixed. Try to scroll down the page.
The background-image is not fixed. Try to scroll down the page.   
The background-image is not fixed. Try to scroll down the page.   </p>
</body>
</html>

    CSS Background Shorthand

    CSS background - Shorthand property To shorten the code, it is also possible to specify all the background properties in one single property. Instead of writing:

    body { background-color: #ffffff; background-image: url("img_tree.png"); background-repeat: no-repeat; background-position: right top; } You can write: body { background: #ffffff url("img_tree.png") no-repeat right top; }

    PLEASE NOTE: When using the shorthand property the order of the property values is:

    background-color first, followed by background-image then background-repeat and background-attachment the last is background-position It does not matter if one of the property values is missing, as long as the other ones are in this order. But take Note that we do not use the background-attachment property in the examples above, as it does not have a value.

    Popular tags

    CSS Button CSS Gradient CSS Responsive CSS Transition CSS Gallery

    Dess App

    DessApp is an Integrated E-learning Education, Interactive and User-friendly features, smarter options and redefining your school costs effectively and efficiently.

    View
    1 1