CODEWITHSUNDEEP
htmlcssimagescaling
Dilworth
Dilworth

Reputation: 123

In html, width and hight parameters crop my picture instead of scaling it. Why?

I have a webpage with a css style file. When I try to scale the header2.png in the code below, the picture gets cropped instead.

Any idea Why? 

#header {
    background:url(images/bg.gif) repeat-x 0 0; 
    height: 70px;
    position: absolute;
} 
#logo a {
    background:url(images/header2.png) no-repeat 0 0; 
    width: 800px;
    height: 80px;
    position: absolute;
    top:0;
    left:10;
}

Upvotes: 0

Views: 510

Answers (2)

Matt Maclennan
Matt Maclennan

Reputation: 1304

You need to use the background-size CSS property in order to get the picture to scale. One option you can use is to get the image to cover the header proportionally, like this...

#logo a { 
     background:   url(images/header2.png) no-repeat 0 0;
     width: 800px; 
     height: 80px;  
     position: absolute; 
     top:0;
     left:10;
     background-size: cover;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
     }

Of course, you can experiment with this by changing "cover" to pixels or percentages. For more information on resizing the background in CSS... visit http://www.w3schools.com/cssref/css3_pr_background-size.asp

Upvotes: 2

Mike Phils
Mike Phils

Reputation: 3505

Why don't you re-size your header2.png image to the size at which you want.

Upvotes: 1

Related Questions