I am using the following CSS for Retina images and it works perfectly in FF, Chrome, Safari but not in IE.
Is there a fix for IE for using background-size - and if so, how could I implement it using my current code?
CSS:
.arrow-big-right {
display: block;
width: 42px;
height: 48px;
margin-bottom: 1.8em;
background-image: url(arrow-big-right.png);
background-repeat: no-repeat;
background-size: 42px 48px;
}
HTML
<div class="arrow-big-right"></div>
Can someone explain how I fix this for IE?
Many thanks for any help :-)
IE8 and below simply don't support background-size so you're either going to have to use the AlphaImageLoader Filter which has been supported since IE5.5:
.arrow-big-right {
display: block;
width: 42px;
height: 48px;
margin-bottom: 1.8em;
background-image: url(arrow-big-right.png);
background-repeat: no-repeat;
background-size: 42px 48px;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='arrow-big-right.png', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader( src='arrow-big-right.png', sizingMethod='scale')";
}
Or use some method of targeting IE versions via CSS to apply an alternative to your background for IE8 and below users.
It's also worth noting, as Matt McDonald points out, that you may see two images as a result of using this technique. This is caused by the IE filter adding a background image in addition to, instead of replacing, the standard background image. To resolve this, target IE via css using your preferred method (here's a method, my personal favourite) and remove the standard background-image for IE8 and below.
Using the first technique from Paul Irish's blog post to do this, you could use the following:
.arrow-big-right {
display: block;
width: 42px;
height: 48px;
margin-bottom: 1.8em;
background-image: url(arrow-big-right.png);
background-repeat: no-repeat;
background-size: 42px 48px;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='arrow-big-right.png', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader( src='arrow-big-right.png', sizingMethod='scale')";
}
.ie6 .arrow-big-right,
.ie7 .arrow-big-right,
.ie8 .arrow-big-right {
background-image: none;
}
Related
In my web application i'm using SVG icons, main reason is dat i'm using than for multi-tenant design. I've tried a lot of options but in Internet Explorer almost every version, it doesn't work. It shows op like a o filled block.
Working code : Chrome / Mozilla / Safari
HTML:
<div class="svg_icon" id="icon_business"></div>
CSS:
#icon_business {
-webkit-mask-image: url(/svg/business.svg);
}
.svg_icon {
width: 100%;
height: 80px;
text-align: center;
mask-size: contain;
mask-repeat: no-repeat;
-webkit-mask-position-x: center;
-webkit-mask-size: contain;
-webkit-mask-repeat: no-repeat;
background-color: #00E3A7;
}
Could someone help me? What's the best way to handle this? And is there a way it works with IE 8 +
You should use background image. Also SVGs are not supported in IE8 see here.
This should work for everything above IE8:
#icon_business {
background-image: url('https://mdn.mozillademos.org/files/12676/star.svg');
}
.svg_icon {
display: block;
width: 80px;
height: 80px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
text-align: center;
background-color: #00E3A7;
}
To target IE8 you could put this in to the top of you HTML file:
<!DOCTYPE html>
<!--[if IE 8 ]> <html lang="en" class="no-js ie8"> <![endif]-->
Then using the class ie8. Use fallback image (png/jpg/gif)
.ie8 #icon_business {
background-image: url('https://mdn.mozillademos.org/files/12676/star.png');
}
Or use some javascript.
I don't get why the background-clip property is not working in chrome and safari.
i try to put the prefix -webkit but it doesn't help.
The page is located here http://pierredebroux.be/charleroi/
the code is mainly:
<div id="laphoto" class="image2">
<div id="zz">
<h1>OBSERVER CHARLEROI</h1>
</div>
.image2 {
position: fixed;
width:100%;
height: 100%;
background: url(img/a.jpg) 50% 50%;
background-size: cover;
background-clip:text;
color:transparent;
opacity: 0;
filter:blur(2px)
}
h1 {
font-size: 190px;
line-height: 180px;
}
Thanks,
Pierre
I guess the minute error in your code is opacity:0;.
It will set the background invisible. try removing it. Also -webkit- prefix is required for background-clip:text;.
I have attached a code pen for reference.
I'm using a filter to the older IE on my sprite, so I used the filters.
The code below isn't working. I know I made a mistake I don't know wich one / where:-/
On Chrome it's ok, the properties is disabled but in IE, the background-size isn't working.
If I disable the "background-size" in Chrome, I see the same BAD screen as in
.icones {
background: transparent url('../contents/homepage/60/icones.png') no-repeat;
display: inline-block;
width: 50px;
height: 48px;
background-size: 60px;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../contents/homepage/60/icones.png',sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../contents/homepage/60/icones.png',sizingMethod='scale')";
}
#contact{
background-position: 0px -350px;
}
Thanks for your help :-)
background-size: 60px; wasn't applied on IE, so I deletes this line and I made a picture of 60px. This solved my question.
This question already has answers here:
How do I make background-size work in IE?
(8 answers)
Closed 9 years ago.
I'm using this class and this id (for instance) to add a picture on one div :
.icones {
background: transparent url('../contents/homepage/60/icones.png') no-repeat;
display: inline-block;
width: 50px;
height: 48px;
background-size: 60px;
}
#contact {
background-position: 0px -60px;
}
With Chrome, everything is ok, all looks great and all properties are shown in the element inspector, but in IE, there is a problem.
On inspecting the page with a developper tool on IE, I saw that "background-size" doesn't appear.
I know that it's that problem that gives me the trouble because when I hide it on chrome I have the same page than in IE.
So my question is: How can I force IE to apply this background-size?
THANKS!
EDIT :
So even with the filter, it doesn't seems to work:
.icones {
background: transparent url('../contents/homepage/60/icones.png') no-repeat;
display: inline-block;
width: 50px;
height: 48px;
background-size: 60px;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../contents/homepage/60/icones.png',sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../contents/homepage/60/icones.png',sizingMethod='scale')";
}
#contact {
background-position: 0px -60px;
}
Solution :
Edit the pictures size manually and forget the background-size. All is okay!
For IE you have to use a specific css filter:
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='images/image.png',
sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='images/image.png',
sizingMethod='scale')";
Or use jquery to achieve the effect, like it is explained in this link.
I am trying to make work background position in Firefox, but no success. In google chrome it works.
Here is my css that works in google, but Firefox doesnt accept background-position-y: 37px;
{
padding-top: 14px;
height: 50px;
background: url('image.png') repeat-x;
background-position-y: 37px;
text-align: center;
}
There is no such thing like cross-browser background-position-y. It simply doesn't work everywhere and therefore shouldn't be used. You have to set both parameters in background-position.
Please have a look at this thread: background-position and links I referred to in my answer
Firefox does not know a background-position-y property.
Try to use the regular background-position with two arguments:
background-position: 0% 37px;