CODEWITHSUNDEEP
cssbackground
PathOfNeo
PathOfNeo

Reputation: 1089

Multiple background image css question

I have a pattern background image that is repeating itself on the body tag The image is 256x256 pixels. 

body {  
   font: 12px/1.4 Helvetica, sans-serif; 
   color: #fff; 
   background-image: url("img/bg1.jpg");
   background-repeat:repeat;
}

#bg2{
   ?
}

#wrap{
   width:960px;
   margin:0 auto;
}

Then i'v got a second image, which i want to be fixed in the center of the screen overlapping the body image. This image is the second bacground image, it does not need to repeat itselft. Dimensions: 400x800px.

This 2nd image looks the same as the first on the edges, but has some lightning in the middle, so you sea, i need maybe some sort of transparency.

The HTML: 

<body>
        <div id="wrap">

        <div id="bg2">..here comes the 2nd bkground image..</div>

        ....content
    </div>
</body>

Problem is, multiple bacground image is not so easy to acomplish. Can somebody help?

Upvotes: 0

Views: 293

Answers (1)

grc
grc

Reputation: 23585

Try something like this:

#bg2 {
    position: absolute;
    height: 100%;
    width: 100%;
    background: url('img/bg2.jpg') no-repeat fixed center;

    /* IE transparency */
    filter: alpha(opacity=60);

    /* standard transparency */
    opacity: 0.6;
}

Upvotes: 1

Related Questions