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!
Related
I have an SVG image with clickable SVG polygons on it and some hover image effects on top of that. works perfectly fine in every browser, except - of course - in IE. actually edge (12 + 13) and IE 11 are fine. Even IE10 (Metro) - but not IE10 Latest (as tested in Browserstack).
Since this has to be seen with the images I put up a working example here (well working apart from IE10):
SVG clickable images
so following that link you can see what it should look like (again, except IE10) and this is a screenshot from Browserstack of what it looks like in IE10 Latest:
So in this specific case, the black & white-image (background) - instead of having a 7.5% margin-left and 85% width like the rest of the svg stuff - is resized by the height, which seems to be 100%, thus resulting in incorrect layering of the SVGs.
i really don't know what's causing this - any help is much appreciated!
It looks like you are only supplying a width for the <svg> element (ie. no height). So it is probably IEs SVG scaling bug that is your problem. See the following question for a workaround.
SVGs not scaling properly in IE - has extra space
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);
}
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
I'm making a little demo thing for my sister's wedding, I basically want to set the body background to a different image as the user scrolls down the page.
Here is a functioning version of the page.
The process itself works fine, however on:
A desktop mac running Chrome (browser width around 1900px)
The image does not stretch across the page, although the background remains fixed (as it should).
Screenshot of this problem
A mobile phone (android chrome)
The background image does not stay fixed (when the user scrolls down, the background image is left behind). Funnily, I cannot reproduce this in my laptop browser by making my window smaller - possibly a limitation with the mobile browser itself?
Screenshot of this problem
Any thoughts on what I'm missing here?
The image is 1200px wide. So on a 1900 resolution the image doesn't stretch and is smaller :). If you use background-size: 100%; It should stretch.
As for mobile: This question is the same issue as you with solution.
set the
width:100%
margin-left:auto;
margin-right:auto;
in your image tag or div
if the 100% is not work use px for width
I came across a strange behaviour with Chrome earlier that I can't seem to fix.
I have an image applied to <body> that is positioned: left top. While loading in Chrome the background positions as expected repeating on x from left top. Once the window is loaded, a class is added to the body tag: backgroundPositionTuned and an inline style that overwrites my own CSS background-position: 0% 34px;
This style as expected from the declaration shifts the image that should sit flush with the top of the page down by 36px on the y axis.
Has anyone else seen this behaviour and know how to counteract it?
The styling works fine in
IE 7,8,9
Firefox 9 >
I had exactly the same problem on several pages (I mean not just on a page I developed, but also on several other). Accidentally I discover that if I disable the Chrome plugin uTorrentControl v2 (or something similar) and the problem disappear.
Cheers!