Category Archives: CSS

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


 * Author: Dineshkumar
 * Contact :
 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.



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.



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.


Hope you understand the concept behind this property.

Happy Coding….