开发者

Resize div background image

I have to set background images (sprite pngs) within 3 divs. I need the pngs to resize with the div size as it's a fluid layout.

I've looked around for a solution to this and can only find solutions using <img> within the html. I appreciate this would be an easier way to deal with the situation but need to use background images. I need a solution for background images - not advice to use <img> please!

I realise that css3 offers a possible solution with background-size, but this does not help with IE7 & IE8 and other non-css3 browsers. I am very happy to use jquery, but can't think of how I might dynamically resize the pngs to fit the divs.

I'd really appreciate some assistance, but please understand that I'm unable to use <img>.

Here's my 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;
}

My 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>


Since you are unwilling to use an img element, this is simply not possible.

This is the exact reason CSS3 introduced background-size.


It is not possible using simple CSS but you can resize your background image by a third party.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