divを画像の内側にオーバーレイするにはどうすればいいですか？

Question

画面全体をカバーするイメージがあると、その画像の中央にロゴと実際のウェブサイトにユーザーを取るためのリンクがあるだろう。ここで、iは、ホームページを作成しています。

すべて正常に動作していますが、画像とリンクが自動的に画像の下に移動して修正が見つかりません。それはあなたがその多くのコードを必要としないページに表示したいコンテンツだけである場合は

#homebackground{ 
    width:100%; 
    height:auto; 
    position:relative; 
} 

#homebackgroundimage{ 
    width:100%; 
    height:auto; 
    position:relative; 
    display:block; 
} 

#entersite{ 
    margin:auto; 
    text-align:center; 
    width:50%; 
    height:50%; 
    position:absolute; z-index:-1; 
} 

#logohome{ 
    max-width:15%; 
    max-height:15%; 
    margin:auto; 
    position:absolute; 
    z-index:1; 
    top:0; 
    left:0; 
} 

#entersitelink{ 
    z-index:1; 
    position:absolute; 
    text-align:center; 
} 

Answer 1

：

<div id="homebackground"> 
    <img src="img/home.jpg" id="homebackgroundimage" alt="homebackgroundimage"> 
    <div id="entersite"> 
     <img src="img/dignanslogo.jpg" id="logohome" alt="dignans-logo"><br /> 
     <a href="about.html" id="entersitelink">Enter Site</a> 
    </div> 
</div> 

はここに私のCSSです：

は、ここに私のhtmlです。 1つのコンテナに背景イメージとロゴとリンクを追加できます。

.container{ 
 
    width: 100%; 
 
    height: 100vh; 
 
    background-image: url("here go url for background image"); 
 
    background-size: cover; 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: center; 
 
    align-items: center; 
 
    }

<div id="container"> 
 
    <img src="img/dignanslogo.jpg" id="logohome" alt="dignans-logo"> 
 
    <a href="about.html" id="entersitelink">Enter Site</a> 
 
</div>

今、あなたは絶対位置とzインデックスを台無しにする必要はありません。また、デフォルトのスタイルに満足していない場合は、イメージのスタイルを設定し、リンクする必要があります。あなたは、親のdivと内側のdivに絶対位置に背景を与えるとCSSを改善する必要がする必要が

Answer 2

...今

#homebackground{ 
 
    width:100%; 
 
    height:100vh; 
 
    position:relative; 
 
    background:url('https://dummyimage.com/600x400/000/fff') no-repeat center center; 
 
    background-size:cover; 
 
} 
 

 
#homebackgroundimage{ 
 
    width:100%; 
 
    height:auto; 
 
    position:relative; 
 
    display:block; 
 
} 
 

 
#entersite{ 
 
    margin:auto; 
 
    text-align:center; 
 
    width:50%; 
 
    height:50%; 
 
    top:50%;left:50%;transform:translate(-50%,-50%); 
 
    position:absolute; 
 
    z-index:9; 
 
} 
 

 
#logohome{ 
 
    margin:auto; 
 
    width:250px; 
 
    height:150px; 
 
} 
 

 
#entersitelink{ 
 
    z-index:1; 
 
    text-align:center; 
 
}

<div id="homebackground"> 
 
    <div id="entersite"> 
 
     <img src="https://www.google.co.in/logos/doodles/2017/hirotugu-akaikes-90th-birthday-5767291382792192-l.png" id="logohome" alt="dignans-logo"><br /> 
 
     <a href="about.html" id="entersitelink">Enter Site</a> 
 
    </div> 
 
</div>

をチェック