CODEWITHSUNDEEP
cssimagedimensions
Cyclone
Cyclone

Reputation: 15269

Background image width

This is my HTML:

<div id="user-avatar"><img src="/imgs/frame.png" alt=""/></div>

user-avatar class is following:

#user-avatar {
     width: 100px;
     height: 100px;
     margin: auto;
     position: relative;
     background: url(images/avatars/128.jpg) 50% 50% no-repeat;
}

Frame:

#user-avatar img { 
     position: absolute; 
     top: 50%; 
     left: 50%; 
     width: 122px; 
     height: 127px; 
     margin-top: -62px; 
     margin-left: -63px; 
}

Original user-avatar background image dimensions are 23x25 but I want it to be resized to the 100x100px, and the problem is that whatever I set in the width: xxx attribute it'll not work. The avatar that is behind the frame has everytime his original dimensions.

Upvotes: 4

Views: 11280

Answers (3)

Leandro Galluppi
Leandro Galluppi

Reputation: 915

You can't resize an image set as background of a container. The only way you can resize a image is using a img tag and resizing it with width and height css attributes.

Take a look here may be it helps.

Upvotes: 5

dgvid
dgvid

Reputation: 26633

You can use the CSS3 background-size property, for those browsers that support it, then fall back to a compromise solution for older browsers. The compromise solution could be to set a background color to fill up the space around the background image or to use the background-repeat property to "tile" the image.

For example:

#user_avatar {
    ...
    background: url(images/avatars/128.jpg) blue 50% 50% no-repeat;
    background-size: 100px 100px;
}

Upvotes: 3

RoToRa
RoToRa

Reputation: 38400

You could use background-size, however only the most current browsers support it: https://developer.mozilla.org/en/CSS/background-size

Upvotes: 3

Related Questions