Html 背景图像未显示在CSS中_Html_Css

Html 背景图像未显示在CSS中

html css

Html 背景图像未显示在CSS中,html,css,Html,Css,我正在开发一个使用HTML和CSS的基本网站，我的背景图片将不会显示在该部分？有什么帮助吗？这是我的HTML文件： <!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"> <meta name="apple-mobile-web-a

我正在开发一个使用HTML和CSS的基本网站，我的背景图片将不会显示在该部分？有什么帮助吗？这是我的HTML文件：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Desc">
    <meta name="author" content="Lewis Beard">
    <META NAME="ROBOTS" CONTENT="INDEX, NOFOLLOW">


    <title>Lewis Beard Lighting Design</title>
    <!-- Custom Fonts -->
    <link href='http://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
    <!-- Custom CSS -->
    <link rel="stylesheet" href="style.css" type="text/css">



</head>

<body id="page-top">

    <section id="title">
        <div class="container" >
            <p><center>LEWIS BEARD LIGHTING DESIGN</center></p>
        </div>
    </section>

    <div id="header" style="filter: url(/files/theme/grayscale.svg#grayscale);"></div>

    <section id="nav">
        <div class="container">
            <p><a class="page-scroll" href="#about">About</a> - <a class="page-scroll" href="#portfolio">Projects</a> - <a class="page-scroll" href="#design">Design</a> - <a class="page-scroll" href="#contact">Contact</a></p>
        </div>
    </section>

    <section id="about">
        <div class="container" style="text-align:center;">
            <h4>Design Differently</h4>
            <hr>
            <p></p>
        </div>
    </section>

    <section id="portfolio">
        <div class="container" style="text-align:center;">
            <h4>Projects</h4>
            <hr style="width:10%">
            <p></p>
        </div>
    </section>

    <section id="design">
        <div class="container" style="text-align:center;">
            <h4>Design Differently</h4>
            <hr>
            <table style="text-align:center;width:60%;margin-left:20%;">
                <tr><td><i class="fa fa-4x fa-arrows"></i></td><td><i class="fa fa-4x fa-lightbulb-o"></i></td><td><i class="fa fa-4x fa-paper-plane"></i></td><td><i class="fa fa-4x fa-paper-plane"></i></td></tr>
            </table>
        </div>
    </section>

    <section id="contact">
        <div class="container" style="text-align:center;">
            <p>Contact Lewis!</p>
        </div>
    </section>

    <section id="footer">
        <div class="container" >
            <div style="text-align:left">
                <p><br>Links Here</p>
            </div>
            <div style="text-align:right;">
                <p>COPYRIGHT LEWIS BEARD LIGHTING DESIGN 2016<br>ALL RIGHTS RESERVED</p>
            </div>
        </div>
    </section>

    <section id="designby">
        <div class="container" >
            <p><center>Designed By Code After Code</center></p>
        </div>
    </section>
</body>
</head>

该图像与代码的其余部分位于同一文件夹中，是一个标准图像-日志中没有控制台错误，因此我无法找到它是什么！任何帮助都将不胜感激！提前谢谢

为此：

<div id="header" style="filter: url(/files/theme/grayscale.svg#grayscale);"></div>

给予

#header {
    height: 500px;
    background: url(blue.png) no-repeat center fixed; 
    background-size: cover;
}

试试这个

css:

你错过了css中元素头之前的#，元素avo之前的#。试试

背景图像

@IgorIvancha属性背景很好，问题是元素头之前的#。哇！没注意到我错过了比赛-谢谢！

header {
    height: 500px;
    background: url(blue.png) no-repeat center fixed; 
    background-size: cover;
}

#header {
    height: 500px;
    background: url(blue.png) no-repeat center fixed; 
    background-size: cover;
}

#header {
    height: 500px;
    background: url(http://p1.pichost.me/i/54/1774604.jpg) no-repeat center fixed; 
    background-size: cover;
}