How to CSS Background Image Stretched or Clipped

You can control the size of background image for any HTML element using a property background-size. This property allows the background image used to be scaled. Using this property you can stretched or clipped background images horizontally, vertically or on both direction. Values for this property should be in CSS valid length or in percentage where length or percentage values may have a single or double value. Here are the syntax and examples for  the uses of background-size property.

Syntax:

background-size: length | percentage [length | percentage]

Example:

-webkit-background-size:100px 100px;
-moz-background-size:100px 100px;
-o-background-size:100px 100px;
background-size:100px 100px;

How to CSS Background Image Clipped

You can adjust the size of background image to make smaller than original image. With adjusting the size of background image smaller, it can be clipped on any side of elements background.

There is a property “background-position” to adjust the position of background image. The property background-position defines the x and y coordinates of the background position.

Syntax:

Example:

Here is an example to show background image with size 150px on both side aligning 50px right from left border and 50px down from top border.

CSS code:

.div{width:100%;height:200px;border:solid 2px brown;}
#div1{
-webkit-background-size:150px 150px;
-moz-background-size:150px 150px;
-o-background-size:150px 150px;
background-size:150px 150px;
background-position:50px;
background-repeat:no-repeat;background-image:url(img1.jpg);
}

HTML Code:

    <div class=”div” id=”div1″></div>

Preview:

.div{width:100%;height:200px;border:solid 2px brown;}
#div1{
-webkit-background-size:150px 150px;
-moz-background-size:150px 150px;
-o-background-size:150px 150px;
background-size:150px 150px;
background-position:50px;
background-repeat:no-repeat;background-image:url(https://4.bp.blogspot.com/-dNgc-Kv8Wmw/UdhW7hddvII/AAAAAAAAAL8/rLduN41JUR4/s1600/image_1.gif);
}

Here is an example to show background image with size 150px on both side aligning 50px right from left border and 50px down from top border.

Syntax:

background-position-y: length | percentage | top | center | bottom

Example:

Here is another example to show background image with size 150px on right bottom position.

CSS Code:

.div{width:100%;height:200px;border:solid 2px brown;}
#div2{
-webkit-background-size:150px 150px;
-moz-background-size:150px 150px;
-o-background-size:150px 150px;
background-size:150px 150px;
background-position:right bottom;
background-repeat:no-repeat;
background-repeat:no-repeat;background-image:url(img2.jpg);
}

HTML Code:

    <div class=”div”id=”div2″></div>

Preview:

.div{width:100%;height:200px;border:solid 2px brown;}
#div2{
-webkit-background-size:150px 150px;
-moz-background-size:150px 150px;
-o-background-size:150px 150px;
background-size:150px 150px;
background-position:right bottom;
background-repeat:no-repeat;
background-repeat:no-repeat;background-image:url(https://4.bp.blogspot.com/-dNgc-Kv8Wmw/UdhW7hddvII/AAAAAAAAAL8/rLduN41JUR4/s1600/image_1.gif);
}

How to CSS Background Image Stretched

You can also adjust the size of background image to make larger than original image. With adjusting the size of background image larger, it can be stretched on any or both sides on elements background.

Example:

You can stretch background image to fill all the background of an HTML element with using background size 100% as given on the example below.

CSS Code:

.div{width:100%;height:250px;border:solid 2px brown;}
#div3{
-webkit-background-size:100% 100%;
-moz-background-size:100% 100%;
-o-background-size:100% 100%;
background-size:100% 100%;
background-image:url(img3.jpg);
}

HTML Code:

    <div class=”div”id=”div3″></div>

Preview:

.div{width:100%;height:250px;border:solid 2px brown;}
#div3{
-webkit-background-size:100% 100%;
-moz-background-size:100% 100%;
-o-background-size:100% 100%;
background-size:100% 100%;
background-image:url(https://4.bp.blogspot.com/-dNgc-Kv8Wmw/UdhW7hddvII/AAAAAAAAAL8/rLduN41JUR4/s1600/image_1.gif);
}

You can also stretch background image to fill all the background of an HTML element with setting background size equal to the elements size as given on the example below.

CSS code:

.div{width:100%;height:250px;border:solid 2px brown;}
#div4{
-webkit-background-size:100% 250px;
-moz-background-size:100% 250px;
-o-background-size:100% 250px;
background-size:100% 250px;
background-image:url(img4.jpg);

HTML Code:

 <div class=”div” id=”div4″></div>

Preview:

.div{width:100%;height:250px;border:solid 2px brown;}
#div4{
-webkit-background-size:100% 250px;
-moz-background-size:100% 250px;
-o-background-size:100% 250px;
background-size:100% 250px;
background-image:url(https://4.bp.blogspot.com/-dNgc-Kv8Wmw/UdhW7hddvII/AAAAAAAAAL8/rLduN41JUR4/s1600/image_1.gif);}

Background size can also be stretched differently on each side to fill background image horizontally or vertically with setting background size differently to the elements size as given on the example below.

CSS Code:

.div{width:100%;height:250px;border:solid 2px brown;}
#div5{
-webkit-background-size:50% 250px;
-moz-background-size:50% 250px;
-o-background-size:50% 250px;
background-size:50% 250px;
background-repeat:no-repeat;
background-image:url(img5.jpg);

HTML Code:

<div class=”div” id=”div5″></div>

Preview:

.div{width:100%;height:250px;border:solid 2px brown;}
#div5{
-webkit-background-size:50% 250px;
-moz-background-size:50% 250px;
-o-background-size:50% 250px;
background-size:50% 250px;
background-repeat:no-repeat;
background-image:url(https://4.bp.blogspot.com/-dNgc-Kv8Wmw/UdhW7hddvII/AAAAAAAAAL8/rLduN41JUR4/s1600/image_1.gif);

Read Next:How to Zoom Image on Mouse over Using CSS