I have this menu here. I set a background-image for each parent li (then I set an high value for the height of the background-size because the sub-menu has some entries on 2 lines, and a high value for the height compensate that). The problem is that IE doesn't support background-size, so I get this:
How can I solve this? I tried to create a background-image with a higher height, but doesn't change anything.
IE does support background-size as of IE9. For IE8 and lower, you can try background-size polyfill. It seems your case does not need background-size at all though. Just use rgba() for IE9+ and repeated PNG-24 background for IE8-.
Since your image is a solid color, you can just remove the background-size and background-repeat: none (ie. let it repeat).
Alternately, you could do away with the background-image and use a background color with transparency:
.test {
background: rgb(255, 255, 255); // solid white fallback for old browsers
background: rgba(255, 255, 255, 0.5); // 50% transparent white
}
Related
I have a navigation bar and want it to have a border at the bottom like a multi-colored stripe. For example, Google uses a multi-colored stripe like this:
Could I do this in pure CSS, or would I have to use something like border-image?
You can do this with a linear gradient. In addition to just plain colors, you can do gradients for each stop. For google's own stripe, the color stops would look like this, CSS color names used for clarity:
background-image: linear-gradient(
to right,
blue,
blue 25%,
red 25%,
red 50%,
orange 50%,
orange 75%,
green 75%);
You can play with background-position and background-size to make it smaller than just the full header size, or put it into an :after / :before element and change the size on that element.
Example of color stops with gradient:
http://codepen.io/tholex/pen/nCzLt
I think you're much better doing this with a background image. You can keep the image really tiny by making each colour 1px wide and your image file 1px tall (they'll scale perfectly, with crisp edges).
An example:
.navigation-bar:after {
content: " ";
height: 6px;
width: 100%;
background: url(../img/stripe.png) repeat;
background-size: 100% 1px;
}
I am testing a site on localhost with Firefox and now I am seeing that the background image and color I gave isn't showing at all in Chrome. In IE it is showing in IE9 but not in IE8 or 7... So In Chrome, IE7 and IE8 I am neither seeing an image as a color...
What might be the problem? I am using both a color as a image. This is the code I am using:
background: url("http://localhost/test/wp-content/uploads/2013/01/bg.png") no-repeat scroll left 550px center #222;
PS I am using a left 550px because I don't want to use right -80px... Using a minus isn't good I am told...
Try putting the color before the url
according to W3C:
background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position];
So your code should look like this (I removed the double left property, if it's a positive number than it's automatically pushing 550px from the left):
background: #222 url("http://localhost/test/wp-content/uploads/2013/01/bg.png") no-repeat scroll 550px center;
I'd like to have a css background-image be a top-to-bottom gradient, and then a color. For example, if I wanted gradient that's #FF0000 at the top, #00FF00 400 pixels from the top, and immediately cuts to #EFEFEF after that, how would it be done? Is there some form of background-image-repeat I could use?
The actual property is called background-repeat. You need to use it in conjunction with background-size to restrict the gradient to 400 pixels tall and prevent it from tiling:
html {
background-color: #efefef;
background-image: linear-gradient(#ff0000, #00ff00);
background-repeat: no-repeat;
background-size: 100% 400px;
}
jsFiddle preview
Of course, this assumes you're using a CSS3 gradient, in which case browser support isn't an issue as all browsers that implement CSS3 gradients also implement background-size. But if you're using an image file for your gradient and you need to support older browsers, you're going to have to create an extra element or a pseudo-element with the appropriate height and position, to contain just the gradient.
Yes, use background-color and a gradient, set the proper background-repeat & background-size.
DEMO
background: #EFEFEF linear-gradient(#FF0000, #00FF00) repeat-x;
background-size: 1px 400px;
Adding a 3rd stop to your gradient is also an option (in case there are browsers that support gradients but not background-size). Place the 2nd and 3rd stops right at 400px, with the color for the 3rd gradient as your desired bg color.
I'm facing an odd problem. I have a document with a gradient background color.
<body class="loginbackground">
.loginbackground {
background: #64889A; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#DCDCDC', endColorstr='#64889A'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#DCDCDC), to(#64889A)); /* for webkit browsers */
background: -moz-linear-gradient(top, #DCDCDC, #64889A); /* for firefox 3.6+ */
width: 100%;
height: 100%;
}
When first building the page I hadn't set a doctype (yes my bad, but it is still in pre-pre-alpha!)
I added <!DOCTYPE html> to my html file, and bam, the background gradient disappears.
It works fine in Chrome and IE. This is only broken in Firefox. I'm using Aurora (13a0.2). If I remove the line -moz-linear-gradient, then it shows the default background color (no gradient).
Am I doing something wrong or is it actually a bug in Firefox?
** UPDATE **
If I give a background-size: 1000px 1000px then it works, somewhat. I would like to give 100% 100% or auto, but that doesn't work. Giving a fixed size means that it is screen resolution dependent.
Your problem is that per spec the gradient sizing box is the box of the element the background style is on. And in standards mode, the height of your body is 0 because you didn't set height: 100% on the <html>. You can see this if you put a border on the body.
Try replacing you css with this variant:
background: -moz-linear-gradient(top, #dcdcdc 0%, #64889a 100%);
The place I go to when I need cross-browser gradient is this: http://www.colorzilla.com/gradient-editor/
How to design
1) a vertical gradient background with unfixed height,
2) a vertical gradient background with fixed height (say 600px, from blue to white to green), then the rest has the same green color?
update
Now the new design is from the top to the bottom, 120px fixed height from blue to white, then unfixed height for white, and then 120px fixed height from white to green. How to code that?
There is a way to do it, you will want to take advantage of the available background properties:
body {
background-color: green;
background-image: linear-gradient(blue, white, green);
background-repeat: no-repeat;
background-size: 100% 600px;
}
Live example: http://jsfiddle.net/sl1dr/PxNhY/
If you want an unfixed height then replace 600px with 100%.
EDIT: Here is the new solution according to your changes: http://jsfiddle.net/sl1dr/EtYLZ/
You can try crossbrowser (ie5.5+) linerar gradient generator
This Link:
Css Gradient From Green To White To Blue
Or you can use this link directly: Gradient Generator for generating cross-browser Css 3.0 Backgrounds.
You can generate Professional gradients and get the code for pasting in your own css file.
You must know that the css may not support some versions of IE