2016-03-28 8 views
0

Wenn ich ein div mit einer background-image Eigenschaft platziere und position: relative verwende, lande ich mit einem weißen Rahmen um den Bildrand, den ich nicht will.background-image und position relativer weißer Rahmen

Ich kann nicht absolut verwenden, da ich ein Element direkt unter dem Hintergrundbild folgen und auf verschiedene Auflösungen skalieren muss (also keine Einstellung von Höhe/Breite in px).

Hier ist die CSS:

#pagehead{ 
    position: relative; 
    background-position: center, center; 
    background-image: url("Header.jpg"); 
    background-repeat: no-repeat; 
    background-size: cover; 
    height: 100vh; 
    top: 0; 
    bottom: 0px; 
    left: 0; 
    right: 0; 
} 

section{ 
    position: relative; 
} 

Hier ist der HTML:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width; initial-scale=1.0;"> 
    <title>Title</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
    <script type="text/javascript" src="animate.js"></script> 
    <link rel="stylesheet" type="text/css" href="page.css"> 
</head> 

<body> 
    <div id="pagehead"></div> 

    <section> 
     <div id="content"> 
      blahblahblah 
     </div> 
    </section> 

</body> 
</html> 
+1

Haben Sie ‚Körper versucht Einstellung { Rand: 0px} '? – KiiroSora09

+0

Ich kann nicht glauben, dass es so einfach war! Danke das hat funktioniert :) Wenn du als Antwort postest werde ich als beantwortet markieren. – OEThorne

+0

Wird es tun! Manchmal sind es die kleinen Dinge, die wichtig sind :) – KiiroSora09

Antwort

1

der Körper die Marge auf 0 Einstellung könnte das Problem beheben:

body { margin: 0px; } 
Verwandte Themen