2017-12-17 4 views
0

In Dreamweaver und nach einigen kleinen CSS-Anpassungen wird mein Hintergrund für den Körper nicht angezeigt. Ich habe es in eine feste Farbe geändert, um zu sehen, ob die Verbindung unterbrochen wurde, aber im besten Fall, wenn ich es im Browser öffne, zeigt es für eine halbe Sekunde, bevor es weiß wird. Ich bin buchstäblich verblüfft.Mein Hintergrund ist einfach verschwunden

Ich kann nicht genau feststellen, wie es angefangen hat, da mein Hintergrund früher da war, behoben und die anderen divs würden darüber rollen. Jetzt ist es nur noch weißer Raum.

hier ist mein Code:

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>

+0

Können Sie die 'styles.css' Datei bitte teilen? –

Antwort

1

In hier

background:red;url(Images/backgroundp1.jpg); 

ein Komma nach "rot" sein sollte, nicht ein Semikolon:

background:red, url(Images/backgroundp1.jpg); 

Ansonsten ist url(Images/backgroundp1.jpg); eine (sinnlose) Regel für sich.

+0

Ich benutzte die; Die CSS würde also den Link zu der Datei ignorieren und stattdessen den Hintergrund rot darstellen. Keine funktioniert, auch wenn ich die URL wegnehme –

1

Der richtige Weg, um ein Hintergrundbild mit einer Farbe angezeigt wird Stenografie verwendet, ist

background: red url('Images/backgroundp1.jpg'); 

Es ist kein Komma oder Semikolon in der Erklärung sein sollte. Siehe

Verwandte Themen