Hi. Since my layout does not fit 1024 x 768 (it was designed for 1284), I created another css that would fit 1024 resolution.

However, I need to replace images with smaller size. It was only index, a few images.

I cannot reduce the image size with css because it would cut half the side.


Can css assign images?
for example, pure html
<img class="hover" src="images/photography.jpg" alt="">

May css assign this jpg for this class???

Recommended Answers

All 2 Replies

Checker,

Can css assign images?

Yes, by using a background image. Something like this for example:

In your 1284 stylesheet:

.hover {
  width: 100px;
  height: 50px;
  background-image: url('images/photography_large.jpg');
  background-repeat: no-repeat;
  background-color: #999;
}
And in the 1024 stylesheet:
.hover {
  width: 50px;
  height: 25px;
  background-image: url('images/photography_small.jpg');
  background-repeat: no-repeat;
  background-color: #999;
}

You will also need to purge the <img> tag and apply the above directives to a suitable alternative. This may be a bit challenging depending on exactly how the image sits in the page. In the first instance try applying to the container from which you deleted the <img>.

Airshow

You can set the size of the image to as perce4ntage of the screen width with the width style.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.