Scale background image to fit ie8 window - javascript

I'm using a drupal 7 module to load in a background image but IE8 doesn't support css3 resizing.
background-image: url('image.jpg');
background-size: cover;
I can't easily load in the image using the usual methods such as putting it in a DIV or using the ms-filter alphaimageloader to load it.
A javascript solution is fine if this can't be done with just CSS that ie8 supports. (Something that also works for ie7 would be fantastic too, but ie8 is the priority).

Add Full Size Background Image to Internet Explorer 8, and IE7
Since you can't easily place the background in your site using the usual methods, can you place an image within your code? If so, this solution might work. I used it to simulate a full-screen background for IE8 and IE7, and it works well.
Place the image right after the body tag in the html code. (You can probably place it elsewhere depending on your site structure, but you may have to add a z-index.) Next, the background in this example is wrapped in an IE Conditional Comment so only IE8 and below will see it. (Note: It's buggy in IE6, but you might be able to get it to work? If not, just adjust the Conditional Comment to include IE7 and IE8 only).
HTML Code
<!DOCTYPE html>
<head></head>
<body>
<!--[if lte IE 8]><img src="../path-to-your-image/your-photo.jpg" class="ie87-bg"><![endif]-->
CSS
.ie87-bg {
display:block;
position:fixed;
top:0;
left:0;
min-height:100%;
min-width:1024px;
width:100%;
height:auto;
margin:0;
padding:0;
}
You probably already know this, but here are 3 ways to target older versions of IE:
JavaScript browser feature detection - mattstow.com/layout-engine.html
Css Hacks - BrowserHacks.com
IE Condtional Comments http://msdn.microsoft.com/en-us/library/ms537512%28VS.85%29.aspx
Helpful Tips: background-image:none; overwrites background-size: cover. The _ hack is one way to turn off the custom IE background in IE6 .ie87-bg {_display: none;}.
position:fixed; is buggy in mobile/touch screens. The default position:scroll; works well on touch. The background idea is from this tutorial - http://css-tricks.com/perfect-full-page-background-image/

This works for me to stretch image on full window in IE8
http://css-tricks.com/perfect-full-page-background-image/

Related

how to show images with it's original smoothness in IE

i just disappoint with IE. how ever for image quality and better image view. Is there some thing css tricks for especially with IE that can show better Image appearance.
here is Image appearance of my screen in chrome :
here is Image appearance of my screen in IE :
i just want to know is that IE problem or there is my image problem or there is any way to fix this issue with css tricks.
please help me...
this is known IE issue you may try with
img.imageclassname {
background: transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE8 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF); /* IE6 & 7 */
}
possible duplicate of IE shows black border around PNG when faded in
try with this one!
Just by what i have seen in the screenshots, I think the IE version is old or the browser is new but is rendering in an older standard (IE7 standards mode). Using F12 find out what mode IE is opening it. If it is opening it in an older mode, force browser to open in the latest mode by using the meta tag..
<meta http-equiv="x-ua-compatible" content="IE=Edge"/>
hopefully this helps.

PNG fix for sprites?

I have a few buttons on my page that are styles using sprites, in ie6 however with the 'UNIT Png fix' http://labs.unitinteractive.com/unitpngfix.php my sprites no longer work and there stretched to fit the container, Doesn anybody know if there's a png fix out there to work with sprites? Thanks
you can fall back to a gif sprite background for IE6.
.myClass {
background-image: url(img.png);
}
.ie6 .myClass {
background-image: url(img.gif);
}
you can get the .ie6 class on your <body> by following the html5boilerplate approach.
http://html5boilerplate.com/
EDIT
or add the IE6 override to a conditional css file:
<!--[if lte IE 6]><link rel="stylesheet" href="ie6.css" /><![endif]-->
credit to #lucideer, see comment below
In short, no there isn't. I ran into the same issue recently and I just created a GIF from the standard PNG and used an IE6 stylesheet to use the GIF. That way sprite positioning is still supported. This solution's viability depends on your design and how much transparency is needed. In some cases you can put the background in the gif where necessary, but I personally wouldn't worry too much about IE6

