Multiple background image css question_问答_开发者

开发者 https://www.devze.com 2023-03-04 02:25 出处：网络

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

相关专题：background css

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 th开发者_高级运维e 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?

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;
}