CODEWITHSUNDEEP
javascripthtmlcssimageinternet-explorer
dush
dush

Reputation: 209

how to show background image with a button on it

I am facing an issue with background-size property in IE. So, to compensate this, i tried using below code

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='XYZ.jpg',sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='XYZ.jpg',sizingMethod='scale')";

This is working fine, but the problem is, it taking few seconds to load the background image.

My requirement is to show one button with a background image(My image will have some text and other stuff). I also tried to paint an image with input tag and a button on screen, but not able to figure out on how to bring the button on the image(presently they are coming one after the other). Please suggest me a solution.

I am using IE 8

Upvotes: 0

Views: 252

Answers (1)

Radek Pech
Radek Pech

Reputation: 3098

Not sure what the real problem is (try to add more code?) but if the problem is that button is displayed before the image is loaded, then you can cache the image and when it's loaded then display both image and button.

new img = document.createElement('img');
img.onload = function() { /* ... display image and button */ }
img.src = 'http://path/to/your/image';

Or if the problem is positioning, use this:

<div style="position:relative; width:10em; height:1em">
    <img src="..." style="position:absolute; left:0; top:0; width:100%; height:100%; display:block;">
    <button onclick="..." style="position:absolute; left:0; top:0; width:100%; height:100%; display:block;">
</div>

Edit: As mentioned in comment:

<div style="position:relative; width:1024px; height:768px; background:url('...');">
    <button onclick="..." style="position:absolute; left:480px; top:376px; width:64px; height:16px;">
</div>

Upvotes: 1

Related Questions