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
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>
Related
I am now creating a website quite similar to this demo website which displays some image on a page and some effects will be shown when hovering on a particular image.
https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_templates_portfolio2&stacked=h
In this demo website, when we hover on the image, the opacity of the image will be changed from 0.5 to 1. However, in my website, all the images on the page will be covered by a black layer with opacity is 0.5. When hover mouse on a particular image, the black layer on that image will be disappeared. How can I create this kind of effect? Thank you very much!
In my code, I have something like this:
<div class="img-container">
<div style="float:left; background-image:url('img/a.jpg'); width: 100px;height: 100px;"></div>
<div style="float:left; background-image:url('img/b.jpg'); width: 100px;height: 100px;"></div>
</div>
I would like to add a black layer with 0.5 opacity on the images? How can I do that?
<style>
.image{
background-image:url(https://www.w3schools.com/w3images/natureboy.jpg);
background-size:cover;
width:200px;
height:200px;
cursor:pointer;
}
.blackLayer{
width:100%;
height:100%;
background-color:#000;
opacity:0.5;
}
.blackLayer:hover{
opacity:0;
}
</style>
<div class="image">
<div class="blackLayer"></div>
</div>
I need to fetch some images with their coordinates using PHP and then show them inside a div / canvas positioned by their coordinates.
How can I do this?
Like that?
.image{
width:200px;
height:200px;
position: relative;
overflow:hidden;
}
.image img{
position:absolute;
}
<div class="image">
<img src="https://upload.wikimedia.org/wikipedia/commons/6/67/Wading_moose.jpg" alt="" style="left:-50px;top:-50px;"/>
</div>
I have a Web Page with my index.html with something like this:
<img class="thumb" onclick="openPhoto(1);" src="img/images/campaign/1.jpg" width="710" height="533" alt="img"/>
What I need to do is to align an image at the bottom center of the screen, because when I open them, they actually appear in the top center of the screen.
just use css
.thumb
{
position:absolute;
bottom:0;
margin:auto;
width://your width accordingly;
}
I have a jquery cycle slideshow that slides through 3 big photos and is behind the rest of the content. Works fine but the problem is that if I resize the window to less than the width (1400) or height (900) of the photos the scrollbar appears. How to make the scroll disappear or how to make the images "act" like background-images... Sorry about the confusion, hope you can understand me.
HTML:
<div class="slideshow">
<img src="images/temp-bg.jpg" width="1400" height="900" />
<img src="images/temp-bg2.jpg" width="1400" height="900" />
<img src="images/temp-bg3.jpg" width="1400" height="900" />
</div>
CSS:
.slideshow {
position:absolute;
top:0;
left:0;
z-index:-999;
}
Thank you,
Cris
You should be able to set the height and width to 100% and set overflow:hidden
I have an href image in this markup.
<div class="imgdiv">
<a class="imga" href="http://destination.com">
<img src="http://image.com/image.jpg" width="100" height="100">
</a>
</div>
When I hover over it, I want to show another image in the top right corner. Is this doable with css? or do I need javascript for that?
My CSS looks like this but it still doesn't work
a.imga:hover {
background-image: url('over.png');
background-position: top;
z-index:3;
}
**Here is the solution you can try**
<div class="imgdiv">
<a class="imga" href="http://destination.com">
<img src="URL OF THE FIRST IMAGE GOES HERE" onmouseover="this.src='URL OF THE SECOND IMAGE GOES HERE'" onmouseout="this.src='URL OF THE FIRST IMAGE GOES HERE'" width="100" height="100">
</a>
</div>
Use can do it with CSS, but insted of img tag use a DIV with a background image
<div id="image"></div>
CSS style
#image{
width: 100px; //Image height
height: 100px; //Image width
background: url('') 0 0 no-repeat; //Give your image path here
}
#image:hover{
background: url('') 0 0 no-repeat;
}
Try CSS Sprites, check out this screen-cast from css-tricks.com on how to use them.
You can use :hover pseduo selector on the div with class imgdiv with background-position set appropriately to show on the top right corner. Off course, you should apply background-image to the div first.
Note that :hover does not work in IE6 for anything other than links. However, you can overcome this limitation by using javascript/jquery.