2017-12-19 24 views
0

お願いします!どのように完全な長方形の背景画像をアップロードできますか?私の間違いはどこにあるの?ここに私のイメージがあります。助けてください。みなさん、こんにちは!お願い助けて!どのように完全な長方形の背景画像をアップロードできますか?私の間違いはどこにあるの?ここに私のイメージがあります。助けてください。長方形の背景イメージを設定する

enter image description here

body { 
 
\t font: 1.5em Arial; 
 
} 
 
.container1 { 
 

 
\t background-image: url(prague3.jpeg); 
 
\t margin: 
 
\t width: 
 
\t background-size: 
 
} 
 
.top { 
 
\t opacity: 0.8; 
 
\t font-size:65px; 
 
\t font-family: Courier new; 
 
\t text-align: center; 
 
\t background: #EBA23C; 
 
\t width: 100%; 
 
} 
 
ul { 
 
\t float: left; 
 
\t padding: 0px; 
 
\t list-style: none; 
 
} 
 
ul li { 
 
\t float: left; 
 
\t width: 200px; 
 
\t height: 40px; 
 
\t background-color: #F05050; 
 
\t text-align: center; 
 
\t font-size: 20px; 
 
\t line-height: 40px; 
 
\t margin-right: 2px; 
 
} 
 
ul li a { 
 
\t text-decoration: none; 
 
\t color: white; 
 
\t display: block; 
 
} 
 
ul li a:hover { 
 
\t position: relative; 
 
\t z-index: 1; 
 
\t background-color: #C6AEF0; 
 
} 
 
ul li:hover ul { 
 
\t position: relative; 
 
\t z-index: 1; 
 
} 
 
ul li ul li{ 
 
\t opacity: 0.9; 
 
\t display: none; 
 
} 
 
ul li:hover ul li { 
 
\t display:block; 
 
} 
 

 
.container2 { 
 
\t background-color: #ccc; 
 
\t width: 650px; 
 
\t margin-left: 500px; 
 
\t margin-top: 50px; 
 
\t font-size: 50px; 
 
\t font-family: Courier New; 
 
\t opacity: 0.7; 
 
\t text-align: center; 
 
\t border: dashed; 
 
} 
 
.container3 { 
 
background-color: #ccc; 
 
\t width: 650px; 
 
\t margin-left: 500px; 
 
\t margin-top: 50px; 
 
\t font-size: 50px; 
 
\t font-family: Courier New; 
 
\t opacity: 0.7; 
 
\t text-align: center; 
 
\t border: dashed; 
 
}
<html> 
 
<meta charset="utf-8"> 
 
<title>Home page</title> 
 
<link rel="stylesheet" href="style.css"> 
 
<div class="container1"> 
 
<div class="top">Study in Czech Republic</div> 
 
<ul> 
 
<li><a>Home</a></li> 
 
<li><a>News</a></li> 
 
<li><a>Czech Republic</a> 
 
     <ul> 
 
<li><a>Facts and figures</a></li> 
 
<li><a>Area</a></li> 
 
<li><a>Climate</a></li> 
 
     </ul> 
 
\t </li> 
 
<li><a>Study</a> 
 
     <ul> 
 
<li><a>How to apply</a></li> 
 
<li><a>Programmes</a></li> 
 
<li><a>Scholarships</a></li> 
 
<li><a>Tuition fees</a></li> 
 
     </ul> 
 
\t </li> 
 
<li><a>Living</a> 
 
     <ul> 
 
<li><a>Arrival</a></li> 
 
<li><a>Living costs</a></li> 
 
<li><a>Work</a></li> 
 
     </ul> 
 
\t </li> 
 
\t <li><a>Contact</a></li> 
 
</ul><br><br> 
 
<div class="container2"> 
 
EXPERIENCE STUDYING IN THE HEART OF EUROPE 
 
</div><br><br><br<br><br><br><br><br><br><br> 
 
<div class="container3">gdfgdfgdfg</div> 
 

 

 
</html>

+0

私にはよさそうですか?あなたはどういう意味ですか:*完全な矩形の背景画像* - どこにあり、どれくらいの大きさですか?たぶん、あなたは 'background-size:contains;'または 'background-size:cover;'を探しています。 https://css-tricks.com/almanac/properties/b/background-size/ –

+0

このサイトの背景イメージを見てください(例です)。https://www.bachelorsportal.com/countries/7/ czech-republic.html。 – Parviz

+0

