1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

How to put a background on a background in CSS?

Discussion in 'Web Design' started by billyd, Oct 24, 2011.

  1. billyd

    billyd Regular Member

    Joined:
    Jun 1, 2010
    Messages:
    223
    Likes Received:
    17
    So I have a background on my website but want to add a gradient background ontop of it to give it some pizzazz.

    So right now this is my background code:

    HTML:
    body {
    
    	background-color: #fff;
    	background-image: url('/images/bg1.gif');
    I want to add a gradiant background which is bg2.gif. The bg1.gif file basically repeats and I want the bg2.gif to be a 1px width and 80px tall file that stretches across.

    How could I accomplish this with my already existing background?
     
  2. jazzc

    jazzc Moderator Staff Member Moderator Jr. VIP

    Joined:
    Jan 27, 2009
    Messages:
    2,468
    Likes Received:
    10,143
    You can't have both color and image on the background of the same element (they don't blend - one prevails).

    My guess is you could have a duplicate element as overlay and play with the alpha channel. But this sounds quite complex and I 've never done it.

    If you are trying to do gradient, try these sites:
    http://gradients.glrzad.com/
    http://www.colorzilla.com/gradient-editor/
     
  3. mrtwister_65

    mrtwister_65 Regular Member

    Joined:
    Dec 30, 2009
    Messages:
    462
    Likes Received:
    534
    Layer the design of your page using z-index in your CSS file.
     
  4. billyd

    billyd Regular Member

    Joined:
    Jun 1, 2010
    Messages:
    223
    Likes Received:
    17
    Wha?

    So the first page is white with a texture background (bg1.gif). It fills the whole page.

    What I want to do is put this gradient (bg2.gif) ontop of the existing page like this.

    [​IMG]
     
    Last edited: Oct 24, 2011
  5. Zapdos

    Zapdos Power Member

    Joined:
    Oct 22, 2011
    Messages:
    597
    Likes Received:
    708
    Location:
    Eastern North Carolina
    Won't work with just css unless you merge the two.

    You could do it in html though..

    Code:
    <style>
    #container-1 {
        background-color: #fff;background-image: url('/images/bg1.gif');
    }
    
    #container-2 {
        background-image: url('/images/bg2.gif');
    }
    </style>
    
    <div id="container-1">
      <div id="container-2">
         <!-- Your content here -->
      </div>
    </div>
    
     
  6. derf724662

    derf724662 Newbie

    Joined:
    Feb 11, 2010
    Messages:
    16
    Likes Received:
    7
    Use your textured background image on your body tag, then create a translucent PNG file and use it on your wrapper. This way they can over lap and get the effect i think you looking for.
     
  7. alfadomino

    alfadomino Registered Member

    Joined:
    Oct 3, 2011
    Messages:
    53
    Likes Received:
    25
    One way to do this is to put the gradient on top of the textured-white background, then fade the whole background to white using the gradient tool. You can then use CSS to repeat the background vertically.
     
  8. winordietrying

    winordietrying Junior Member

    Joined:
    Sep 10, 2011
    Messages:
    107
    Likes Received:
    195
    Occupation:
    IM/SEO
    Location:
    BHW
    Why don't you just merge the two backgrounds in photoshop and then use a single image as a background?

    I already did this for you. Here you go..
    merged.jpg
     
  9. winordietrying

    winordietrying Junior Member

    Joined:
    Sep 10, 2011
    Messages:
    107
    Likes Received:
    195
    Occupation:
    IM/SEO
    Location:
    BHW
    You will also need this image:
    bg-repeat.gif

    And here's the HTML code to make the background repeat:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Background With Pattern</title>
    
    <style>
    #top-bg
    {
    	top:0px;
    	left:0px;
    	background-image:url("merged.jpg");
    	background-repeat:repeat-x;
    	background-position:bottom;	
    	min-width: 100%;
    	min-height: 100%;
    	position:absolute;
    	z-index:1;	
    	margin:0;
    	padding:0;
    	border:0;
    }
    body{
    	background-image:url("bg-repeat.gif");
    	background-repeat:repeat;
    	min-width: 100%;
    	min-height: 100%;
    	margin:0;
    	padding:0;
    	border:0;
    }
    
    #content
    {
    	padding: 7px;	
    }
    
    </style>
    </head>
    
    <body>
    <div id="top-bg">
    	<div id="content">
    	    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur aliquam porta felis commodo feugiat. Sed molestie, leo quis vehicula tristique, risus sapien rutrum neque, nec mattis libero eros quis mi. Curabitur eget mi in ante tristique auctor posuere vel neque. Nam scelerisque luctus augue eu commodo. Sed vel velit sem. Curabitur id nibh eget neque blandit lacinia sed nec orci. Integer ultrices nibh dolor, at auctor quam. Vivamus eget sapien at lectus rutrum ornare eget tincidunt velit. Phasellus quam enim, faucibus vitae lacinia id, rutrum id odio. Vestibulum id eleifend sem.</p>
    	    <p>Ut id odio nibh. Duis turpis ante, viverra vel cursus vel, scelerisque et enim. Duis vel leo non mauris rhoncus consequat vitae sit amet sem. Vestibulum laoreet felis eget felis volutpat tincidunt. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent nec lorem non mi tincidunt facilisis. Suspendisse potenti. Ut in urna mi. Cras euismod urna at ipsum mattis tempor. Etiam a eros nulla, id molestie magna. In hac habitasse platea dictumst. Quisque dapibus augue sit amet urna blandit cursus.</p>
    	    <p>Suspendisse auctor, nibh nec bibendum hendrerit, mi nunc lacinia neque, vel fringilla dolor nulla quis metus. Praesent pulvinar orci ac nunc interdum mollis. Vivamus convallis, nisi vitae tempor porta, lorem magna feugiat mauris, ac mollis urna eros ut ipsum. Pellentesque suscipit tellus ut nibh interdum ut ullamcorper mi fermentum. Quisque eu urna justo. Donec accumsan, nulla sed vulputate tristique, neque nulla dapibus velit, ut aliquam lorem tellus a sem. Ut sollicitudin tempus dolor, in aliquet nulla porttitor nec. Pellentesque dignissim urna nec nibh sagittis pretium. Aenean vehicula pharetra diam, at facilisis odio mollis quis.</p>
    	    <p>Curabitur eget tortor leo. Suspendisse bibendum dapibus purus, eget malesuada felis luctus vel. Suspendisse id leo enim. Aenean dictum ultricies augue. Sed lacinia gravida metus, tempor pharetra elit viverra at. Curabitur viverra consectetur justo, nec sodales purus viverra ut. Nunc orci velit, accumsan nec placerat a, eleifend at libero. Praesent non ipsum tempus odio convallis faucibus. Fusce a nisl dolor, in feugiat nibh. Donec accumsan enim at risus mattis sit amet ultricies quam luctus.</p>
    	    <p>Pellentesque dolor nisl, molestie ac dictum et, cursus et arcu. Vivamus libero ligula, consequat id sodales in, lobortis non nulla. Proin nunc arcu, lobortis at sollicitudin eu, fermentum et felis. Aliquam et condimentum nisl. Proin a quam vel diam condimentum adipiscing a sit amet nulla. Morbi id suscipit nunc. Vestibulum ullamcorper faucibus nisl, ut pretium enim rhoncus sed. Suspendisse fermentum volutpat mattis.</p>
    	</div>
    </div>
    
    
    </body>
    </html>
    
    And here's the final result in the browser:
    [​IMG]
     
    Last edited: Nov 6, 2011
  10. winordietrying

    winordietrying Junior Member

    Joined:
    Sep 10, 2011
    Messages:
    107
    Likes Received:
    195
    Occupation:
    IM/SEO
    Location:
    BHW
    Good one! So many different ways to achieve the same thing :)
     
  11. billyd

    billyd Regular Member

    Joined:
    Jun 1, 2010
    Messages:
    223
    Likes Received:
    17
    What I am wondering is, can I do the above?