Изменить размер фонового изображения div - PullRequest
1 голос
/ 22 августа 2011

Я должен установить фоновые изображения (спрайт 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>

Ответы [ 2 ]

6 голосов
/ 22 августа 2011

Поскольку вы не желаете использовать элемент img, это просто невозможно.

Это точная причина, по которой CSS3 введен background-size.

0 голосов
/ 20 декабря 2012

Невозможно использовать простой CSS, но вы можете изменить размер фонового изображения третьей стороной.

...