CSS: Background on another Background?

Discussion in 'HTML & Website Design' started by razz.jazz, Oct 23, 2011.

0
  1. #1
    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 Code:
    body {

	background-color: #fff;
	background-image: url('/images/bg1.gif');
    HTML:
    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?
     
    razz.jazz, Oct 23, 2011 IP
  2. IAreOwn

    IAreOwn Active Member

    Messages:
    46
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    95
    #2
    add another div on your html page e.g
    <body>
    <div id="myouterdiv">


    </div>
    </body>

    then style it with your bg2.gif

    #myouterdiv
    {
    width:100%;
    background:url('/images/bg2.gif') repeat-x;
    }
     
    IAreOwn, Oct 23, 2011 IP
  3. razz.jazz

    razz.jazz Peon

    Messages:
    181
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Anyway to do this in the CSS?
     
    razz.jazz, Oct 23, 2011 IP
  4. IAreOwn

    IAreOwn Active Member

    Messages:
    46
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    95
    #4
    yes you can, open your stylesheet/css add this code

    
#myouterdiv
{
    width:100%
    background:url('/images/bg2.gif') repeat-x;
}
    Code (markup):
    then edit your html page, index.html etc. whatever it is..
    find
    <body>
    and add after this code
    
<div id="myouterdiv">
    Code (markup):
    find </body>
    add before
    
</div>
    Code (markup):
     
    IAreOwn, Oct 23, 2011 IP