how does the css "onmouseover" event work?

update-
sorry folks, i should have provided the link to the website where i saw the effect. here you go - http://www.w3schools.com/Css/css_image_transparency.asp
and the code that i saw there (and the basis of this question) is as below -
<img src="klematis.jpg" style="opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />
The original question is as below -
I was looking for rollover effects that can be done without using JS, and i stumbled upon the w3schools website teaching the opacity setting for images. In the code, there is no js involved, its just pure css.
i even tried using the same code into my webpage (which does not have any js, yet) and i noticed that the code happened to work perfectly in both chrome and IE 7.0. the code has a "onmouseover" event and another "onmouseout" event to give the hover effects based on the opacity settings.
wondering whether these effects (onmouseover and onmouseout) are -
1. pure css
2. standards compliant (xhtml 1+ and css2)
3. whether there are any hacks involved
i still cant believe these things worked on ie7, and wondering why there are no documentation on these events.
There's no such "onmouseover" event or attribute in CSS, that's JavaScript. CSS uses the ":hover" pseudo-class for mouse over events. A quick example,
HTML:
<div id="someid">I'm a random div.</div>
CSS:
#someid {
background: #fff;
}
#someid:hover {
background: #000;
}
In this example, when you hover over the #someid element, it's background will change from white to black.
This is the correct way to handle mouse over events in CSS. It is standards compliant and will work in all modern browsers (and some older browsers too).
Sidenote: It won't always work in IE6, IE6 only recognizes the ":hover" pseudo-class when it's applied to anchor tags ("a:hover", etc).
Based on the update to your question:
<img src="klematis.jpg" style="opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />
That is using JavaScript to change the style. The only bit of this which is CSS is the style='...' part. The text in onmouseover and onmouseout is JavaScript.
To do what you want in pure CSS, it should be like this,
<html>
<head>
<style>
img.opacity-image {
opacity: 0.4;
filter:alpha(opacity=40); /* This is IE specific and NOT standards complaint */
}
img.opacity-image:hover {
opacity: 1;
filter:alpha(opacity=100); /* Again, 'filter:' is IE specific. */
}
</style>
</head>
<body>
...
<img src="klematis.jpg" class="opacity-image" />
....
</body>
</html>
opacity is CSS3 and only supported by modern browsers (IE6,7,8 don't support it). You can use filter:... to get opacity to work in IE (although it won't handle PNGs correctly, but since you're using JPG that's not an issue), but then your code isn't technically standards compliant as "filter" is not in the CSS standard. That doesn't generally matter too much though since it'll still render correctly in any modern browser.
I'm assuming you're talking about the :hover event?
<div id="hoverDiv"> Something should happen when you hover on me</div>
Style:
#hoverDiv:hover{ background-color:red; }
Visual example: http://jsfiddle.net/zRnug/
All hover effects you want to add to your stylesheet within the #selector:hover{ } area.
All effects you want to pertain before (the default style of the element), just use within the #selector{ } area.
Those are Javascript inline event handlers.
You can do this in pure CSS using the :hover selector.
CSS supports the :hover selector, which is triggered when you move the mouse over the item.
.mydiv {background-color:red;}
.mydiv:hover {background-color:blue;}
Any CSS property can be set to change on mouse-over using the :hover selector in this way.
Opacity is a CSS3 feature. It is supported by most browsers, but IE8 and lower don't support it. They do have an alternative way of doing it (using the IE-specific filter property); it's more fiddly than standard CSS and harder to get right, but it can be done.
Be aware that IE6 and lower only supports :hover on <a> elements. Other browsers (including IE7 and up) support it for all elements. My advice would be just not to support IE6 on your site, but if you do need to, there are hacks for it which can make :hover work correctly.

CSS pointer-events='none' and/or XUL mousethrough='always' in web pages for Firefox

