I am using background-size on Chrome and found out it is CSS3 which is not supported in old versions of IE. Hence I have gone through some posts and someone recommended to use this filter:
progid:DXImageTransform.Microsoft.AlphaImageLoader
HTML:
<span class="num_blue_small small"><span class="numberText">4</span></span>
CSS:
.num_blue_small
{
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='/images/num_blue_small.png',
sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/num_blue_small.png', sizingMethod='scale')";
}
.small
{
display: inline-block;
height: 35px;
width: 35px;
text-align: center;
vertical-align: middle;
line-height: 35px;
}
.numberText
{
color: White;
}
By implementing the "filter", it works perfectly in IE7; however, it turns invisible in Google Chrome.
If I include background: url(/images/num_blue_ssc.png) no-repeat; in .num_blue_small CSS class, it will work fine in Chrome but IE 7 will show 2 same images with different sizes.
What should I do to get it fixed?
you could try the background-size polyfill
An IE behavior adding support for background-size to IE8. of Louis Remi
Progressive Enhancement is the mantra I live by. It means "Have fun
with CSS3 and don't worry about IE8 users; they'll never notice
they're missing out on your gorgeous text-shadows and gradients,
anyway".
All was well until I discovered the elegance of background-size:
cover; and background-size: contain;. The first one, for instance,
allows an image to completely cover a background, without having to
send a 1920x1080 background image down the pipes.
Unfortunately, they don't degrade gracefully: websites would likely
appear broken to IE8 users
They offer that feature:
correct position and size of the background image
updated position and size on browser resize
updated image, position and size when the background-image is modified
but seems they have some limitation:
multiple backgrounds (although the :after trick can still be used)
4 values syntax of background-position
any repeat value in background-repeat
non-default values of background-[clip/origin/attachment/scroll]
resizing the background when the dimensions of the element change
Related
I have a question regarding Safari Mobile and CSS object-position/object-fit property.
I've tried to use it, but it doesn't work for me.
I've seen 2 different answers(Safari Mobile supporting this property and doesn't support)
There is my example:
img {
object-position: 0 -300px;
width: 112px;
height: 50px;
display: block;
float: left;
margin-right: 10px;
}
I'm using CSS sprites for menu icons as img, not as background.
How I can solve this issue?
iOS safari does support object-fit however doesn't support object-position
See Can I use CSS3 object-fit/object-position ?
1 Partial support in Safari refers to support for object-fit but not object-position.
A possible solution is using background with background-position
Other solution, given you are using icons, would be using glyphs, from Font-Awesome or Glyphicons, just to name a few.
Here is a good article about CSS sprites
I'd like to create a div that is fixed in one position and make it translucent - making the contents behind it partially visible and blurred. The style I'm looking for is similar to the div of the 'See All' thumbnails in the Apple website.
The only thing I can do is adjust opacity: 0.9 but I cannot blur the contents that go under the div.
Note: The div has a fixed position and the background scrolls. The background that scolls is a mix of text and photos.
CSS
CSS 3 has a blur filter (only webkit at the moment Nov 2014):
-webkit-filter: blur(3px); /*chrome (android), safari (ios), opera*/
IE 4-9 supports a non-standard filter
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3')
See some nice demo for the blur and other filters here.
For future reference here is the compatibility table for CSS filter. Firefox seems to be getting the feature in v35+ while even IE11 does not seem to have any compatibility.
SVG
An alternative is using svg (safe for basically IE9 and up):
filter: url(blur.svg#blur);
SVG:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<filter id="blur">
<feGaussianBlur stdDeviation="3" />
</filter>
</svg>
jsFiddle Demo
Javascript
You will achieve the highest browser compatibility with javascript, but usually the slowest performance and added complexity to your js.
http://www.blurjs.com/ (jquery plugin, canvas solution so IE9+, FF, Chrome support)
http://nbartlomiej.github.io/foggy/ (jquery plugin IE8+, FF,Chrome support)
You can use CSS image filter.
-webkit-filter: blur(2px);
filter : blur(2px);
More info on CSS image filters:
http://techstream.org/Web-Design/CSS3-Image-Filters
http://html5-demos.appspot.com/static/css/filters/index.html
Demo: JSFIDDLE
But in fact, they are using pre processed JPG, and just using it as a overlay in the correct position.
#background {
position: absolute;
left: 10px;
top: 10px;
width: 600px;
height: 600px;
background-image: url(http://images.apple.com/home/images/osx_hero.jpg);
background-position: 0 0;
}
#blur {
position: absolute;
left: 50px;
top: 50px;
width: 120px;
height: 500px;
background-image: url(http://images.apple.com/home/images/osx_hero_blur.jpg);
background-position: -50px -50px;
}
<div id="background">
<div id="blur"></div>
</div>
Demo: JSFIDDLE
You made me want to try, so I did, check out the example here:
http://codepen.io/Edo_B/pen/cLbrt
Using:
HW Accelerated CSS filters
JS for class assigning and arrow key events
Images CSS Clip property
That's it.
I also believe this could be done dynamically for any screen if using canvas to copy the current dom and blurring it.
This should be coming browsers in the future as a CSS filter called backdrop-filter. There's virtually no support for it at all currently. For browser support see: http://caniuse.com/#feat=css-backdrop-filter
This CSS filter will do the frosted glass without any funny business, or hacks. It'll just do it.
Someone recorded a demo of it on Vine, and it looks really good. They were using Safari nightly to get access to the CSS filter. https://vine.co/v/OxmjlxdxKxl
Just put the same image (or parts of it) with opacity .9 a few pixels left/right/up/down - voilà
Some browsers support the new CSS property backdrop-filter. This property enables you to add a "frosted glass-like" effect on an element without using the pseudo classes.
Example:
element {
background: rgba(255, 255, 255, .5);
backdrop-filter: blur(10px);
}
https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter
First of all the OP states that the background scrolls. None of the available answers really allow scrolling. Based on how html is set up it is impossible. But with the use of famous/angular one can have multiple rendering engines to achieve this affect. I have it constructed here.
The idea behind it is two renderings of the site. One is the header version which is blurred. The other is the body. I used Famous/Angular and use templating to render the template in the head and body. The header needs an offset for the height of the header so that things match up. I will be having actual code posted soon here and on the site.
In my page layout I have two <div> tags. One, with id #image-panel and the other with #image-content-panel.
The two <div>s are stacked on top of each other using position: absolute. #image-content-panel (has higher z-index) is on top of #image-panel.
Both <div>s have background: transparent.
The page renders fine in Chrome, Safari, and Firefox i.e. I can see the image through the text (heading and paragraph etc.). But in IE (version 8) #image-content-panel is being redered with a white background.
You can see screenshots below:
Rendering in Crome, Safari, Mozilla
Rendering in IE 8
Relevant CSS and HTML code :
HTML Code
CSS Code
I'd like the page to render same in IE too.
Any help is appreciated.
Please propose an Alternative solution too if this can't be fixed.
UPDATE
The Jquery Cycle Plugin will add a background colour to elements in older versions of IE.
You need to set the cleartypeNoBg option to true in your Cycle initialisation.
$("#image-content-panel").cycle({
fx : 'scrollRight',
speed : 2700,
cleartypeNoBg: true
});
EDIT The below is not relevent
IE8 doesn't support rgba values and will fallback to a solid colour. If you don't define a fallback it will default to white which is what you are seeing.
There's a couple of ways to handle this.
1. Accept IE8's limitations.
#header {
z-index: 100 !important;
width: 100%;
height: 50px;
background: rgb(0,0,0);
background: rgba(0,0,0,0.6);
margin: 10px 0 0 0;
}
#header will have a solid black background in browsers that don;t support rgba. Semi opaque in browsers that do.
2.Use a filter
#header {
z-index: 100 !important;
width: 100%;
height: 50px;
background: rgba(0,0,0,0.6);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)"
margin: 10px 0 0 0;
}
#header will have 60% transparent black background in IE8 and proper browsers. Personally, I hate using filters. They make your markup hideous and are difficult to maintain unless you are excellent at converting rgb to hex codes in your head (which I'm not). Also, this particular filter is IE8+. It will not work in IE7, though there are other filters that will work in IE6-7. You should also probably separate this out in to an IE8 specific stylesheet or use some other method to prevent IE9 from using the filter as IE9 supports rgba.
3.Use a 1px x 1px black, semi-transparent .png
#header {
z-index: 100 !important;
width: 100%;
height: 50px;
background: url(background.png) repeat;
margin: 10px 0 0 0;
}
This is the route I usually go down simply because it's simple. It takes seconds to create a .png if you need to change the alpha and you don't need to worry about browser inconsistencies.
As others have said, IE8 doesn't support RGBA colour values.
There is a hack you can use to work around this though: I recommend trying out CSS3Pie on your site; it implements a number of modern CSS features into old versions of IE, including RGBA colours in backgrounds.
Hope that helps.
When I use SVG in background property like this:
.svg-button {
-webkit-transform: scale(3.0) // root of the problem!
background: url(Button.svg) no-repeat;
width: 32px;
height: 32px;
}
I get blurred image as result. At the same time text in tag with this style is clear. Also if I scale page by using CTRL++ (browser zoom) instead transform property everything is clear.
If I replace CSS background property on:
<object type="image/svg+xml" data="Button.svg" width="32" height="32"></object>
the image is clear in any scale in any case.
Where is the problem?
Sample on jsfiddle
Update:
I found some more information about this problem:
StackOverflow question
Bug ticket for Chrome (I tried my test under Safari/Chrome/IE9/10 and behaviour is the same.
I was "playing" with this a while back and noticed this for fonts too. Although it seems to be fixed now (for the fonts at least).
As far as I understand the inner workings, the contents of the scaled element are mapped to a texture, which in turn is scaled.
As a workaround, try using a 3d translation and move the element on the z-axis to achieve the size change. This won't yield as much control over the final outcome though.
.svg-button {
-webkit-transform: perspective(800px) translateZ(-300px);
background: url(Button.svg) no-repeat;
width: 32px;
height: 32px;
}
For Chrome/Safari IE9/10 I have decided to use CSS zoom property instead scale property.
.svg-button {
zoom: 300%;
background: url(Button.svg) no-repeat;
width: 32px;
height: 32px;
}
For Firefox I still use CSS scale property because Firefox doesn't support zoom property. At the same time Firefox scales SVG background well. See result.
For IE9 I have written javascript which temporary modifies CSS width property and after small delay returns it back. In this way I force redraw CSS background.
I have a legacy web application that is targeted for IE 6 and is being reskinned. The buttons are having the default browser button look replaced with a blue button image.
My following HTML and CSS works fine on IE 8, but not in IE 6.
HTML
<button id="add">Add</button>
CSS
button
{
width: 110px;
height: 28px;
background-image: url('../images/button.png');
background-color: transparent;
border: 0px none #ff0000;
cursor: hand;
font-family: Myriad Pro, Helvetica;
font-weight: bold;
font-size: 12px;
color: #ffffff;
}
Using CSS, how can I get the background image to show in IE 6?
Ideally the fix could be put in an ie6.css to make it easy to remove when IE6 support is eventually dropped.
Please no comments about dropping support for IE6. This legacy application is designed only for IE6 and used internally at an organisation where IE6 is the ONLY supported browser.
If the recesses of my memory on IE6 serve me well, it does not recognize background-image on a button element. Nothing you can do about it.
Although, again based on memory, if you can change it to an input (attribute type="image") you might be able to get the effect you want even on IE6.
Using the background CSS property instead of the background-image property does the trick as described in this blog post (excerpt below).
The background-image property that worked in Firefox 2.0 just did not
have any effect on IE6. After a bit of googling, I realized that the
background-image property will not work on IE and that we need to use
the background property.
This is what works for me:
button
{
background: transparent url('../images/button.png') no-repeat top;
}