ADVERTISEMENT
ADVERTISEMENT

Stretch and scale a CSS image in the background - with CSS only

Learn, how can we stretch and scale a CSS image in the background?
Submitted by Apurva Mathur, on June 03, 2022

CSS background-size Property:

CSS provide us the property of sizing the background image, which we can apply according our desire. This property has 7 different values.

1) initial

Example 1: Stretch and scale a CSS image

The original size of this image is 1280 * 786.

The initial value of the background-size property does the same whatever will be the image size, it will fix the image to that size.

Syntax:

background-size: initial;

2) contain

Example 2: Stretch and scale a CSS image

This value sets the image in such a way that nothing gets cropped and the quality of image is also not compromised.

Syntax:

background-size: contain;

3) inherit

Example 3: Stretch and scale a CSS image

This value will also resize the image in its original size.

Syntax:

background-size: inherit;

4) length

Example 4: Stretch and scale a CSS image

It will set the image according the specified height.

Syntax:

background-size: 500px 400px;

These values can be changed according to your preference.

5) cover

Example 5: Stretch and scale a CSS image

It will fix the image to the complete body. If the size of the image is small then in that case this value will stretch the image to cover the whole body because of which the quality of the image will go down. And if the size of the image is too big compared to the screen then it will reduce its size and it will fit the image in the body.

Syntax:

background-size: cover;

6) auto

Example 6: Stretch and scale a CSS image

This value will also display the image in its original size.

Syntax:

background-size: auto;

7) percentage

Example 7: Stretch and scale a CSS image

You can set the image as per you want. Here I have used 100% so that is why it is showing the full image. As it is setting up the image according to the size of the screen.

Syntax:

background-size: 100%;

Now let us see how we can stretch the image in the background?

As discussed above, we can do this task in two possible ways:

  • background-size:100%;
  • background-size: cover;

These two values will give the same result as they both stretch the image according to the screen.

Example:

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <style>
         body {
         background-image: url("https://images.hdqwalls.com/wallpapers/nature-background.jpg");
         background-size: 100% ;
         background-repeat: no-repeat;
         background-color: #b3d4fc;
         }
         p {
         padding: 20px;
         background: rgba(1, 1, 1, 0.2);
         color: white;
         font-size: 20px;
         font-family: "Bell MT";
         }
      </style>
   </head>
   <body>
      <center>
         <p>background-size:100% </p>
      </center>
   </body>
</html>

Output:

Example 8: Stretch and scale a CSS image

You'll get the same result when background-size: cover; is applied.

CSS Tutorial & Examples »


ADVERTISEMENT
ADVERTISEMENT


Comments and Discussions!



ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT

Languages: » C » C++ » C++ STL » Java » Data Structure » C#.Net » Android » Kotlin » SQL
Web Technologies: » PHP » Python » JavaScript » CSS » Ajax » Node.js » Web programming/HTML
Solved programs: » C » C++ » DS » Java » C#
Aptitude que. & ans.: » C » C++ » Java » DBMS
Interview que. & ans.: » C » Embedded C » Java » SEO » HR
CS Subjects: » CS Basics » O.S. » Networks » DBMS » Embedded Systems » Cloud Computing
» Machine learning » CS Organizations » Linux » DOS
More: » Articles » Puzzles » News/Updates

© https://www.includehelp.com some rights reserved.