Background Property

In the previous tutorial, we have learned how to use shorthand properties. In the tutorial, we have tried to use the background-color property. Turns out, in addition to color, also we can use the property background image files and other options such as looping and image position.
And this is an example of a frequently used property background.

background-color Used to determine the background color
background-repeat Used to set the looping image. By default, the image will be repeated to fill the pages. But with css, wi have three option:

  • repeat-x. Used to repeat the image horizontally, from left to right
  • repeat-y. Used to repeat the image vertically, from top to bottom.
  • no-repeat. Used to not repeat the image
background-position Used to adjust the position of the image. whether at the top, bottom, middle, left, right or both

So now we try with coding.. 🙂

<html>
<head>
   <title>Shorthand Properties</title>
   <style type="text/css">
   body {
    background-image: url(images/chess.png);
   }
   div {
    background-color: #CC9;
    border-width: 1px 5px 5px 10px;
    border-color: green yellow red blue;
    border-style: solid;
    }
   </style>
</head>
<body>
<div>
   <h4>Shorthand Properties</h4>
   <p>This is shorthand properties using CSS. Very simple and very nice</p>
</div>
</body>
</html>

Note: url(images/chess.png) the intention is to take pictures of images folder with the name of the image chess.png. See this image:
CSS Image
Save with name background_properti.html and open it with your browser. From the results would we get a repetition of the image to fill the pages. So if we want the image not repeat, we must change code like this:

<html>
<head>
   <title>Shorthand Properties</title>
   <style type="text/css">
   body {
    background-image: url(images/chess.png);
    background-repeat: no-repeat;
   }
   div {
    background-color: #CC9;
    border-width: 1px 5px 5px 10px;
    border-color: green yellow red blue;
    border-style: solid;
    }
   </style>
</head>
<body>
<div>
   <h4>Shorthand Properties</h4>
   <p>This is shorthand properties using CSS. Very simple and very nice</p>
</div>
</body>
</html>

Save and reload your browser, and she what happen? Now we get image with no repat on browser. 🙂
But how to if we want get this image repeat horizontally or vertically?
See this code:

<style type="text/css">
   body {
    background-image: url(images/chess.png);
    background-repeat: repeat-x; //for repeat horizontally
   }
   div {
    background-color: #CC9;
    border-width: 1px 5px 5px 10px;
    border-color: green yellow red blue;
    border-style: solid;
    }
</style>

And then:

<style type="text/css">
   body {
    background-image: url(images/chess.png);
    background-repeat: repeat-x; //for repeat vertically
   }
   div {
    background-color: #CC9;
    border-width: 1px 5px 5px 10px;
    border-color: green yellow red blue;
    border-style: solid;
    }
</style>

Save and reload your browser..
And finally, we must compress this code using shorthand properties like this:

<style type="text/css">
   body {
    background: url(images/chess.png) no-repeat; 
   }
   div {
    background-color: #CC9;
    border-width: 1px 5px 5px 10px;
    border-color: green yellow red blue;
    border-style: solid;
    }
</style>

Simple and easy right? :B

3 comments

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s