それはあなたが '.container2'のために何をしたいのですか? –

答えて

0

コンテナに適切な高さと幅を与えるよりも、背景イメージに表示させたいコンテナに正しいURLを追加する必要があります。

body { 
 
\t font: 1.5em Arial; 
 
     margin: 0; 
 
} 
 

 
.container1 { 
 

 
     background-image: url(https://i.stack.imgur.com/iWvFK.jpg); 
 
     background-position: center; 
 
     background-size: cover; 
 
     height: 50vh; 
 
\t width: 100%; 
 
} 
 
.top { 
 
\t opacity: 0.8; 
 
\t font-size:65px; 
 
\t font-family: Courier new; 
 
\t text-align: center; 
 
\t background: #EBA23C; 
 
\t width: 100%; 
 
} 
 
ul { 
 
\t float: left; 
 
\t padding: 0px; 
 
\t list-style: none; 
 
} 
 
ul li { 
 
\t float: left; 
 
\t width: 200px; 
 
\t height: 40px; 
 
\t background-color: #F05050; 
 
\t text-align: center; 
 
\t font-size: 20px; 
 
\t line-height: 40px; 
 
\t margin-right: 2px; 
 
} 
 
ul li a { 
 
\t text-decoration: none; 
 
\t color: white; 
 
\t display: block; 
 
} 
 
ul li a:hover { 
 
\t position: relative; 
 
\t z-index: 1; 
 
\t background-color: #C6AEF0; 
 
} 
 
ul li:hover ul { 
 
\t position: relative; 
 
\t z-index: 1; 
 
} 
 
ul li ul li{ 
 
\t opacity: 0.9; 
 
\t display: none; 
 
} 
 
ul li:hover ul li { 
 
\t display:block; 
 
} 
 

 
.container2 { 
 
\t background-color: #ccc; 
 
\t width: 650px; 
 
\t margin-left: 500px; 
 
\t margin-top: 50px; 
 
\t font-size: 50px; 
 
\t font-family: Courier New; 
 
\t opacity: 0.7; 
 
\t text-align: center; 
 
\t border: dashed; 
 
} 
 
.container3 { 
 
background-color: #ccc; 
 
\t width: 650px; 
 
\t margin-left: 500px; 
 
\t margin-top: 50px; 
 
\t font-size: 50px; 
 
\t font-family: Courier New; 
 
\t opacity: 0.7; 
 
\t text-align: center; 
 
\t border: dashed; 
 
}
<html> 
 
<meta charset="utf-8"> 
 
<title>Home page</title> 
 
<link rel="stylesheet" href="style.css"> 
 
<div class="container1"> 
 
<div class="top">Study in Czech Republic</div> 
 
<ul> 
 
<li><a>Home</a></li> 
 
<li><a>News</a></li> 
 
<li><a>Czech Republic</a> 
 
     <ul> 
 
<li><a>Facts and figures</a></li> 
 
<li><a>Area</a></li> 
 
<li><a>Climate</a></li> 
 
     </ul> 
 
\t </li> 
 
<li><a>Study</a> 
 
     <ul> 
 
<li><a>How to apply</a></li> 
 
<li><a>Programmes</a></li> 
 
<li><a>Scholarships</a></li> 
 
<li><a>Tuition fees</a></li> 
 
     </ul> 
 
\t </li> 
 
<li><a>Living</a> 
 
     <ul> 
 
<li><a>Arrival</a></li> 
 
<li><a>Living costs</a></li> 
 
<li><a>Work</a></li> 
 
     </ul> 
 
\t </li> 
 
\t <li><a>Contact</a></li> 
 
</ul><br><br> 
 
<div class="container2"> 
 
EXPERIENCE STUDYING IN THE HEART OF EUROPE 
 
</div><br><br><br<br><br><br><br><br><br><br> 
 
<div class="container3">gdfgdfgdfg</div> 
 

 

 
</html>

+1

ありがとうございました! – Parviz

+0

いつでも、解答が解決されれば、この解答を正しいものとして受け入れてください。 –

1

CSSの体に背景画像のプロパティにURLを追加し、それがどのようなことができるに適合させるためにカバーするために、バックグラウンド・サイズと位置のセンターを設定します。

body { 
 
\t font: 1.5em Arial; 
 
    background-image: url(https://i.stack.imgur.com/iWvFK.jpg); 
 
    background-position: center; 
 
    background-size: cover; 
 
} 
 
.container1 { 
 

 
\t background-image: url(prague3.jpeg); 
 
\t margin: 
 
\t width: 
 
\t background-size: 
 
} 
 
.top { 
 
\t opacity: 0.8; 
 
\t font-size:65px; 
 
\t font-family: Courier new; 
 
\t text-align: center; 
 
\t background: #EBA23C; 
 
\t width: 100%; 
 
} 
 
ul { 
 
\t float: left; 
 
\t padding: 0px; 
 
\t list-style: none; 
 
} 
 
ul li { 
 
\t float: left; 
 
\t width: 200px; 
 
\t height: 40px; 
 
\t background-color: #F05050; 
 
\t text-align: center; 
 
\t font-size: 20px; 
 
\t line-height: 40px; 
 
\t margin-right: 2px; 
 
} 
 
ul li a { 
 
\t text-decoration: none; 
 
\t color: white; 
 
\t display: block; 
 
} 
 
ul li a:hover { 
 
\t position: relative; 
 
\t z-index: 1; 
 
\t background-color: #C6AEF0; 
 
} 
 
ul li:hover ul { 
 
\t position: relative; 
 
\t z-index: 1; 
 
} 
 
ul li ul li{ 
 
\t opacity: 0.9; 
 
\t display: none; 
 
} 
 
ul li:hover ul li { 
 
\t display:block; 
 
} 
 

 
.container2 { 
 
\t background-color: #ccc; 
 
\t width: 650px; 
 
\t margin-left: 500px; 
 
\t margin-top: 50px; 
 
\t font-size: 50px; 
 
\t font-family: Courier New; 
 
\t opacity: 0.7; 
 
\t text-align: center; 
 
\t border: dashed; 
 
} 
 
.container3 { 
 
background-color: #ccc; 
 
\t width: 650px; 
 
\t margin-left: 500px; 
 
\t margin-top: 50px; 
 
\t font-size: 50px; 
 
\t font-family: Courier New; 
 
\t opacity: 0.7; 
 
\t text-align: center; 
 
\t border: dashed; 
 
}
<html> 
 
<meta charset="utf-8"> 
 
<title>Home page</title> 
 
<link rel="stylesheet" href="style.css"> 
 
<div class="container1"> 
 
<div class="top">Study in Czech Republic</div> 
 
<ul> 
 
<li><a>Home</a></li> 
 
<li><a>News</a></li> 
 
<li><a>Czech Republic</a> 
 
     <ul> 
 
<li><a>Facts and figures</a></li> 
 
<li><a>Area</a></li> 
 
<li><a>Climate</a></li> 
 
     </ul> 
 
\t </li> 
 
<li><a>Study</a> 
 
     <ul> 
 
<li><a>How to apply</a></li> 
 
<li><a>Programmes</a></li> 
 
<li><a>Scholarships</a></li> 
 
<li><a>Tuition fees</a></li> 
 
     </ul> 
 
\t </li> 
 
<li><a>Living</a> 
 
     <ul> 
 
<li><a>Arrival</a></li> 
 
<li><a>Living costs</a></li> 
 
<li><a>Work</a></li> 
 
     </ul> 
 
\t </li> 
 
\t <li><a>Contact</a></li> 
 
</ul><br><br> 
 
<div class="container2"> 
 
EXPERIENCE STUDYING IN THE HEART OF EUROPE 
 
</div><br><br><br<br><br><br><br><br><br><br> 
 
<div class="container3">gdfgdfgdfg</div> 
 

 

 
</html>

+0

https://www.bachelorsportal.com/countries/7/czech-republic.htmlこのサイトの背景イメージを見てください。このようにしたい – Parviz

0

私はこれがあなたの問題であれば知っているが、この部分であなたのCSSを見ていない:あなたはあなたをリンクする必要があり

.container1 { 
 
\t background-image: url(prague3.jpeg); 
 
\t margin: 
 
\t width: 
 
\t background-size: 
 
}

イメージを正しく表示し、すべてのスタイルをaで閉じます。それらが空であっても。私exempleのように:あなたは空にそれらを保持する場合

.container1 { 
 
\t background-image: url('https://i.stack.imgur.com/iWvFK.jpg'); 
 
\t margin:; 
 
\t width:; 
 
\t background-size:; 
 
}

、あなたはあまりにもそれらを削除することができます。私はあなたの質問に答えましたか?

+0

私は自分の背景イメージをアップロードしました。これを見て – Parviz

関連する問題