CODEWITHSUNDEEP
jqueryhtmlcssbackground-image
circey
circey

Reputation: 2042

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>

Upvotes: 1

Views: 4832

Answers (2)

user1761123
user1761123

Reputation:

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

Upvotes: 0

Joseph Silber
Joseph Silber

Reputation: 220136

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

This is the exact reason CSS3 introduced background-size.

Upvotes: 6

Related Questions