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.
Related
For some reason, background images are not showing up at all in IE11 (Windows 7 Pro).
.home {
position:relative;
height: 620px;
background-image: url(/images/bg_home3.jpg);
background-position: 540px 190px;
background-repeat: no-repeat;
}
Any clues?
If you are trying to set background to HTML5 element there is a chance that it doesn't have some default style in IE11. For example if the element is main try to set display: block to it. You may also try to set width, but without seeing more of your code can't help you more. Look the example below.
.home {
display: block;
width: 100%;
position:relative;
height: 620px;
background-image: url("/images/bg_home3.jpg");
background-position: 540px 190px;
background-repeat: no-repeat;
}
necessary use width: 100px; <= you size px
.home {
position:relative;
height: 620px;
width: 200px;
background-image: url('/images/bg_home3.jpg');
background-position: 540px 190px;
background-repeat: no-repeat;
}
Use a png image as it seems IE 11 cannot display jpg with non web colors.
I think with two easy steps you can eliminate the problem:
Set display: block; The display property specifies the display behavior on your page. IE 8 and upper versions fully supports this property.
Put your url between quotation marks ("").
background-image: url("/images/something.jpg");
I found setting the background size of the image made it display in IE11.
I also had to set the width and height. Setting the value of these attributes to auto it didn't work.
A bit of a strange one. The background image (or even when I add a color) to the header on the website, that contains the menu items will not be displayed in IE8. It seems to work on Chrome and Firefox however in IE8 it does not display. The Url is http://www.esfdev.co.uk/emmanuel/ any help will be greatly appreciated.
CSS is below.
div#header {
background-image: url("./images/headerBg.png") !important;
background-position: center bottom;
background-repeat: repeat;
height: 93px;
position: fixed;
width: 100%;
z-index: 10 !important;
}
Thanks
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;
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;
}