當我設置身體背景時隱藏頭部

這是我正在使用的代碼。我想要設置一個帶圖像背景的標題，但是當我設置正文背景時，它會消失：S。我做錯了什麼？當我設置身體背景時隱藏頭部

<body> 
<div id="bg"> 
    <img src="img/bodyBackground.png"> 
</div> 

<header> 
    <div class="container"> 
     <h1>Bienvenidos a JVasconcelos.me</h1> 
    </div> 
</header> 
</body>

這僅僅是HTML代碼，這裏是我使用的CSS：

#bg { position: fixed; top: -50%; left: -50%; width: 200%; height: 200%; } 
#bg img { position: absolute; top: 0; left: 0; right: 0; bottom: 0;  margin: auto; min-width: 50%; min-height: 50%; }

來源

2016-05-31 Jose Antonio

爲什麼'top：-50％'和'left：-50％'？ – Chris

身體添加背景圖片的CSS，它會顯示出來。

然後，您可以設置一個新的背景圖像與CSS {標題{背景：url（x）no-repeat; }

#bg { position: fixed; top: -50%; left: -50%; width: 200%; height: 200%; } 
 
body { 
 
    background: url('http://www.gettyimages.pt/gi-resources/images/Homepage/Hero/PT/PT_hero_42_153645159.jpg') no-repeat; 
 
    } 
 
#bg img { position: absolute; top: 0; left: 0; right: 0; bottom: 0;  margin: auto; min-width: 50%; min-height: 50%; } 
 
header { background: url('http://www.nasa.gov/sites/default/files/styles/image_card_4x3_ratio/public/thumbnails/image/hubble_friday_03042016.jpg?itok=j1kZCJ51') no-repeat; }

<body> 
 

 
<header> 
 
    <div class="container"> 
 
     <h1>Bienvenidos a JVasconcelos.me</h1> 
 
    </div> 
 
</header> 
 
    
 
    </body>

來源

2016-05-31 14:02:48

這一個很好，但現在的背景圖像與背景不一樣大。編輯：固定使用'body {background：url（「../ img/bodyBackground.png」）no-repeat center center fixed; }' –

是的，只是我使用的圖像。如果你想重複一遍，你也可以不用重複，但我會把它當作你的中心。 –

，而不是手動調節你的IMG成爲你的頭一個研究背景，你爲什麼不使用這個標記設置背景圖片？ header{ background-image: url("img/bodyBackground.png") }

來源

2016-05-31 14:03:30

這個答案適用於如果你想保持你的標記的方式。

這是因爲標題隱藏在背景後面。你會想要設置z-index。因此，請將z-index: 0;添加到您的#bg。然後將以下樣式添加到您的標題中：

position: relative; 
z-index: 1;

來源

2016-05-31 14:06:41

不需要z-index，是足夠的位置 – blonfu

當我設置身體背景時隱藏頭部

回答

相關問題