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.
精彩评论