2016-06-15 12 views
0

ホームページの "メイン"部分の背景(黒でマークされている)は黒であるべきですが、画像のために見えません。これは私のコードです:私の体の背景色が来る前に、背景画像の前に

body { 
    color: white; 
    font-family: futura; 
    background-color: black; 
    font-size: 15px; 
    max-width: 700px; 
    margin-left: auto; 
    margin-right: auto; 
    background: url(Website_Bilder/background.png) 
    no-repeat center center fixed; 
    -moz-background-size: cover; 
    background-size: cover; 
} 

head { 
    font-size: 30px; 
    display: block; 
    position:relative; 
    background-position: center; 
    background-size: cover; 
    background-attachment: fixed; 
    text-align: center; 
} 

section { 
    font-size: 15px solid #a0a0a0; 
    border: 50px; 
    padding: 0%; 
    clear: ; 
    margin: 1em auto; 
} 

ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    background-color: #333; 
} 

li { 
    float: left; 
} 

li a { 
    display: block; 
    color: white; 
    text-align: center; 
    padding: 14px 16px; 
    text-decoration: none; 
} 

/* link color */ 
li a:hover { 
    background-color: #111; 
} 

img { 
    width: 100%; 
    float: center; 
    height: auto; 
    max-width:100%; 
    display: block; 
    margin: 1em auto; 

    left:0px; 
    top:100px; 
    z-index:-1; 
} 

p { 
    padding 10px 20px 10px 20px; 
    margin 20px; 
} 

、これは私が得るものです:

rendered web page

/私はより良いスクリーンショットを作り、私が正しくあなたを理解する場合にはより多くのコード

+1

背景画像を使用します。そうでない場合、背景色は画像のルールに含まれていない場合はnoneにリセットされます。 –

+0

背景画像にはすべて青色の画像がありますか? –

+1

コードをいくつか表示することができますので、自分自身で問題を確認できます。今は完全にはわかりませんが、解決策はスタイルの一部を 'body'から' html'に移動することだと思います。 –

答えて

0

を追加します:あなたの赤のボーダーになっている領域を、あなたのCSSボディセレクタの背景として定義されているイメージの代わりに黒の背景にしたいのですか?

html, body { 
 
\t height: 100%; 
 
\t width: 100%; 
 
} 
 

 
body { 
 
    color: white; 
 
    font-family: futura; 
 
    background-color: black; 
 
    font-size: 15px; 
 
    max-width: 700px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    background: url(http://tub.tubgit.com/reimg/resize-img.php?src=http://photos.up-wallpaper.com/images251/jdicnfzws24.jpg&h=1080&w=1920) 
 
    no-repeat center center fixed; 
 
    -moz-background-size: cover; 
 
    background-size: cover; 
 
} 
 

 
div.redArea { 
 
\t min-width: 70%; 
 
\t height: 100%; 
 
\t background-color: black; 
 
\t text-align: center; 
 
}
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <link href="style.css" type="text/css" rel="stylesheet"> 
 
</head> 
 
<body> 
 
\t <div class="redArea"> 
 
\t \t <p>this is a test</p> 
 
\t </div> 
 
</body> 
 
</html>

redAreaクラスの幅が最小 - として定義する必要があります。これは次のように次に、あなただけの、この領域を取り囲んでhtmlタグのための新しいCSSクラス/ IDを定義する必要がありますボディーセレクターの最大幅を700pxに設定しているためです。

関連する問題