Very recently I asked this question on how to pass clicks through an element (e.g. full screen overlaying ). Received some good advice, but I still wondered which browsers supported this natively...
For those skipping the previous link, the overlay is purely cosmetic, must be overlayed and should ignore clicks (all mouse events should pass right through it)...
So far, I've only managed to get this working with WebKit browsers.
Works (Chrome and Safari 4): -
<image src='./images/75/75.overlay.blood.png' width='100%' height='100%'
style='z-index: 3; position: absolute; top: 0; left: 0; pointer-events: none;' />
Firefox is known to support pointer-events with SVGs (and with other HTML elements in 3.6); problem is, I can't seem to get this to work with an SVG (e.g. xlink:href="overlay.24bit.8alpha.png").
Another way I hoped this could be achieved was by using XUL in HTML.
I'm hoping to use the attribute mousethrough="always" on the overlay (<image>, etc). Not working as of yet...
Oddly enough, Internet Explorer treats alpha opacity PNGs transparent areas as "click through" which is handy.
Any other good (or simple yet hackky) ways to achieve this in Firefox (3+). Pondered a Flash overlay with wmode="transparent" (fail).
Try this jQuery solution: http://jsbin.com/uhuto
Works in Firefox, Chrome, iPad's Safari, and IE8 at least. The only issue I saw was that the overlay wasn't translucent in IE, but I assume that's something that can be overcome.
Another solution (used by an Ext JS plugin): http://www.vinylfox.com/forwarding-mouse-events-through-layers/ - uses Javascript to reforward the events.

What is the preferred way to do a CSS rollover?

When setting up a rollover effect in HTML, are there any benefits (or pitfalls) to doing it in CSS vs. JavaScript? Are there any performance or code maintainability issues I should be aware of with either approach?
CSS is fine for rollovers. They're implemented basically using the :hover pseudo-selector. Here's a really simple implementation:
a{
background-image: url(non-hovered-state.png);
}
a:hover{
background-image: url(hovered-state.png);
}
There are a few things you need to be aware of though:
IE6 only supports :hover on <a> tags
Images specified in CSS but not used on the page won't be loaded immediately (meaning the rollover state can take a second to appear first time)
The <a>-tags-only restriction is usually no problem, as you tend to want rollovers clickable. The latter however is a bit more of an issue. There is a technique called CSS Sprites that can prevent this problem, you can find an example of the technique in use to make no-preload rollovers.
It's pretty simple, the core principle is that you create an image larger than the element, set the image as a background image, and position it using background-position so only the bit you want is visible. This means that to show the hovered state, you just need to reposition the background - no extra files need to be loaded at all. Here's a quick-and-dirty example (this example assumes you have an element 20px high, and a background image containing both the hovered and non-hovered states - one on top of the other (so the image is 40px high)):
a{
background-image: url(rollover-sprites.png);
background-position: 0 0; /* Added for clarity */
height: 20px;
}
a:hover{
background-position: 0 -20px; /* move the image up 20px to show the hovered state below */
}
Note that using this 'sprites' technique means that you will be unable to use alpha-transparent PNGs with IE6 (as the only way IE6 has to render alpha-transparent PNGs properly uses a special image filter which don't support background-position)
It will still work in CSS if the browser happens to have Javascript disabled.
Because it's an aspect of presentation, I'd say it's more standards based to do it with CSS. It used to be done in Javascript, simply because we couldn't do it with CSS (old browsers suck, and I don't think :hover was even added until CSS 2).
Implementing a rollover with CSS uses the :hover pseudo-class to define the style of the target element when it is hovered over. This works great in many browsers but not in IE6 where it only works well with the anchor tag (i.e. a:hover). I used CSS hover to implement a tabbed navigation bar but had to use IE behaviors to get it working in IE6.
Yep, the best way to do this is css sprites. An annoying problem occurs in IE6, when browser make a request every time an element is hovered. To fix this, take a look here.
I'd stay on the CSS side of the house, but I've done very little Javascript.
CSS seems to be easier to standardize across browsers than Javascript, though that may be changing with the advent of Chrome's V8 and Firefox's upcoming new rendering tool.
Isn't there a mnemonic for remembering the sequence of declarations in CSS?

Categories