CSS CSS 3 Tutorials Uncategorized

CSS3 background property with various usages.

Written by Saiful Islam

css3 background :

It is very important part of a web page. CSS3 introduces a new way for a background. Web designers can’t imagine the multi background feature previously but now they easily use multiple backgrounds by using CSS3.Before that they use some block elements and gave them background individually.

Example:

There was also a way to make a multiple background with the help of graphics software. You can also give a shadow or box shadow that enhances the beauty of the background.

New css3 background property:

  • background-size
  • background-origin
  • background-clip

The background-size property:

The background-property can stretch a background image. It was not possible in CSS2. You also can re-use the image in different context. It receives two values in percentages or pixels unit. 100% means a full stretch of the image. You should aware about percentages unit because it relies on its parent element’s width and height to stretch.

Example:

Output:

css-3-background-image

The background-origin property:

The background-origin property works for the position of background. You can specify it in every part of the box model.

Example:

 Output

In this example the background origin is for the div content box area but you can also use for padding box area, border box area.

css-3-background-image-2

The background-clip property:

The background-clip property clips the background in content-box, padding-box or border-box.

Example:

 

 Output

Multiple backgrounds:

You can use multiple images or colors as a background of web pages. CSS3 has a support for this. You need a comma separated background declaration for multiple backgrounds.

Example:

 

Output

Gradient background:

Previous day, web designers used various graphics software for gradient background. They made a gradient image then used that as a background. But now designers can use a gradient image without the help of graphics software. There are many gradients but linear gradient is the only supported in CSS3.

The internet explorer has a problem with gradient. For fixing this problem you should use filter strategy. IE9 does not support gradient and you can remove this by using SVG.

 

Example:

About the author

Saiful Islam

Leave a Comment