In my server logs, I get many errors such as this:
File does not exist: /my/path/-moz-linear-gradient(top,white,
This is apparently due to the following piece of Bootstrap CSS, where some browsers must interpret -moz-linear-gradient as a background image to be downloaded:
.btn{
/* some code... */
background-color: whiteSmoke;
background-image: -webkit-gradient(linear,0 0,0 100%,from(white),to(#E6E6E6));
background-image: -webkit-linear-gradient(top,white,#E6E6E6);
background-image: -o-linear-gradient(top,white,#E6E6E6);
background-image: linear-gradient(to bottom,white,#E6E6E6);
background-image: -moz-linear-gradient(top,white,#E6E6E6);
background-repeat: repeat-x;
/* more code...*/
}
How can I prevent such errors from happening?
Thank you!
You should use background: instead of background-image: because with background-image you need to set the path of the image and you are not using an image.. but a gradient as background.
This is a Tool that you can use http://www.colorzilla.com/gradient-editor/ to make the gradient and copy the code if you want, all to make it easier and fault free.
Update after all the comments:
You could use a fallback image of the gradient. Like here:
/* fallback image */
background-image: url(images/fallback-gradient.png);
And that should fix your problem to.
Related
body {
background-position: right;
color: #FF7F27;
background-color: transparent;
background-image url('../cityage_background3.png');
background-size: 1386px 861px;
background-repeat: no-repeat;
background-attachment: fixed;
}
The link is just n example. i know the real link works because it show up in cchrome and firefox. Why isnt the background image showing up in internet explorer.
Your error is here:
background-image url('../cityage_background3.png');
It should be:
background-image: url('../cityage_background3.png');
You were missing :
Edit* IE does not like errors.
you forget your : between background-image and url
if it doesn't work, it's because your path is not correct. Make sure your image is in the right place.
I'm trying to set up a select element with multiple backgrounds (one image, and one linear-gradient). It worked while I was developing, but for some reason it stopped working when it was pushed to production.
Here's the code I started with (in SCSS):
$select-arrow-uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAICAYAAAAvOAWIAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NDkxMSwgMjAxMy8xMC8yOS0xMTo0NzoxNiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkExMjY4NTZGRTdCNTExRTNCOEJDRDIyQTAwRDQ5MzU2IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkExMjY4NTcwRTdCNTExRTNCOEJDRDIyQTAwRDQ5MzU2Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QTEyNjg1NkRFN0I1MTFFM0I4QkNEMjJBMDBENDkzNTYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QTEyNjg1NkVFN0I1MTFFM0I4QkNEMjJBMDBENDkzNTYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4L3nSlAAAAm0lEQVR42mL4//8/AwinpKQowtjIGCguB2MzMQBBampqF5A6D6TNGJAAkG8DpK4C6UYQnxGo0xhInwRiZiD+CMRus2fPPgVVuB2IeYD4FxAbMoKMB0rEAjnzkTRUAnEXksJooAFrwIqhViYAqTlQDTAAVwh2Bkwxkob5UO5fII6AKQQBJmQPASUWAKlEqMJoZIVgQCi4kDFAgAEAFOFxgtML2dkAAAAASUVORK5CYII=';
select{
background-color: #f5f5f5;
background-image: url("#{$select-arrow-uri}");
background-image: url("#{$select-arrow-uri}"), -webkit-linear-gradient(bottom, #e5e5e5 0%, #f5f5f5 100%);
background-image: url("#{$select-arrow-uri}"), linear-gradient(#e5e5e5 0%, #f5f5f5 100%);
background-position: 95% center;
background-repeat: no-repeat;
}
and this is how it is appearing in the browser:
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAICAYAAAAvOAWIAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NDkxMSwgMjAxMy8xMC8yOS0xMTo0NzoxNiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkExMjY4NTZGRTdCNTExRTNCOEJDRDIyQTAwRDQ5MzU2IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkExMjY4NTcwRTdCNTExRTNCOEJDRDIyQTAwRDQ5MzU2Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QTEyNjg1NkRFN0I1MTFFM0I4QkNEMjJBMDBENDkzNTYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QTEyNjg1NkVFN0I1MTFFM0I4QkNEMjJBMDBENDkzNTYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4L3nSlAAAAm0lEQVR42mL4//8/AwinpKQowtjIGCguB2MzMQBBampqF5A6D6TNGJAAkG8DpK4C6UYQnxGo0xhInwRiZiD+CMRus2fPPgVVuB2IeYD4FxAbMoKMB0rEAjnzkTRUAnEXksJooAFrwIqhViYAqTlQDTAAVwh2Bkwxkob5UO5fII6AKQQBJmQPASUWAKlEqMJoZIVgQCi4kDFAgAEAFOFxgtML2dkAAAAASUVORK5CYII=) 95% center no-repeat,
linear,to bottom,#e5e5e5,#f5f5f5;
When I remove the background-image rule with linear-gradient, it works fine. It doesn't have any problems with the -webkit-linear-gradient line, just the linear-gradient line.
Is there a syntax issue? Could Sass be compiling weird? Is it trouble with the URI string?
Please help! Thanks!
Figured it out. I have the Bourbon library loaded, and there is a function for linear-gradient that is made to work with the background-image mixin, and that was being used without using the background-image mixin. I switched to the background-image mixin to get it to work, but I'll probably report this to them. Not cool Bourbon.
I am totally a noob to css and I have a need to add gradient to the background image on the top of the page.
here is what I tried but obviously its not working as background overwriting the value. How can I fix it
I have a background image and I need a gradient on top of it. Here is my css
body.test {
/* Mozilla: */
background: -moz-linear-gradient(top, #00FF00, #000000);
/* Chrome, Safari:*/
background: -webkit-gradient(linear,
left top, left bottom, from(#00FF00), to(#000000));
/* MSIE */
filter: progid:DXImageTransform.Microsoft.Gradient(
StartColorStr='#00FF00', EndColorStr='#000000', GradientType=0);
background: url(../mybackground.png);
}
TEST HERE
http://jsfiddle.net/PsDuF/
First, have a look at this tool for creating CSS gradients.
change
background: url(../mybackground.png);
to
background-image: url(../mybackground.png);
background is the shorthand syntax. Alternatively, you could combine the image with your other syntax:
background: url(../mybackground.png), -moz-linear-gradient(top, #00FF00, #000000);
In your case, you are declaring background multiple times, so each time you declare it, you are over-riding the previous declaration.
When you declare multiple background in one declaration, the order you declare them will change the stacking order. JSBIN example using images and mozilla background gradients: jsbin.com/abumuz/1
Note that if you want the gradient on top of the image, but still want to see the image, you need to make sure your gradient has alpha transparency.
I am trying to do a little thing with CSS3... I would like to set for a bunch of elements with class ".myClass" a gradient with -xxx-linear-gradient (generated with colorzilla.com/gradient-editor for compatibility).
But each of these elements with class ".myClass" has an Id, and depending on the Id, I would like to add different background-images on the top of gradients (as in a multiple background statement).
Something like this:
.myClass {
/* linear gradient... */
}
#myId1 {
background-image: url(img1.png); /* or background: url(...), same result */
}
#myId2 {
background-image: url(img2.png);
}
The problem is that the images defined with the #Ids replace the gradient instead of making multiple backgrounds. I could copy the gradient CSS code to each Id, and then have multiple backgrounds, but the compatibility code given by colorzilla is quite huge for just a gradient, so copying it in each id would make the code more unreadable...
Ids have the priority, but I was wondering if there was a way to "add" the second background-image instead of replacing it.
If you have any idea, thanks a lot!
You can't use multiple background in separate background statements. If you want multiple backgrounds, you have to declare them all in one background statement. This is because in multiple background statements, the rendering engine assumes you mean to replace the previously-set background with the new one, instead of adding to what's there.
One thing I generally do with CSS3, particularly when still needing all of the vendor prefixes, is to put all the CSS3 into its own file. That way, the rest stays readable and it's not mixed into the main CSS.
Unfortunately, there's still no way to do this in CSS3 in a concise way.
However, you could use pseudo-elements for extra background layers and override those instead. Here's an article that explains the technique: http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/
CSS3 supports multiple backgrounds - have you tried this?
If you use Less CSS you can do the following:
/**
* Defines a horizontal gradient, but allows additional image url's to be passed through the CSS3 compliant browsers to display multiple i
* image on the one element
*/
.background-gradient-multiple(#start-color, #end-color) {
.background-gradient-horizontal(#start-color, #end-color);
}
.background-gradient-multiple(#start-color, #end-color, #additional-background) {
.background-gradient-horizontal(#start-color, #end-color, #additional-background ~ ',');
}
.background-gradient-horizontal(#start-color, #end-color, #additional-background: ~'') {
background-color: #start-color;
background-image: #additional-background -moz-linear-gradient(left, #start-color, #end-color);
background-image: #additional-background -webkit-gradient(linear, 0 0, 100% 0, from(#start-color), to(#end-color));
background-image: #additional-background -webkit-linear-gradient(left, #start-color, #end-color);
background-image: #additional-background -o-linear-gradient(left, #start-color, #end-color);
background-image: #additional-background linear-gradient(to right, #start-color, #end-color);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#start-color, endColorstr=#end-color, GradientType=0);
}
to execute this in a class you can do:
.class { .background-gradient-multiple(#000000, #FFFFFF, 'url(images/test.gif) no-repeat top left'); }
Using CSS pseudo elements you may achieve the expected result here is an example :
http://jsfiddle.net/2s9uj24m/
<div id="alfa">Alfa</div>
<div id="bravo">Bravo</div>
<div id="charlie">Charlie</div>
CSS would look like :
div
{ position:relative;
background:linear-gradient(to top, #aaa, #eee);
}
div::after
{ content:" ";
position:absolute;
top:0;right:0;bottom:0;left:0;
}
#alfa::after{background-image:url();}
#bravo::after{background-image:url();}
#charlie::after{background-image:url();}
PS : Unfortunately there is no concept of "Arrays" or "Variables" in CSS... Wouldn't it be great to have a CSS file looking like :
#variables
{ color1:#aaa;
color2:#eee;
var:"the/path/to/an/image.png";
}
.myclass
{ background:linear-gradient(to top, #color1, #color2),url(#var);
other-general-css-properties-for-that-king-of-elements...
}
#myID
{ #var:"the/path/to/another/image.png";
}
:target
{ #color1:#777;
#color2:#aaa;
}
Just being able to have variables for colours would be such a time saver !
Try this. replace all the background in .myClass with background-color.
I would like to get a gradient in CSS (perhaps through Compass) that works in every major browser, including IE7+. Is there an easy way to do this (without writing a lot of code, and without a custom image file)?
I looked at Compass's gradient mixin, but it does not work with Internet Explorer.
Any ideas? (It does not need to be Compass -- I am happy install something else.)
Edit: What I am trying to get is some framework (like Compass?) that generates code like what Blowsie posted that's been tested across browsers. Basically like the Compass gradient mixin I mentioned, but with IE support. (I am a bit wary of just rolling my own SCSS mixin and pasting in blocks like Blowsie's code, because I haven't tested it and do not have the resources to do so.)
I just noticed that the current Compass beta (0.11.beta.6) has support for generating IE gradients in the compass/css3/images module (which supersedes the previous gradient module), so you can generate your gradients with a total of two short commands:
#import "compass/css3/images";
#import "compass/utilities/general/hacks"; /* filter-gradient needs this */
.whatever {
/* IE; docs say this should go first (or better, placed in separate IE-only stylesheet): */
#include filter-gradient(#aaaaaa, #eeeeee);
/* Fallback: */
background: #cccccc;
/* CSS 3 plus vendor prefixes: */
#include background(linear-gradient(top, #aaaaaa, #eeeeee));
}
This generates the following slew of CSS:
.whatever {
*zoom: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFAAAAAA', endColorstr='#FFEEEEEE')";
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFAAAAAA', endColorstr='#FFEEEEEE');
background: #cccccc;
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #aaaaaa), color-stop(100%, #eeeeee));
background: -moz-linear-gradient(top, #aaaaaa, #eeeeee);
background: -o-linear-gradient(top, #aaaaaa, #eeeeee);
background: linear-gradient(top, #aaaaaa, #eeeeee);
}
I guess I would have preferred to have the IE and non-IE gradient code in one call, but since IE's DXImageTransform gradient function is pretty limited, that is probably not possible.
The code I use for all browser gradients..
background: #0A284B;
background: -webkit-gradient(linear, left top, left bottom, from(#0A284B), to(#135887));
background: -moz-linear-gradient(top, #0A284B, #135887);
background: -o-linear-gradient(#0A284B, #135887);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0A284B', endColorstr='#135887');
zoom:1;
You will need to specify a height or zoom:1 to apply hasLayout to the element for this to work in ie
While gradients are of limited complexity, they're complex enough to require what you would consider "lots of code".
Consider:
starting colour, ending colour and the hexadecimal math required to transition between one and the other
The number of "steps"
The width/height of each step
Since there is no pure CSS way of doing this, it means rendering HTML, one element for each colour/step, without messing up your existing HTML
So, no, without a plug-in that does all of this for you, it would require a bit of code, or an image.