I'm trying to use the mask CSS property with #supports CSS at-rule and as a fallback option for older browsers I want the background image to render in it's original color.
So far I've been using this approach
background-color: pink;
background-image: url('../img/SVG/chevron-thin-right.svg');
#supports (-webkit-mask-image: url('../img/SVG/chevron-thin-right.svg')) and
( -webkit-mask- size:cover) {
-webkit-mask-image: url('../img/SVG/chevron-thin-right.svg');
-webkit-mask-size: cover;
}
The problem is that the mask property doesn't apply correctly to the background image even if opened in a supported browser. It doesn't render the correct pink color, instead it renders a purple color(it seems like the pink is mixed with the original image color).
If I remove the background-image: url('../img/SVG/chevron-thin-right.svg'); part from the code, then the desired pink color is rendered.
What would I need to change so the desired color renders correctly when the mask property is supported and the original background image is shown if it is not supported?
Related
is there a way to set background-color in safari to transparent? Currently my png is displayed with a white background instead of transparent.
I've tried:
background-color: transparent;
background-color: rgba(255,255,255,0);
appearance: none;
and even
-khtml-background-color: transparent;
Nothing wrong with your CSS, but if you've saved your image with a colored background (e.g. red/white/yellow) it's not possible to "overwrite" this color using CSS. Therefore you need to make sure the background of the image is transparent.
Take a look at the following page to get an idea of what I described.
https://www.causevox.com/blog/using-the-right-logo-image-transparent-png/
My slider background shows up in Chrome, Firefox, and most versions of IE, but not in IE8. Its background stays the same color as the rest of the page.
.site-slider {
width: 100%;
background: url(images/alexandria/header_overlay.png) no-repeat center top,
url(images/alexandria/header_bg.jpg);
}
If I change background to background-image, every browser shows the same thing that IE8 does.
IE doesn’t support multiple backgrounds until version 9. You can get around this by adding a wrapper element and applying one background to the parent and one to the child.
.site-slider-wrapper {
background-image: url(images/alexandria/header_bg.jpg);
}
.site-slider {
background: url(images/alexandria/header_overlay.png) no-repeat center top;
}
The reason changing the property name to background-image breaks the CSS in every browser is that the first background sets background-repeat and background-position properties (no-repeat center top) as well, which aren’t valid as part of background-image.
(The whole point of background is to be a shorthand for the background-* properties.)
You're using a CSS3 "Multiple Backgrounds" feature, which isn't supported in IE8. See its support on this link
Please read this tutorial and find the heading where it says "Multiple Backgrounds". Here you'll find a way to make this property work on IE8 as well.
Secondly, background is a shorthand property where you can combine/define values for the following properties:
background-color
background-image
background-repeat
background-attachment
background-position
Eg: background: #00ff00 url("smiley.gif") no-repeat fixed center;
On the other hand, if you use any property from the list above, it will accept only values specific to them. They won't work if you'll try to combine any other property value with them. Because of the same reason, your background-image property isn't working. You can only define the urlof the image as a value of background-image
Eg: background-image: url("paper.gif");
Adding this line
src /*\**/: url('skins/fonts/titillium/TitilliumText22L003-webfont')\9
seemed to fix it...
I have a div with a gradient background as well as a background image. It works great in all the major browsers except ie9. I have both displaying, however I can't figure out how to position the background image.
using the appropriate browser prefix where necessary I use the following:
background: url("../images/green-home-icon.png") no-repeat center top 10px, linear-gradient(top, #top-color 0%,#bottom-color 100%);
But in IE9 I use filter as that is the only css way to do this:
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/green-home-icon.png') progid:DXImageTransform.Microsoft.gradient( startColorstr='#{top-color}', endColorstr='#{bottom-color}',GradientType=0);
Is there a way to position the background image in IE9 while keeping the gradient just like we can in other browsers? I would like the image to be centered in the div. I would preferably like to do this without having to add additional elements.
Here is a fiddle. It only has the filter for IE9.
I suggest using an inline SVG instead of the non-standard IE filter. It would look something like this:
background: url("../images/green-home-icon.png") no-repeat center top 10px, url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
JSFiddle: http://jsfiddle.net/Lnqbhag1/
Since it looks like you are using LESS, I have found a LESS mixin that will automate this for you: https://gist.github.com/brysongilbert/3895260. I haven't tested the mixin, but it looks like it should do the trick.
With CSS3, is it possible to fade from a background-color to a background-image?
I know it's possible to fade from color to color or from image to image, but can you also fade from the one to the other?
It's not possible from native view, but you can simulate it: jsFiddle
body {
background-image: url('http://s1.directupload.net/images/140212/gvyaj9ca.png');
}
This picture is a PNG with nothing inside (not even white color) and the same size as:
body:hover {
background-image: url('http://connexo.de/img/logos/CSS3_Logo.png');
}
I don't exactly know what behavior of the background color you want to achieve.
I just revert it to white.
I'm using SVG images as background images. My CSS looks like this:
background:url('image.svg');
The problem is that they don't appear on IE8 or earlier.
Is there any way to make this work? Or perhaps specify a fallback only for IE? (I don't want to replace them with gifs for other browsers.)
Live example: HERE
I had the same problem and used this solution. For this to work you need to have a svg and png copy of image. Than write css like this:
.twitter-logo {
width: 200px;
height: 200px;
background: url(http://cl.ly/D4xT/twitter_newbird_blue.png) no-repeat center center;
background: rgba(0,0,0,0) url(http://cl.ly/D4o5/twitter_newbird_blue.svg) no-repeat center center;
}
The trick is that IE8 doesn't support rgba, and because of that IE8 ignores second background definition.
According to svg support in other browsers, you will still have issue with Android Browser 2.3- and Firefox 3.6 because they support rgba and don't support svg.
Here is jsfiddle example as well.
There's no way I know of to make IE8 use SVG as a background image. You have two real options if IE8 support is important to you:
Provide a PNG fallback for IE8 and other browsers which don't support SVG in a background
Place the SVG in your page instead of the background, position it behind everything else with CSS, then use something like SVG Web to provide support in IE8