0
私が作ろうとしているウェブサイトの背景に問題があります。背景色は現在黒ですが、私はそれを画像の背景。 bodyタグに背景要素を入れようとしましたが、ウェブサイトのフォーマットが乱れてしまいました。ウェブサイトの背景を黒色から画像に変更しようとしています
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Some Website</title>
<link rel="icon" href= "Logo.png" type="img/SVG" style="width: 100%; height: 100%">
</head>
<style>
body {margin:0;
background-color: black}
.socialmedia {
position:fixed;
right:150px;
top:35px;
transform:translate(0,-50%);
display: flex; /* add this */
align-items: center; /* add this */
}
.preorder button {
background-color: white;
border: 0;
height: 35px;
width: 110px;
margin-left: 35px;
}
.footer {
display: flex;
align-items: center;
width: 100%;
height: 90px;
margin-top: 319px;
background-color: black;
}
</style>
<body>
<div class = "Coming Soon" style = "background-color: black; color: white;" >
<a href="file:///C:/Noah's%20stuff/ComingSoon.html"><h1 style = "text-align: center; font-family: Verdana; font-size: x-large; font-style: italic">Lunation Boards</h1></a>
<style>
a{text-decoration: none;
color: white;}
</style>
<div class="socialmedia">
<a class = "Facebook">
<img src = "https://images.seeklogo.net/2016/09/facebook-icon-preview-1.png" width="50px" height="50px">
</a>
<a class = "Instagram">
<img src = "https://images.seeklogo.net/2016/06/Instagram-logo.png" width="50px" height="50px">
</a>
<a class = "Youtube">
<img src = "https://images.seeklogo.net/2016/06/YouTube-icon.png" width="50px" height="50px">
</a>
</div>
<p style = "font-family: Verdana; font-size: x-large; text-align: center; margin-top: 300px">Website currently under development. Kickstarter launching soon!</p>
<div class = "footer" style = "background-color: black; color: gray;">
<a href="file:///C:/Noah's%20stuff/ComingSoon.html"><img src="Logo.PNG" style = "margin-left: 40%; width: 130px; height: 80px"></a>
<p style = "font-family: Verdana; font-size: small; padding-left: 40%;">2017 Some Company LLC | City State somewebsite.com All Right Reserved.</p>
</div>
</div>
</body>
</html>
画像パス/ URLを変更して画像を使用するには、変更http://codepen.io/bungeedesign/pen/VpjQyg
とペンは私がドメイン名またはまだホスティングを持っていないので、私はダウンロードした画像を使用するための方法があります背景画像のURLを設定します。 –
私もこのURLを試しました：https://cdn.pixabay.com/photo/2015/12/08/00/28/roadway-1081736_1280.jpgそれは働いていましたが、画像の一部を画像の右側に追加しました。バックグラウンド。 –
ローカルにある画像を使用するには、そのパスを入力する必要があります。背景画像：url（ "image.png"）; image.pngをイメージの名前に変更すると、ローカルに保存した場所に応じてイメージパスを取得する必要があります（例：photos/image.png）。あなたが使用した写真については、画像の解像度が小さすぎるためブラウザウィンドウをいっぱいにしないので、繰り返します。この背景を使って繰り返さないようにすることができます：url（ "image.png"）no-repeat fixed center;それはまた画像を中心にします。 –