CSS Background Repeat | 易学教程

问题

Is there any way to make a background image stretch rather than repeat?

回答1:

Not using any kind of cross-browser compatible CSS (there is the background-size property however.)

If this is directed at any browser in particular, it might be possible. Otherwise, you'll need to use an <img> and stretch that.

Here's how you do it in recent browsers:

body {
    background-image: url(bg.jpg);
    -moz-background-size: 100% 100%;     /* Gecko 1.9.2 (Firefox 3.6) */
    -o-background-size: 100% 100%;       /* Opera 9.5 */
    -webkit-background-size: 100% 100%;  /* Safari 3.0 */
    -khtml-background-size: 100% 100%;   /* Konqueror 3.5.4 */
}

Otherwise, using an <img>:

img#background {
    /* height: 100%; Note: to keep ratio, don't use height */
    left: 0;
    position: fixed; /* or absolute, if you like */
    top: 0;
    z-index: -1;
    width: 100%;
}

回答2:

Only in CSS3

You could use an image and set it's width and height to 100%, z-index to -1 position to absolute. That might work.

回答3:

background-size is CSS3 and not supported yet. You could take a look at this article: How Do you Stretch a Background Image in a Web Page

Hope this helps.

回答4:

body
{ 
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center; 
}

http://www.w3schools.com/css/css_background.asp

This will not streach your image, but it will make the image not to repeat.

来源：https://stackoverflow.com/questions/1277330/css-background-repeat

标签

css

background

repeat