got a problemi with this website: it's all ok in every browsers, except for safari. As you can see, in safari there are 2 lines of a different red color near Ferrari's, that's because safari doesn't read the background image 1x1px that I've used to keep the same red color of the image of the car (I'm using an image because the car has color profile incorporated, so the color code is different).
http://www.aformulaonehistory.com
Anyone knows why?
The structure is like this
<div class="background_color">
<div id="car_in_background">
</div>
</div>
with a css like this:
.background_color {
background: url('http://www.mydomain.com/img/image.jpg') repeat;
}
#car_in_background {
background: url('http://www.mydomain.com/img/car.jpg') no-repeat center center;
background-size:contain;
height:101%;
overflow:hidden;
position:relative;
}
Thanks!
EDIT: I think that safari reads the background image, but that doesn't read the color profile. That's quite odd, because the image has ICC profile incorporated (as correctly shown in ffox and chrome).
Hmmm... if I compare the color codes in different browsers, they aren't fit together. The picture itself loaded in Safari has a complete other color than if it's on the website or than the background.
But I guess the real problem is, that the background images on safari aren't loaded at all at my browser version, so Safari uses the color fallback.
And if you are looking very detailed on your website, you can see, the grey picture doesn't fit 100% with the background as well.
You could try this:
use
background: #c54040;
background: url('http://www.aformulaonehistory.com/img/backgr/c54040.jpg') repeat;
instead of
background: #c54040 url('http://www.aformulaonehistory.com/img/backgr/c54040.jpg') repeat;
Maybe that helped ;)
I guess it is according to http type images.you can try something https picture for test
Related
I've got a blueprint that I want to absolutely position divs on top of in order highlight certain rooms.
Using the alpha channel (rgba), I can still see the blueprint's "ink" underneath, but depending on the color saturation the drawing gets obscured.
I know that I can use background-blend-mode: multiply on the div that contains the blueprint in order to get the desired effect, but it applies it to the entire image because I have to specify the color and the image on the same div. This is hard to explain but easy to show, so I mocked it up with paint.net here:
Again, I can get the desired look using background-blend-mode but would apply it to the entire background image. I want the color from a div to multiply everything that is underneath it.
Well, I started off writing this question and found out that it is a browser support issue. I eventually found mix-blend-mode which is what will apply blending modes to everything "underneath" a div/element, unfortunately, Chrome (as of today) doesn't support it. Firefox, however, does. It is possible to turn it on in chrome going to chrome://flags/ and enable "experimental Web Platform features".
I found the following link pretty helpful in general, I just didn't realize that they talk about both background-blend-mode and mix-blend-mode. http://css-tricks.com/basics-css-blend-modes/
Here is a screenshot of it working in firefox:
An alternative is to use background-blend-mode, and play with the background-image properties.
Not a very nice solution, but can get you going before waiting from Chrome next release
.test {
width: 400px;
height: 200px;
background-image: linear-gradient(lightgreen, lightgreen), url(http://i.stack.imgur.com/DfAyW.png);
background-blend-mode: multiply;
background-size: 100px 140px, cover;
background-position: 10px 40px, 0px 0px;
background-repeat: no-repeat;
}
<div class="test"></div>
I have a transparent, grey-scale PNG of an icon. I want to be able to change it's color like a font-icon.
A few more details: The PNGs have outer transparencies and inner white areas for the actual "icon", plus a small greyscale gradient so they have good-looking "fuzzy" edges. I'm armed with Image Magic, so I don't mind if I have to take negatives / otherwise perform transformations on the PNG prior to any solution.
Why I can't just use a font-icon set: We have some custom, proprietary icons we're using, and I've spend hours trying to convert them to a font-icon set with no success. So I'm unlikely to find our icons out there, and I can't get our icons into a font-icon set. I could be doing it wrong, or I could have no found the right tool.
So my next best bet looks to be using CSS "Masking", only I can't get that work. The idea would be to set the background of the div to the correct color, and then mask out the div so only the part that corresponds to the icon is visible... but I can't get that working, either.
I'm open to any ideas, but my gut says the CSS stuff is the "way to go", unless there's some PNG->Font tool I haven't found.
So to reiterate: I have a greyscale PNG with transparency, and I need to show it on a website with a "font-color" set by CSS.
Any ideas?
(Thanks!)
Using masking for that isn't hard:
.filtered {
width:200px;
height:200px;
position:relative;
background-color: red;
-webkit-mask-size: 100% 100%;
-webkit-mask-image: url(http://i35.tinypic.com/2091450.png);
mask-size: 100% 100%;
mask-image: url(http://i35.tinypic.com/2091450.png);
}
But you won't get much support for old browsers
fiddle
I have a div with height and width, and it has a background image assigned to it in the stylesheet. It works fine in Firefox/Chrome, but in IE8 and below the image just doesn't show up. In the developer the background attribute doesn't even show up as one of the styles. I can add background color and that does work. Does anyone know why this might be?
For reference the attribute looks something like this:
background: url("imgpath.png") no-repeat scroll 0 0 transparent;
width:20px;
height:20px;
position:relative
Edit: the HTML is just a div within a larger wrapper. Other images in the wrapper that are defined in the same way work.
I will blatantly assume that imgpath.png is CMYK. IE8 only supports RGB images.
Try converting it from CMYK to RGB using this CMYK Converter.
Yeah, I think I know what it might be. Try to put the whole image path there including the protocol and domain, just like that: background: url("http://example.com/imgpath/image.png") no-repeat scroll 0 0 transparent;
And tell me if it works or not.
My Firefox is acting weird. I use a simple 4x4px transparent PNG for a div background (as usual). In Chrome, Safari, Opera and even IE it looks great but in FF it's "broken". Here is a picture to show you what I'm talking about: http://cl.ly/2Q1l0S1u3I2Z1e3U2n0G.
I use image and gradient for the background but if I only used the image, it causes the same result.
Here is the code:
#wrap {
background-color: #f5f5f5;
background-image: url(../images/general/bg-wrap.png);
background-image: url(../images/general/bg-wrap.png), -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#ebebeb));
background-image: url(../images/general/bg-wrap.png), -moz-linear-gradient(top, #f5f5f5, #ebebeb);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#ebebeb');
background-position: 0 0; background-repeat: repeat;
}
When I used only the background-image, it looked like this:
#wrap {
background: #f5f5f5 url(../images/general/bg-wrap) 0 0 repeat;
}
And this is the bg-wrap.png: http://cl.ly/0i3i1R0P2R0i1K1h1V1P. I don't understand what's going on...
Everyone's right about the Firefox bug and background image tile dimensions -- I was having the identical problem with a tile that was 16p x 16px. Nealio's answer seems to be correct, but it's not a question of resolution. Rather, take your tile and literally duplicate it so it repeats itself horizontally and vertically, and then use that tile as your background image.
For example, my background image is a simple tile of a very small "checkerboard" with alternating gray and white squares. The first image was the bare minimum to tile the pattern infinitely, so each "checker" measured 8px x 8px, resulting in a background image of 16px x 16px. This looks fine everywhere except Firefox, where it displays the same zig zaggy jaggy rendering as yours did.
After reading Nealio's response, I took that first pattern tile and doubled it so that it was 4 checkers x 4 checkers (8px X 4 = 32).
And voila! Same background appearance, but just a slightly larger tile.
The only thing I can think of is that a number of years ago, early versions of Firefox had trouble repeating background images that were too small (less than about 16x16).
Perhaps this is a new incarnation of that bug when combined with a gradient fill css..?
Just rule this out by testing it with a larger background image.
That is weird...
I set up a fiddle, and it works fine like this: http://jsfiddle.net/will/KMVvT/
Do you think it could be something else interfering?
You should not seperate the mozilla and webkit features with a comma after the closing bracket. Also the image path should be encapsuled within quotes.
I had the problem, that the image was not displayed, but could be viewed with in FireBug. The reason was the adblock plus extension. After disabling for that page (or general) it was displayed, again.
Screenshot of the issue: here
Webpage in Question: http://cure.org
Offending browser: Internet Explorer 7
You'll notice from the screenshot, or if you view this site in IE7, that the background image is not displaying for the content div (#modal-inner-content). Strangely, the image displays in the other divs where it is used (since it's a sprite, I'm using that same image for #modal-top-border and #modal-btm-border).
In all other browsers it displays properly, and even in IE8. I cannot seem to find what CSS rule (or lack thereof) I may be using that IE7 is choking on.
NOTE: in order to get the modal screen, just click the link at the very top banner of the page that says "login to your CURE account
I had the same problem in IE 7 with a transparent PNG acting as a background inside a <div>. Positioning the background at (0|0) fixed it for me:
background: url("images/bg-header.png") no-repeat 0 0;
I had the same problem, buttons with graphic backgrounds aren't displayed in IE7.
It seems that IE7 has problems with such HTML elements with borders, as setting border-width:0 solved the problem for me.
I just remembered that IE7 has a problem with mixed units in the background position property. so -636px top should be -636px 0
I agree with FutureKode. The background on #modal-inner-content isn't displaying because IE doesn't think the element hasLayout, which sometimes causes problems with other style declarations. To trigger hasLayout, the easiest way I see would be to style that div with width:576px (what Firebug is telling me the width of that div is). I'm assuming the width of that box never changes?
More on hasLayout, and what triggers it: http://www.satzansatz.de/cssd/onhavinglayout.html
Are you using some fix for IE and png images ?
If i remember correctly, most plugins/methods to enable transparency to background images by using the filter css property of IE made the background non-repeatable ..
It could be it ..
Not sure why the image isn't showing up in IE7, but this could be a good intermediate fix. this should add a white background if the image doesn't show up.
Try changing #modal-inner-content from:
background: url(http://cure.org/img/modal-bg-xy.png?jcb=1284407379) repeat-y -636px 0%;
to:
background: url(http://cure.org/img/modal-bg-xy.png?jcb=1284407379) #fff repeat-y -636px 0%;
--- Edit - don't use above answer ---
Try wrapping the url in quotes:
background: url("http://cure.org/img/modal-bg-xy.png?jcb=1284407379") repeat-y -636px 0%;
I need to install ie7. My first try would be to add a width to #modal-inner-content
Use the clear-rule:
clear:both;