Question

I do not display it as a thumbnail, but can CSS help compress the image of size 1000×1000 into an image of size 500×500?

My CSS for the image looks like this:

.images {
  background:url("image.png") no-repeat scroll; // this is a 1000x1000 sized image
}

How do I overwrite this? I do not want to have to generate another image of size 500×500.

Answer 1

You can use CSS3 background-size:

.images{
    background:url("image.png") no-repeat scroll;
    background-size:500px 500px;
}

But that will resize the image AFTER it has been dowloaded. And the best way is resizing the image with PHP (or similar) BEFORE the user downoads it.

If you can’t resize it server-side and you want it to be cross-browser, you could also use

HTML:

<div class="images">
    <img class="bg" src="image.png" alt="My image" />
    Content
</div>

CSS:

.images{
   position:relative;
}
.images>.bg{
   height:500px;
   width:500px;
   position:absolute;
   top:0;
   left:0;
   z-index:-1;
}

(You can set both height and width but only one of them is necessary).