試圖將網站的背景從黑色更改爲圖像

我遇到了一個與我想要製作的網站的背景有關的問題，背景當前是黑色，但我想將其更改爲圖像背景。我試着把背景元素放在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>

來源

2017-03-05 Noah Tanenholtz

你有背景顏色在身體和內<div class = "Coming Soon"設置。我只是刪除了div內的背景屬性，並將背景顏色更改爲背景圖像。我使用的圖像似乎很好。下面是與變化http://codepen.io/bungeedesign/pen/VpjQyg

筆要使用你的形象簡單地改變圖像路徑/這裏background-image: url("http://www.hbc333.com/data/out/80/47919123-flat-wallpaper.png");

來源

2017-03-05 00:58:27

網址有沒有爲我用下載的圖像，因爲我沒有域名或主機尚未方式設置背景圖片的網址。 –

我也試過這個網址：https：//cdn.pixabay.com/photo/2015/12/08/00/28/roadway-1081736_1280.jpg它的工作，但它的圖像的一部分添加到右側背景再次。 –

要使用本地的圖片，您需要放置其路徑。 background-image：url（「image.png」）;將image.png更改爲您的圖片的名稱，還必須確保您獲取的圖片路徑取決於您在本地保存的位置，例如，它可能是photos/image.png。至於你使用的照片會重複，因爲圖像分辨率太小，不會填充瀏覽器窗口。你可以通過使用這個背景來阻止它重複：url（「image.png」）no-repeat fixed center;它也會使圖像居中。 –

試圖將網站的背景從黑色更改爲圖像

回答

相關問題