Tuesday, 24 December 2013

Tuesday, December 24, 2013
CSSWe have covered a lot in the first four tutorials and now we are ready to move further and learn more about the different effects that can be applied in CSS. First up is background. And in this tutorial we are going to look into this aspect of CSS.

All the background effects of an elements can be defined using CSS background. There are some specific properties that are used in the background effects. They are as follows:
  • background-attachment
  • background-color
  • background-image
  • background-position
  • background-repeat

Background Color

The background color of an HTML element is specified by the backgroung-color property. This background-color property should be placed in the body selector, like this.

body {background-color:#0F83A0}
Now you might be wondering what's those numbers placed after backgroung-color property. In CSS a color can be specified in different ways.

What are those ways?
  • A color can be referred by its name - like 'blue'
  • It can be referred by an RGB value - like 'rgb(0,255,0)'
  • Or it can be written in the form of a HEX value - like '#ff0000'
We have a earlier created a tutorial to generate some wonderful CSS Colour Codes. You will be able to choose the colour and generate the respective HEX code as well get the colour from your very own HEX code.

Here is an example that will help you to understand everything clearly. We have written the CSS as well as the HTML for you see and understand.

Background Image

Now that we have looked into the background-color we will now look into the background-image property. This is used to set a background to the an element.
One thing to remember: The image is repeated by default so that it covers the entire element.

This the proper way to set a background image:
body {background-image:url('paper.gif');}

Remember to set a background-image that does not make the text difficult to read. You aim should be to provide a background image that allows the readers to properly view the text the that's present in the document.

Background Image - Repeat Horizontally or Vertically

The background-image property repeats an image both horizontally and vertically by default. You will notice that some images require that are only repeated vertically or horizontally, otherwise they will look strange.

We will now look into a few examples to understand the effects that we just mentioned.

Background Image - Set position and no-repeat

This property is used to show an image only once. Here is an example to see this effect.

This concludes this part of tutorial. For more exciting tutorials, how to guides, Free Tests and more you can subscribe to our RSS Feeds.

If you liked this tutorial then please share it with your friends. If there is any suggestion that you can provide us with then please mention them in comments.


Post a Comment