Я должен установить фоновые изображения (спрайт PNG) в течение 3 дел. Мне нужно, чтобы размеры png изменились с размером div, так как это жидкая компоновка.
Я искал решение для этого и могу найти решения только с использованием <img>
в html. Я ценю, что это был бы более простой способ справиться с ситуацией, но нужно использовать фоновые изображения. Мне нужно решение для фоновых изображений - не совет для использования <img>
пожалуйста!
Я понимаю, что css3 предлагает возможное решение с background-size, но это не помогает с IE7 и IE8 и другими не-css3 браузерами. Я очень рад использовать jquery, но не могу придумать, как я могу динамически изменить размер png, чтобы он соответствовал элементам div.
Я бы очень признателен за помощь, но, пожалуйста, поймите, что я не могу использовать <img>
.
Вот мой css:
a.bigButton {
height:30%;
width:30%;
display:block;
float:left;
}
a.bigButton#btn-menus:link {
background:url(images/btn-menus-large.png) top center no-repeat;
background-position: 0 0;
}
a.bigButton#btn-menus:hover {
background-position: -298px 0;
}
a.bigButton#btn-functions:link {
background:url(images/btn-functions-large.png) top center no-repeat;
background-position: 0 0;
}
a.bigButton#btn-functions:hover {
background-position: -298px 0;
}
a.bigButton#btn-packages:link {
background:url(images/btn-av-large.png) top center no-repeat;
background-position: 0 0;
}
a.bigButton#btn-packages:hover {
background-position: -298px 0;
}
Мой HTML:
<div id="quick-links-holder">
<a href="#" alt="Check out our menus" class="scroll bigButton btnResize" id="btn-menus"></a>
<a href="#" alt="What function will you hold at Events Centre?" class="scroll bigButton btnResize addMargin" id="btn-functions"></a>
<a href="#" alt="Check out our functions and packages" class="scroll bigButton btnResize addMargin" id="btn-packages" ></a>
</div>