I badly need your help. My background image was overly stretched in IE8.
I used Wordpress's functionality on background image in their edit appearance. Chrome, Firefox and other IE versions, the background is appearing okay. But when I checked in IE8, it was overly stretched. Instead of seeing the garden background, what I saw was the tip of a tree which was part of the garden.
I was wondering on where I can tweak the code or what I can do to make it fit nicely like how other browsers show it.
I already tried :
background-size:cover
background-size:1024px 100%;
Thanks!
use https://github.com/louisremi/background-size-polyfill
download backgroundsize.min.htc
.selector {
background-size: cover;
-ms-behavior: url(css/backgroundsize.min.htc);
behavior: url(css/backgroundsize.min.htc);
}
Related
Slightly baffled by this one - I'm working on a tiny static site with a large background image, which is rendering with a 1px black top border in Firefox. There's no border in the image and it doesn't render in any other browser. I haven't managed to find any references to this happening with a background image anywhere and am not quite sure how to fix it!
This seems to be fixed in the latest build of Firefox (not sure whether to post this as an answer to my own question or as part of the question?)
You should make sure you have resets for all css, like normalize.css. This way all browsers act the same.
img { border:0; }
I have a background-image in chrome that should be dynamic. It's part of a image map I'm building. In chrome however when the (absolute size of the) image is larger than that of the parent div on hover the background image just vanishes.
You can see this behaviour in this fiddle. http://jsfiddle.net/Lvv05q1w/4 (EDIT: Changed fiddle to a simplified version) (note this is a snippet of the real app with some features removed to make the problem hopefully more easy to identify. There must be only one image in the real app so solutions having multiple image tags which we then display/hide on hover can't be used here). If you shrink the width of the output so the end of the image is just off the page and hover over the image in ff you'll see the hover image applies. In chrome you'll see the background-image on the div just vanishes.
Browsers Affected
Chrome
Opera
Browsers Unaffected
Chromium (running on Lubuntu 14.04)
Firefox
Internet Explorer 11
Safari (tested via VM only)
Base CSS from fiddle looks like (I know I can compress into the background property but it was making it easier for me to fiddle around in chrome dev tools earlier)
#htmlmap_1 {
background-image: url(http://hm25.dev.blox42.com/images/htmlmaps/branch.png);
background-repeat: no-repeat;
background-attachment: scroll;
background-position: 50% 0%;
background-size: contain;
}
Screenshots of Issue
Prehover image
Posthover - Chrome - The background image attached to the div has vanished - only the main image shows
Posthover - FF Image has resized as expected and the image overlays the background image
EDIT:
The one thing that kinda makes a difference is removing the background-repeat:no-repeat attribute. That gives the expected result of the image shrinking like in ff. However obviously I don't want the image to repeat itself so it is NOT a viable solution. Hopefully it might help someone with a solution tho!
1230sharp.com
For some reason the background images are scrolling with the website. I have the value "background position:fixed" and background-attachment:"local" and I'm getting the same issue.
1230sharp.com/#services - any suggestions?
Ok so because ie8 doesnt support background-attachment:local
it uses background-attachment:fixed. If you remove that you should be fine.
Meaning do not use either one for .section div or anywhere you dont want to the background to scroll.
I removed both of them and it worked for me in chrome and ie8 :)
UPDATED
You can actually switch to background-attachment: scroll instead of local and that should work as well for both ie8 and chrome and others.
source here
EDITED
Use background-attachment: scroll !important; that way it should overwriting the local in current browsers like chrome and remember to clear your cache
Im working with a cross-browser compatibility, fixed everything fixable for IE7 and IE8. But it seems there is a slight (huge) problem with the background which is called by CMS.
As far as it seems, there is no problem in IE7 v8.0 BUT in IE7 v7.0 looks moved to the side in most pages, but not in others.
I figured it was because of a fix i did for some lost positions, but when i searched for a lost object in the right there was none.
And i have no idea how to make this bg to look right.
Please help me! im going crazy with this!
Page:
http://www.tvazteca.com/homes/laislaelreality
I think the problem its the background position. I cant make it work for the IE7.
<body class="fondo-pagina" data-twttr-rendered="true">
<style type="text/css">
.fondo-pagina {background:url(http://static.tvazteca.com/imagenes/2012/29/1634805.jpg) no-repeat; background-position: 50% 40px;background-color:#0b4a51;
*background-position: 50% 0 !important;
}
.bgBottom{background:url() bottom center no-repeat;}
</style>
The style up there is added automatically by the CMS. Although i have the same class in the style sheet:
.fondo-pagina{
background: url(../img/fondoislaEtapa1.jpg) top center no-repeat;background-color: #0b4a51;
*overflow-x:hidden;background-position: 50% 0px!important;
*background-position: 50% 0px!important; }
I havent been able to make it work. I know im using hacks, and its not the best option, but i was asked to only use one style sheet for the site, so another one for IE7-IE8 was out of the question.
How can i make IE7 to read the background position? Is it going crazy because of the double clases?
Using Chrome and FF, element inspectors i found out none of the background position clases were taken for IE.
TY for reading :)
I found the problem.
Nothing was wrong with the Html php and my Css
The problem comes from FACEBOOK:
<script>
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)) {js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
</script>
The scrip has to be placed in the div that contains the likes/comments etc. Other way it will go crazy in IE.
It opens up a big div that forces the page to be contained and makes horizontal scrollbar to be extended. As result, the background will take such width as the base one and position itself on the 50% 0px of that thing.
It only affects IE versions. The other browsers work fine.
I am trying to set an image as background in td.Its working fine with all browsers except IE6. I did google as this is famous png issue with IE6. I tried some solution using javascript but its working fine when i used img. In case of background i am not able to call any javascript method to solve the issue.
Help me if you have some solution ?
I don't believe that any solution exist for this problem. However, I wouldn't worry too much as IE6 market share is decreasing rapidly and in some geographies such as US/Europe, its less than 2-3%. See http://www.ie6countdown.com/
Said that IE6 support is must then I will suggest that you create an alternate image type (gif or jpeg) and use that instead of png. You can use IE6 specific CSS hacks to use the alternate version and thereby delivering the PNG to other browsers.
EDIT
Doesn't CSS such as below work for you
td.myClass {
background-image: url(bg.png);
_background-image: url(bg.gif); /* IE6 Hack */
}