Image over a gradient background

[Konnor]

I’m struggling to think of the best way to overlay an image on a CSS gradient background

My markup is this…

From the Blog

So I can style the h3 class with the gradient background, then ideally adjust the image within/above.

My CSS is….

#mainContent .columnRight h3.sidebarHeader {

padding: 0px 10px 10px 0;



/****CSS Gradients****/

background-color: #bf0005;

background-image: url('../img/sidebarHeaderBackground.jpg');

background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#202020), to(#bf0005));

background-image: -webkit-linear-gradient(left, #202020, #bf0005);

background-image:    -moz-linear-gradient(left, #202020, #bf0005);

background-image:     -ms-linear-gradient(left, #202020, #bf0005);

background-image:      -o-linear-gradient(left, #202020, #bf0005);

}



#mainContent .columnRight h3.sidebarHeader img {



}

Which gives me this result….

http://img205.imageshack.us/img205/639/fromtheblog.jpg

I don’t understand why the text seemingly has padding on the top compared to the image next to it? I specified 0 top padding.

Is there a better way to do this? To stack images on top of each other? I tried adding a second class to my h3 tag but it only showed one background.

Many thanks!

[Senff]

I have no idea what the background image looks like (so don’t know what you want this to look like), but give the image within the H3 float:left, that should get rid of the text being a little too low.

[jstam]

Here’s how I would approach this: http://jsfiddle.net/jstam/CZFLA/

I basically remove the image from markup entirely and drop it back in as an additional background image layer over the gradient declarations.

h3 {

background-color: #bf0005;

background-image: url(https://www.google.com/logos/classicplus.png),

-webkit-gradient(linear, 0% 0%, 0% 100%, from(#202020), to(#bf0005));

background-image: url(https://www.google.com/logos/classicplus.png),

-webkit-linear-gradient(left, #202020, #bf0005);

background-image: url(https://www.google.com/logos/classicplus.png),

-moz-linear-gradient(left, #202020, #bf0005);

background-image: url(https://www.google.com/logos/classicplus.png),

-ms-linear-gradient(left, #202020, #bf0005);

background-image: url(https://www.google.com/logos/classicplus.png),

-o-linear-gradient(left, #202020, #bf0005);

background-image: url(https://www.google.com/logos/classicplus.png),

linear-gradient(left, #202020, #bf0005);

background-repeat: no-repeat, repeat;

background-position: right top, left top;

}

If padding around the transparent PNG is still a concern, you could play with the positioning (maybe something like “80% 50%” instead of “right top”).

Hope this helps!

[xpy]

You probably just need to play with vertical-align to both .sidebarHeader and . sidebarHeader img .

[Konnor]

@jstam Thanks

Your method does keep the markup quite clean, although it doesn’t fully work in IE.

After some googling I found the following ‘hack’ for a left to right gradient in IE…

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#202020, endColorstr=#bf0005, GradientType=1)";

….but there is no option to specify a background-image and layer my chilli icon on top. As far as I know….

[Author]

Posts