All for Joomla All for Webmasters

Let's Play With Coding…

Background Image auto scaling using CSS

Hi guys today I am going to explain about a CSS property known as background-size. This helps in image auto scaling based on screen view. Usual case we use textures to fill background using repeat property. Some time we use single image as background. We can’t use very large time which will take more bandwidth and so we use optimized images. This should auto scale and fit background. To achieve this we can use background-size property of CSS. For an Example

 

/**
 * CodeZone.in
 * Author: Dineshkumar
 * Contact : hi@codezone.in
 */
 body {
    background-image:    url(images/background.jpg);
    background-size:     cover;                      /* <------ */
    background-repeat:   no-repeat;
    background-position: center center;              /* optional, center the image */
}

In above example we can give cover as value of background-size property or contain. To demonstrate how this two input value make effect in display let us consider below image as screen in which grey area are out of your visible screen.

rcjke

contain:

If we use this property then image will be fit inside visual area and which may have some blank space which can be filled with background-color property as show in below image.

matcl

Cover:

This makes sure that background is covered everything based on that image will be scaled. So it is like auto scale to cover your entire background. To make you understand please see below image.

p96p5

Hope you understand the concept behind this property.

Happy Coding….

Related posts

Rotate Text using CSS

While developing web pages we some time require to rotate text of images present...

Leave a Comment

Leave a Reply