Html 正在尝试将网站背景颜色从黑色更改为图像_Html_Css_Image_Background

Html 正在尝试将网站背景颜色从黑色更改为图像

html css image

Html 正在尝试将网站背景颜色从黑色更改为图像,html,css,image,background,Html,Css,Image,Background,我有一个网站的背景问题，我试图使，背景目前是黑色的，但我想改变它的图像背景。我试着把背景元素放在body标签中，但它弄乱了网站的格式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Some Website</title> <link rel="icon" href= "Logo.png" type="i

我有一个网站的背景问题，我试图使，背景目前是黑色的，但我想改变它的图像背景。我试着把背景元素放在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>


某网站
正文{页边距：0；
背景色：黑色}
.社会媒体{
位置：固定；
右：150px；
顶部：35px；
转换：翻译（0，-50%）；
显示：flex；/*添加此*/
对齐项目：居中；/*添加此项*/
}
.预订购按钮{
背景色：白色；
边界：0；
高度：35px；
宽度：110px；
左边距：35px；
}
.页脚{
显示器：flex；
对齐项目：居中；
宽度：100%；
高度：90px；
利润上限：319px；
背景色：黑色；
}
a{文本装饰：无；
颜色：白色；}
2017年Some Company LLC | City State SomeWeb.com版权所有

您在正文中设置了背景颜色，在

中，我是否可以使用下载的图像，因为我还没有域名或主机来设置背景图像的url。我也尝试了此url：它起作用，但它再次将图像的一部分添加到背景的右侧。要使用您在本地设置的图像你需要把它的路径放进去。e、 背景图片：url（“image.png”）；将image.png更改为图像的名称，您还必须确保根据您在本地保存图像的位置获取图像路径，例如，它可以是photos/image.png。至于你使用的照片，它会重复，因为图像分辨率太小，无法填满浏览器窗口。您可以使用以下背景阻止它重复：url（“image.png”）无重复固定中心；它也会将图像居中。是的，我找到了不可重复的固定中心。我用图像更新了笔。我设法找到了它的高分辨率版本。