CSS Image Resize

#layout-container{
  background: url(preview_mario.jpg) no-repeat;
  width: 998px;
  height: 998px;
}

Code (markup):

I need to have the background displayed as a 998x998 image but it is a 1280x1280 image. When I use the width/height as 998 it just cuts off part of the image. Can someone help me so it will resize with whatever width/height I set it to?

 

Try using this syntax:

.resize {
width: 998px;
height : auto;
}

.resize {
width: auto;
height : 998px;
}

 

Thanks but still cuts it off

 

That's the way background images work. If you want to resize, it must be a foreground image. Why don't you simply re-size the image in your image manipulation application? I'd simply use the convert utility from the Imagemagick suite:

gt@koko:~/public_html$ convert preview_mario.jpg -resize 998x998 preview_mario-998.jpg

Code (markup):

You may prefer to use Photoshop or GIMP, but for something this trivial, a cli app is simplest.

cheers,

gary

 

Thanks I think I'll do that

 

Just mask a DIV above the image and cut the extra area.