CODEWITHSUNDEEP
css
Blake
Blake

Reputation: 762

How do I use both a CSS3 gradient and a background image

I've seen a million people do it, but I haven't been able to get it to work. 

background: -webkit-linear-gradient(left top, black, #333333 85%, gray), url('/img/helix.png');

I've tried with the order reversed and with background-image, still nothing.

I saw one person use: 

body:before {
content: " ";
width: 100%;
height: 100%;
position: absolute;
z-index: -1;
top: 0;
left: 0;
background: -webkit-linear-gradient(left top, black, #333333 85%, gray);
}

But there has to be a better way...

Updated code:

In an ID for the image div:

height: 100%;
width: 100%;
background: transparent url('/img/helix-white.png') no-repeat;

In the CSS for the body element: 

background: -webkit-linear-gradient(left top, black, #333333 85%, gray);
background: -moz-linear-gradient(left top, black, #333333 85%, gray);
background: -ms-linear-gradient(left top, black, #333333 85%, gray);
background: -o-linear-gradient(left top, black, #333333 85%, gray);
background: linear-gradient(left top, black, #333333 85%, gray);

Update 2:

I used a div with the image in it with CSS for positioning:

<div id="backgroundImage">
    <img src="img/helix-white.png" alt=" " />
    </div>


#backgroundImage
    {
        position: fixed;
        bottom: 10%;
        left: 7%;

        opacity:0.4;
        filter:alpha(opacity=40);

        -webkit-transform: rotateZ(20deg);
        -moz-transform: rotateZ(20deg);
        -ms-transform: rotateZ(20deg);
        -o-transform: rotateZ(20deg);
        transform: rotateZ(20deg);
    }

And in the body CSS for the gradient: 

height: 100%;

background: -webkit-linear-gradient(left top, black, #333333 85%, gray);
background: -moz-linear-gradient(left top, black, #333333 85%, gray);
background: -ms-linear-gradient(left top, black, #333333 85%, gray);
background: -o-linear-gradient(left top, black, #333333 85%, gray);
background: linear-gradient(left top, black, #333333 85%, gray);

Upvotes: 0

Views: 467

Answers (2)

kelly johnson
kelly johnson

Reputation: 1636

as mentioned, be sure you're checking your stuff in either Safari or an older version of Chrome. They both use(d) webkit as the rendering engine.

Upvotes: 0

CaribouCode
CaribouCode

Reputation: 14428

Why not have a div with the background gradient then another div inside with a background image. If the background image is a .png with transparency or doesn't fill the div, you'll be able to see the gradient behind it.

e.g.

<div id="gradient">
  <div id="image">
    Your content here.
  </div>
</div>

CSS

#gradient {
  background: -webkit-linear-gradient(left top, black, #333333 85%, gray); }

#image {
  background: transparent url('your image here') center center no-repeat; }

On another note, you should use a full range of gradient options to support all browsers (not just webkit). I'd recommend using a CSS3 gradient generator for the code: http://www.colorzilla.com/gradient-editor/

Upvotes: 1

Related Questions