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.
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 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
}
I've tried to do this various different ways, but have had no success so far.
Essentially what I want is a gradient going down the page (which I am using a background image for), then once the image ends, I want a background colour to take over (so that the page doesn't just turn white).
I've tried messing around with using different div tags and the like to layer things etc, but have had no luck so far. Either the background colour overrides the image, or the colour doesn't extend to the bottom of the page.
You could just use a background for your body:
body {
/* Your gradient image */
background-image: url(my_gradient.png);
/* Color below the background image */
background-color: #C0FFEE;
/* Only repeat from left to right */
background-repeat: repeat-x;
}
Or use the background shorthand
body {
background:#C0FFEE url('my_gradient.png') repeat-x left top;
}
You probably want to do something like this:
body
{
background: #FFCC00 url('your-background.png') repeat-x;
}
Try something like this:
http://jsfiddle.net/pUKeT/
body{
background: blue url(http://www.laserasecroydon.com/assets/images/blue-gradient.jpg) no-repeat fixed left top;
}
It's not pretty, but this way you can see where the color should take over
body{
background:url("image.jpg") #COLOR no-repeat;
}
Thanks guys, I've worked it out. The CSS I was using was fine, it was the image that was the problem. Instead of setting the background to white, it was transparent. Hence the colour came through and overrode the gradient. I've now set the background to white, and it works fine.
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
I am trying to create a button using CSS Gradients plus a icon that goes on top of the gradient. I tried 2 ways and both was a failure.
First:
.btn {
background: -webkit-gradient(linear, 0% 0%, 0% 89%, from(#3171CA), to(#15396F));
background: url(../images/btn.png);
}
I should of knew that wouldn't of worked! But I also heard about CSS3 multiple background images, so I tried it that way.
Second:
.btn {
background: -webkit-gradient(linear, 0% 0%, 0% 89%, from(#3171CA), to(#15396F)), url(../images/btn.png);
}
Still didn't work :(. Is there any way to actually do this? With adding a <img> tag in the <button>?
only webkit browsers allow multiple background effects (CSS3) .. generally speaking you can have a gradient OR and image but you can't have both (yet)
you could overlay 2 divs tho and have the image for the topmost be transparent PNG or such
I think it'd be better and more compatible if you just put the gradient and button together in the same image, but if it's not practical in your situation, you can achieve the same effect using multiple divs:
<div style="width:256px; height:256px; background:-webkit-gradient(linear, 0% 0%, 0% 89%, from(#3171CA), to(#15396F));">
<div style="width:100%; height:100%; background:url('btn.png') "></div></div>
Make sure you change the width/height parameters I set if you use mine.
Hi to all :) I've been trying the png transparancy layering / css3 gradient technique for a while and accross the browsers this seems to be most reliable:
background:url(images/bkgd1.png) top center repeat-x, url(images/bkgd2.png) top right repeat-x, -moz-linear-gradient(top, #F3F704 0%, #FFFFFF 100%);
background:url(images/bkgd1.png) top center repeat-x, url(images/bkgd2.png) top right repeat-x, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F3F704), color-stop(100%,#FFFFFF));
I hope this helps anyone even if just one person then i'll be smiley all day today :)
You should use your first example, but reverse the lines so that the image is applied before the gradient. All browsers will get a background image, but only browsers that understand -webkit-gradient will use the gradient. All others will ignore it.
.btn {
background: url(…);
background: -webkit-gradient(…);
}
You could flatten your icon onto a gradient background meaning you'd only need to set the background-image. Other than that, I think you're going to have to put an tag (or a container with the image as background) inside your gradient-ified container.