Resizing background image in CSS

Question

I need to resize my background "Image.png" to be 112 x 22 pixels, but when I modify width and height, it crops the image to the size provided instead of resizing it.
How can I resize the image in CSS?

#Title-1 {
  width: 148px;
  height: 29px;
  margin-left: 10px;
  background-image: url("/pic/Image.png");
  display: inline-block;
  vertical-align: top;
}

since you are using the image as a **CSS background**, not as an inline image (``), take a look at [this reference answer](http://stackoverflow.com/questions/376253/stretch-and-scale-css-background) and the CSS property `background-size`. — Leon Adler, Jan 20 '16 at 18:54
Possible duplicate of [Resize image proportionally with CSS?](http://stackoverflow.com/questions/787839/resize-image-proportionally-with-css) — Roy Falk, Jan 20 '16 at 19:08

score 0 · Answer 1 · answered Jan 20 '16 at 18:55

0

Have you tried the background-size option?

background-size: 112px 22px;

answered Jan 20 '16 at 18:55

Stefan Neuenschwander

823
1
6
23

score 0 · Accepted Answer · answered Jan 20 '16 at 19:00

0

It is because when you modify the width and height values, you are actually changing those values for the container.

You'll want to add this to your CSS:

#Title-1 {
    background-size: 112px 22px;
    background-repeat: no-repeat;
}

answered Jan 20 '16 at 19:00

Rohit Kapur

53
8

score 0 · Answer 3 · answered Jan 20 '16 at 19:05

0

I get it now,

And I solved it by using:

background-size:cover

Thank you all.

answered Jan 20 '16 at 19:05

Mostafa elmallah

3
1

Resizing background image in CSS

3 Answers3