Setting background image without stretch the image using CSS

Question

I'm trying to set the background image using CSS but the original image is stretched. How do I keep the original image size and set the background for the entire page at the same time?

 body {
  margin: 0;
  background-image: url(background.png);
  background-size: cover;
  background-repeat:   no-repeat;
  background-position: center center;
}

The original image is: Original Image

And the result is: Resultent Image

The difference is the background in my web is larger than the original.

Any help would be appreciated !!!

score 2 · Answer 1 · answered Dec 28 '15 at 09:59

2

All you have to do is to remove background-size: cover,
then all should be fine.

answered Dec 28 '15 at 09:59

Shikhar Srivastava · Answer 2 · 2015-12-28T10:18:06.217

1

Try to remove background-size:cover; & set width of image to your requirement. background-size:cover;stretches the image to full background.

or

Please change your image extension from .png to .jpeg or .jpg because .png always stretches your image and after that the css property u have defined earlier will work properly.

edited Dec 28 '15 at 10:18

answered Dec 28 '15 at 09:59

Shikhar Srivastava

151
4
15

score 1 · Answer 3 · answered Dec 28 '15 at 10:00

You have a lot of options regarding the background image and size. For your needs you can check this W3c and try the different options you can apply.

Remember that since you apply CSS to your Body, all your pages will "follow" those rules. But some of your pages might have different height from the others.

The result also, depends on the screen resolution of the client. You have to deside what is your desired result in all screen resolutions.

AVI · Answer 4 · 2015-12-28T10:25:59.413

What you can do is just remove, background-size:cover; Now let's see what does that mean,

background-size

Because background-size CSS property specifies the size of the background images. The size of the image can be fully constrained or only partially in order to preserve its intrinsic ratio.
cover

A keyword that is the inverse of contain(contain value specifies that regardless of the size of the containing box, the background image should be scaled so that each side is as large as possible while not exceeding the length of the corresponding side of the container). cover scales the image as large as possible and maintains image aspect ratio (image doesn't get squished). The image "covers" the entire width or height of the container. When the image and container have different dimensions, the image is clipped either left/right or top/bottom.

To get much identification just try JSFiddle

For the more reference on background-size:

score 0 · Answer 5 · answered Dec 28 '15 at 09:52

0

remove background-size: cover;

answered Dec 28 '15 at 09:52

Medda86

1,582
1
12
19

score 0 · Answer 6 · answered Dec 28 '15 at 10:17

Thanks.

I found the problem. the source image is open with a zoom of 35% therefore when I set the backgroud it stretch to 100%.

  body {
  margin: 0;
  background-image: url(background.png);
  background-size: 60% 60%;
  background-position: center center;
  }

score 0 · Answer 7 · answered Jan 26 '21 at 19:28

Try like this:

.your-class {
   background-image: url(background.png);
   /* Required Height */
   height: 800px; 

   /* Center and scale the image nicely */
   background-position: center  !important;
   background-repeat: no-repeat   !important;
   background-size: cover   !important;
}

Setting background image without stretch the image using CSS

7 Answers7

Linked