我的背景消失了

Question

使用Dreamweaver，经过一些小的css调整后，我的身体背景将不会出现。我已将其更改为纯色，以查看链接是否已损坏，但充其量，当我在浏览器中打开它时，它显示半秒，然后变为白色。我真的很困惑。

我无法确定它是如何开始的，因为我的背景曾经存在，固定而其他div会翻过它的顶部。现在它只是丑陋的白色空间。

这是我的代码：

 rel="stylesheet">@charset "utf-8";
/* CSS Document */

.bodydiv {
    background:red;url(Images/backgroundp1.jpg) ;
    background-size: cover;
    width:100%;
    padding:0;
    margin:0;


}

/* Font families : font-family: 'Cabin Sketch', cursive;
font-family: 'Averia Sans Libre', cursive;* font-family: 'Special Elite', cursive;*/




.page1 {
    margin-right: auto;
    margin-left : auto;
    width: 100%;
    height:40em;
    background-size:cover;
    padding: 0;
    margin: 0;


}


#me {
    grid-column: 2;
    display:block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: auto;
    margin-top: 7em

}

h1{
    text-align: center;
    font-size: 4em;
    font-family: 'Cabin Sketch';
}

p {
    font-family: 'Special Elite', cursive;
    line-height: 180%;
}

h3 {
    font-family: 'Cabin Sketch';
    text-transform: capitalize;
}



.page1content{
    width: 800px;
    height: 800px;
    margin-left: auto;
    margin-right: auto;
}


.page2{
    background:  url(Images/DSC04168.jpg) center center ;
    background-size: cover;
    height: 50em;
    padding-bottom: -10;
    margin-bottom: 0;

}

.page3{
    background: url(Images/DSC00472.jpg) center center;
    background-size: cover;
    height:50em;
    padding-top: 0;
    padding-bottom: 0;
}

.page4 {
    display:grid;
    grid-template-columns: 50% 50%;
    height: 70em

}

.page4a {
    grid-column: 1;
    background: rgba(81,81,81,1.00);
    color:rgba(198,198,198,1.00);
    display: grid;
    grid-template-columns: 15% auto 15%;
    grid-template-rows: 15% auto 15%;
}

.aboutme {
    grid-column: 2;
    grid-row: 2;
}

.page4b {
    grid-column: 2;
    background: rgba(198,198,198,1.00);
    color: rgba(81,81,81,1.00);
    display:grid;
    grid-template-columns: 15% auto 15%;
    grid-template-rows: 15% auto 10%;
}

.form {
    grid-column: 2;
    grid-row: 2;
}

input[type], select{
    width: 100%;
    padding: 12px 20px;
    margin: 8px;
    display: inline-block;
    border 2px solid;
    border-radius: 5px;
    box-sizing: border-box;
    background-color: rgba(81,81,81,1.00);
    color: rgba(198,198,198,1.00)

}

input[type=text]:focus {
    border: 2px solid rgba(81,81,81,1.00) ;
}

textarea{
    width: 100%;
    height: 150px;
    padding: 12px 20px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    background-color: rgba(81,81,81,1.00);
    font-size: 16px;
    resize: none;
}

input[type=submit] {
    width: 33%;
    background-color:rgba(198,198,198,1.00) ;
    color: rgba(81,81,81,1.00);
    padding: 14px 20px;
    margin: 8px 0;
    border: 2px solid rgba(81,81,81,1.00);
    border-radius: 4px;
    cursor: pointer;
}

<!doctype html>
<html>
<head>
    <link href="https://fonts.googleapis.com/css?family=Averia+Sans+Libre|Cabin+Sketch|Special+Elite" rel="stylesheet">
    <link rel="stylesheet" href="s">
<meta charset="utf-8">
<title>Mrhuggies-portfolio</title>
<link rel="stylesheet" href="styles.css">
</head>



<body>

<div class="bodydiv">       

    <div class="page1">

         <div class="page1content">
               <img id="me" src="Images/pof2.png" width="600" height="370px" alt="Picture of Thomas Hughes"/>
<h1>ThomasHughesPortfolio<br>WebDesigner/Photographer</h1>
      </div>
</div>


    <div class="page2">

        </div>


    <div class="page3">

    </div>

    <div class="page4">

        <div class="page4a">
            <div class="aboutme">
                <h3>About Me</h3>
                <p> Hello, I'm a 25 year old that goes by the name of Thomas Hughes, based in <b>Glagow</b>. I design UI/UX whlist writing all of my own code. I enjoy making something beautiful, functional and enjoyable to use and browse. Solving problems, <b>capturing beauty</b> and a keen eye for design is where my passions lie. 
                    Adept at Photoshop, Dreamweaver and getting to grips with other programmes that Adobe Suit has to offer.
                    Feel free to get in touch with any free-lance <b>opportunities</b> or job proposals</p>
                </div>
        </div>
    <div class="page4b">
        <div class="form">
        <h3><b>I want</b> to hear from you</h3>

        <p>Want to talk about a job, see how I'm doing or maybe ask me out for a coffee?</p>

            <form action="">
            <label for="name"></label>
                <input type="text" id="name" name="firstName" placeholder="Your name..."


                <label for="name"></label>
                <input type="text" id="name" name="firstName" placeholder="Email..."


            <label for="name"></label>
                <textarea><input type="text" id="name" name="firstName" placeholder="Write your message in here..."></textarea>


        <input type="submit" value="Send Message">




                       </form>


                       </fom>
        </div>
        </div>  
    </div>



    </div>
    </body>
</html>

Answer 1

另一答案