By referring to this website：http://css3pie.com/documentation/supported-css3-features/，
"background-size (will always use the image's intrinsic size) — this is supported as of PIE 2.0 beta"
Based on the documentation, background-size is now supported in PIE 2.0 beta, however, I'm unclear on how to make it works on IE8.
Before making changes:
.navbar-inverse {
background:url('header_images/menu_bg.png');
background-size: 100% 50px;
}
The codes work fine for IE9 and IE10; but I want it works on IE8 too, so I added two lines:
.navbar-inverse {
background:url('header_images/menu_bg.png');
background-size: 100% 50px;
-pie-background: url('header7/header_images/menu_bg.png') no-repeat 100% 100% / 100% 50px;
behavior: url(header7/pie/PIE.php);
}
The background-size is still not functioning. It there anything wrong with my codes?
I ran into a similar issue with CSS3PIE.
I found my fix here
.pie_bg{
background: url("../images/background.jpg") left top no-repeat;
background-size: 100% auto;
-pie-background: url("../images/background.jpg") left top / 100% auto no-repeat;
}
/* NB Image path must be relative to the html doc, not the css file. Alternatively, it can be an absolute path e.g. url("http://mywebsite.com/images/background.jpg")*/
IE8 does not support background-size property.
try out this polyfill from github.
Using this should allow you to use background-size property in IE8 without any issues.
Related
I know background-size isn't supported for IE7 and IE8. I also know there is a solution of using AlphaImageLoader as below:
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='image.gif', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='image.gif', sizingMethod='scale')";
But unfortunately its not working. Any suggestions?
Here is my code in CSS:
.useBGImage {
background-image: url('../img/BGImage.gif');
background-size: 400px 50px;
background-repeat: no-repeat;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='../img/BGImage.gif', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='../img/BGImage.gif', sizingMethod='scale')";
}
The original size of the image is 400px * 70px.
My suggestion would be to use one of the available polyfill libraries to solve this.
There are two that I can think of which would fit the bill:
CSS3Pie
https://github.com/louisremi/background-size-polyfill
Of these, CSS3Pie covers a load more functionality than just background-size, so would be good if you're also doing similar filter styles for gradients, etc. The other one is a one-trick polyfill just for this specific feature.
Both are known to work well, so pick whichever you prefer, and throw away those ugly filter styles.
According to microsoft's own documentation sizingMethod='scale'
Scale
Stretches or shrinks the image to fill the borders of the object.
As you can see scale is a poor choice of words to use since it doesn't really "scale" it merely stretches and/or shrinks the image to fit the boundaries of its container.
To effectively scale an image proportionately it is recommended that you remove the height and width of the image in the HTML markup.
Then use this as your CSS...
.useBGImage {
background-image: url('../img/BGImage.gif');
background-repeat: no-repeat;
width: auto; /* required for IE8 */
max-width: 100%;
height: auto;
}
I have the very simple task of applying a background image to a DIV. I can view the image with every other browser except Safari. Can someone take a look at my CSS and site and tell me what I'm doing wrong.
CSS:
#intro2services {
background:linear-gradient(rgba(0,0,0,1),rgba(0,0,0,0)), url(../img/colorpencils.jpg) fixed;
background-position: 100% 100%;
background-size: cover;
background-repeat: no-repeat;
}
Site:
www.designedbysheldon.com
I played around with your site for a few minutes, and I suggest breaking up your styles for the background rather than condensing some while having others declared on their own. Change your CSS to:
#intro2services {
background-position: 100% 100%;
background-size: cover;
background-repeat: no-repeat;
background-image: -moz-linear-gradient(rgba(0,0,0,1),rgba(0,0,0,0)),url('../img/colorpencils.jpg'); /* Firefox-specific background styles */
background-image: linear-gradient(rgba(0,0,0,1),rgba(0,0,0,0)), url('../img/colorpencils.jpg');
background-attachment: fixed;
}
That removed the repeat, applied the gradient, and applied the cover sizing correctly. This is tested and working in Chrome and Safari. Firefox only works when the -moz vendor prefix is added. You can add the other vendor prefixes to be safe, but gradients are implemented in the other major browsers at this point.
This is a know issue with Safari. Most of the time, adding a negative z-index to your style, will solve the issue.
z-index:-1:
Apparently Safari--or at least some versions of it--refuses to apply CSS to form fields, so if you have a clever little search box like I do, Safari won't render any CSS applied to it. I thought it was specific to my use of SVGs and then I thought it had something to do with the short code. I was stuck until I found an obscure post on GitHub from a MarcHaunschild from 2011 discussing this behavior. Anyway in the case that you're trying to style a field such as a search box, here's the fix.
Add the following to your CSS:
input[type="search"] {
-webkit-appearance: textfield;
}
.up { background-image: url('/design-library/profound_test/images/cab_images/white-arrow-up.png') 50% 50% no-repeat; }
This code is giving me an 'invalid property value' in crome (and safari). I'm using the exact same code on another page, working correctly. I cleared my browser cache. If I remove 50% 50% no-repeat it works fine. Adding either of those 2 properties spikes it again to invalid (testing using developer tools).
I ran it through ProCSSor as well to clean it up, so I'm not sure where I'm screwing it up...
Yep because the background-image property is for the image part only, not the position or repeat properties of the background, use background:
.up {
background: url('/design-library/profound_test/images/cab_images/white-arrow-up.png') 50% 50% no-repeat;
}
Chrome* will also throw this warning (and doesn't display the bg image), if you have a blank space between url and ( like:
background-image: url ('img/web-bg.png');
^
(Which was the reason for me to search and find this question but no answer and then doing trial and error.)
... maybe depending on the Chrome version, I assume.
Even if you do everything described above, you may get an "invalid property value" in Firefox. The workaround is to convert:
background: url(../img/showcase.jpg) no-repeat top center fixed/cover;
into:
background: url(../img/showcase.jpg) no-repeat top center;
background-attachment: fixed;
background-size: cover cover;
This error also occurs in Chrome when you don't use apostrophes and your file has spaces. Simply change:
background-image: url(../img/file with spaces.png);
to:
background-image: url('../img/file with spaces.png');
Just delete ../ and use it as
background: url(img/showcase.jpg) no-repeat top center;
Ok so I have set a background-position property on an element through a class declaration. And for some reason chrome, and I'm assuming all webkit browsers, ignore the background-position property.
I have like so
.buttonholder {
background-position: -175px 0px;
}
and
<span class='buttonholder'>
<a href='index.php'>Home</a>
</span>
I took out the firebug type tool in chrome and for some reason the tag comes up like so:
<span class='buttonholder' style='background-position: 0% 0%; '>
Even though there is no specific style declaration inside the elements tag. Any advice would be greatly appreciated
Edit: Apparently people think I am trying to use this as a way to position the element. Which is false. I'm trying to position a background image.
Add this:
background-position-x: -175px;
background-position-y: 0px;
Also see:
http://code.google.com/p/chromium/issues/detail?id=57963
In chrome, to solve this bug, you need to use percent in background position.
When change position will works fine.
Hope its help
Incidentally, I had a similar issue to this, where I use JavaScript to dynamically reposition an element using the jquery('[element]').css('background-position') property and it wasn't showing up in Chrome.
I found that I had also had the element declared in the CSS in an external stylesheet:
[element] {
background: #becfd3 url([background image]) no-repeat 140px 60px;
}
I ended up removing the 140px 60px part of the element in the stylesheet and it worked for me. Maybe it'll work for you?
If you wanna positionate something check for position: absolute | relative | fixed | static, and add top, and left according to w3c standard. I have no idea of background-position, but I'm pretty sure that what you do with this property can also be handle with my opinion.
The background-position property is used to position background images only, not the elements themselves. If you'd like to learn CSS positioning in ten steps, see http://www.barelyfitz.com/screencast/html-training/css/positioning/
Reference for background-position: https://developer.mozilla.org/en/CSS/background-position (info applies to Mozilla and Webkit)
I was playing around with this and found chrome and other webkit browsers to render background positions without any issues. I used a single background declaration like this:
background: url(http://www.example.com/image.png) -175px 0;
Perhaps you could declare the style in the same way and see if that works.
This one almost works for me. It positions the element to the right side, but it doesn´t take the .3rem into consideration in Chrome browser.
The background-position-y works in Chrome as well.
#email.active {
background-image: url(./images/icon-error.svg);
background-repeat: no-repeat;
background-position-x: right, .3rem !important;
background-position-y: center;
}
In Safari it has worked in the following way for me, I didn´t have any issues with the positioning in Safari.
#email.active {
background-image: url(./images/icon-error.svg);
background-repeat: no-repeat;
background-position-x: right .3rem !important;
background-position-y: center;
}
I've decided to crate a sprite sheet for my entire site (+-30 images) so I can load 1 image and just reference positions, which reduces image load time and server calls.
My question:
Is it possible to reference an image in the sprite sheet and then size that image to 100% of its parent container?
So For example:
#SomeDiv
{
background: url("/Content/Images/SpriteSheet.png") -125px 0 no-repeat;
width:100px;
}
The width of my div is 100px, but the sprite I want to reference is 20px(for example) - how can I streth the extracted sprite to grow to 100px?
Regards,
Byron Cobb.
Well, if you really want an answer, sure, why not. See: http://jsfiddle.net/3dsgn/3/
Basically we're working with CSS3 here, so IE support (except 9) is non-existent. You'll also have to use the version with the -moz- extension for Firefox 3.6 and below. The technique itself is also somewhat troublesome. You actually have to go and calculate the numbers yourself - percentages won't work, naturally.
#sprite-large {
/* All of these numbers are 2x their normal,
though tweaked slightly so that they will look okay */
width: 36px;
height: 36px;
background: url('url/to/your/image.png') -38px -112px;
-moz-background-size: 448px 368px;
background-size: 448px 368px;
}