The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Image over a gradient background

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #37443

    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 ImageFrom 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….

    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!


    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.


    Here’s how I would approach this:

    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(,
    -webkit-gradient(linear, 0% 0%, 0% 100%, from(#202020), to(#bf0005));
    background-image: url(,
    -webkit-linear-gradient(left, #202020, #bf0005);
    background-image: url(,
    -moz-linear-gradient(left, #202020, #bf0005);
    background-image: url(,
    -ms-linear-gradient(left, #202020, #bf0005);
    background-image: url(,
    -o-linear-gradient(left, #202020, #bf0005);
    background-image: url(,
    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!


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


    @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….

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.