CSS gradients combined with multiple backgrounds

HTML & CSS
1

Hi all, it’s working fine-ish Browsers that support CSS gradients are showing both the gradient and the background image. The problem arises with browsers that should just display 1 background image and the background colour. Can anyone see what’s wrong with this rule? I’ve tried all sorts!


.bgHexagons {
	background-color: #345a99;
	background-image: url(../images/css/backgrounds/hexagons-repeating.png);
	background-image: url(../images/css/backgrounds/hexagons-repeating.png), -webkit-gradient(linear, 0 0, 0 100%, from(#345a99), to(#012745));
	background-image: url(../images/css/backgrounds/hexagons-repeating.png), -moz-linear-gradient(top, #345a99, #012745);
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	color: #fff;
	margin: 0 18px 12px;
	padding: 10px 0;
}

Many thanks

2

Since I don’t see any multiple backgrounds…

Maybe something like this:

.bgHexagons {
    background-color: #345a99;
    background-image: url(../images/css/backgrounds/hexagons-repeating.png);
    background:-webkit-gradient(linear, 0 0, 0 100%, from(#345a99), to(#012745));
    background:-moz-linear-gradient(top, #345a99, #012745);
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    color: #fff;
    margin: 0 18px 12px;
    padding: 10px 0;
}
3

But my version works fine in Webkit and FF. The version you have supplied shows only the gradient on Webkit, FF and then only the hexagons image for others.

I’m not sure it’s obvious but I’m trying to display multiple backgrounds on browsers that support it. The hexagons image file and a CSS gradient.

Then just give an image and background colour to browsers that don’t support CSS gradients.

The problem I’m having is that unsupported browsers aren’t showing any background image at all, only colour.

Thanks so far!

4

My understanding of multiple backgrounds seems to be different from yours: here :slight_smile:

I think I know what your problem is: background-image rule for webkit, mozilla, should be just background:

background: url(../images/css/backgrounds/hexagons-repeating.png), -webkit-gradient(linear, 0 0, 0 100%, from(#345a99), to(#012745));
background: url(../images/css/backgrounds/hexagons-repeating.png), -moz-linear-gradient(top, #345a99, #012745);

One upside for using shorthand rules! And one downside for not using them! :slight_smile: Though you used shorthand for margin and padding.

So your code should look like this:

.bgHexagons {
    background: #345a99 url(../images/css/backgrounds/hexagons-repeating.png);
    background: url(../images/css/backgrounds/hexagons-repeating.png), -webkit-gradient(linear, 0 0, 0 100%, from(#345a99), to(#012745));
    background: url(../images/css/backgrounds/hexagons-repeating.png), -moz-linear-gradient(top, #345a99, #012745);
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    color: #fff;
    margin: 0 18px 12px;
    padding: 10px 0;
}
5

Aaah I see, that works great. Thanks so much!