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;
Related
I have background-attachment: fixed; on my hero section and it works in firefox and safari but not in chrome. I can get it to work by changing to position:relative; and z-index: -1; but then the buttons within the hero become unusable and this also creates problems in firefox and safari.
#hero {
padding-top: 60px;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
I tried changing the parent positions to static based on other post I found but that didn't work either.
http://bayarddev.com/fca/about-us/
Ok I see it now. On .hero's parent element .off-canvas-wrap and .inner-wrap you are using -webkit-backface-visibility: hidden. If you turn this off the background attachment works fine.
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 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;
}
I changed the background of my discussion forum using the CSS below
http://forum.antinovaordemmundial.com
html {
background: url(http://antinovaordemmundial.com/mystuff/logo_blog.jpg) no-repeat center center fixed;
background-image: url(http://antinovaordemmundial.com/mystuff/logo_blog.jpg);
background-repeat-x: no-repeat;
background-repeat-y: no-repeat;
background-attachment: fixed;
background-position-x: 50%;
background-position-y: 50%;
background-origin: initial;
background-clip: initial;
background-color: initial;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
The image is 1600x711 and 88k. The scrolling of the pages are now very slow. Is the CSS problematic or the image should be smaller somehow?
Edit: I tried changing to:
body {
color: #000;
font-family: Verdana, Arial, Sans-Serif;
font-size: 13px;
text-align: center; /* IE 5 fix */
line-height: 1.4;
background-attachment: fixed;
background-clip: initial;
background-color: #51010E;
background-image: url(http://antinovaordemmundial.com/mystuff/logo_blog.jpg);
background-origin: initial;
background-position: initial initial;
background-repeat: initial initial;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
margin-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
}
But it is still very slow on scrolling.
I thought I would just contribute here. Rather than use background-attachment: fixed; use :before and position: fixed; problem sorted. I ran into this same problem.
Read more here: http://fourkitchens.com/blog/article/fix-scrolling-performance-css-will-change-property
I had the same problem and solved it using this jQuery plugin :
http://srobbin.com/jquery-plugins/jquery-backstretch/
It doesn't use any CSS3 property but it works fine and doesn't have any performance issue on Chrome 13 or Firefox 6.
The problem goes away for me when I remove the background-size property. I think it was the scaling of the large image that was causing the problem. If that doesn't work, just remove the background image altogether. However, I've never heard of a large background image causing lag before.
Also, applying the following style to the html tag improves the frame rate significantly in WebKit browsers, Chrome included:
-webkit-transform: translate3d(0,0,0);
This works in all cases with (large) background photos and choppy scrolling as far as I can tell.
The issue is actually with the background-attachment fixed value if you change it to background-attachment: scroll for mobile devices it should fix the lag.
make the background-size to 99.9% not 100% or cover in the case of the fixed attachment
background-size : 99.9%;
Compressing the image (reducing the size), solved my issue, I highly recommend using a tool like Radical Image Optimization Tool (RIOT), very effective and easy.
On linux, this can be done using GIMP , you can also remove image's metadata to reduce the size, use tool like exiftool.
Changing your image file type to SVG significantly improved the performance of my site when experiencing the same issue!
Remove background-repeat property if you have included and don't use 100% value for background-size..
background-size: 0 - 99.9%;