如何调整图像大小并保留在悬停时更改图像的能力

Question

I have this issue.. I want to be able to use

.custom-forums {
    height: auto;
    width: 100%;
    border-image-source:transparent url("../images/forums.png") center top no-
    repeat;
}

with

.custom-forums:hover {
   background-image: url('../images/forums-hover.png');
}

The issue is this: When width is set to 100% it simply does not show the image. But when width and height are set to 170px it does work. I would like to have the button resize based on screen resolution and retain the ability to have the hover image change.

Much gratitude, Mas21

Answer 1

Background images require a predefined height or content of a certain height in its container in order to work.

I had a thought you could do this another way:

• Use a background image
• Put another image in that div and on hover set it to opacity 0, or your preference and the bg image shows

Run this example:

 .container { background: url('http://placehold.it/199x199') no-repeat center center; width: 200px; } img { transition: opacity ease-in-out .5s; } img:hover { opacity: .25; }

 <div class="container"> <img src="http://placehold.it/200x200"> </div>