full screen background html

问题:

I'm trying to show a picture as the background of my website so I'm using the following code

HTML:

<div>
     <img src="images/background.jpg" id="bg" alt="background_image" />
</div>

Css:

#bg {
    width: 100%;
    height: 75%;
    position: absolute;
    z-index: -5000;
}

I was wondering how can I put a limit on how big is the background going to get because I don't want it to stretch more than 2000px.

Thanks

回答1:

Just include max-width in your CSS.

 #bg {
    width: 100%;
    max-width: 2000px;
    height: 75%;
    position: absolute;
    z-index: -5000;
}

回答2:

I would use the following css:

html { 
    background: url(images/bg.jpg) no-repeat center center fixed;

    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

and remove your div entirely.

To limit the size you can:

#bg {
    min-height: 100%;
    max-width: 2000px;
    width: 100%;
    height: auto;
    position: fixed;
    top: 0;
    bottom: 0;
}

回答3:

You can use max-width

#bg {
    width: 100%;
    height: 75%;
    position: absolute;
    z-index: -5000;

    max-width: 2000px; /* use this to limit the maximum width */
}

回答4:

I haven't tested it, but add max-width:2000px; to your #bg selector.

回答5:

try this

#bg {
width: 100%;
height: 100%%;
background-size:100%;
}