css - CSS 背景の繰り返し

Question

背景画像を繰り返すのではなく伸ばす方法はありますか?

Answer 1

クロスブラウザー互換の CSS を一切使用していません (background-sizeただし、プロパティはあります)。

これが特定のブラウザに向けられている場合、可能かもしれません。それ以外の場合は、を使用して<img>それを伸ばす必要があります。

最近のブラウザで行う方法は次のとおりです。

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 */
}

それ以外の場合は、次を使用し<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%;
}

Answer 2

CSS3のみ

画像を使用して、その幅と高さを 100% に設定し、z-index を -1 位置に絶対値に設定できます。それはうまくいくかもしれません。

Answer 3

background-size は CSS3 であり、まだサポートされていません。この記事をご覧ください: Web ページで背景画像を引き伸ばす方法

お役に立てれば。

Answer 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

これは画像を伸ばすことはありませんが、画像が繰り返されないようにします。