Bild zeigt über Inhalt

Ich versuche, Inhalt auf einem Bild hinzuzufügen, aber ich bin mir nicht sicher, wo ich den Code platzieren soll. Wenn ich es über alles stelle, hat es Priorität und keiner meiner Code zeigt. Wenn ich das Bild jedoch in den body-CSS platziere, wird es angezeigt, aber ich habe Probleme, meine nächste Codezeile am Ende des Bildes zu platzieren und nicht auf dem Bild unter meiner letzten Codezeile, in diesem Fall dem Shop Now . Ich bin mir ziemlich sicher, dass ich den IMG-Code irgendwo falsch platziert habe. Ich schätze jede Hilfe.Bild zeigt über Inhalt

HTML:

<body> 
<div class="Image"> 
<img src="C:\Users\Gabriel\Downloads\Green-blur.jpg"/> 
<ul id="nav"> 
    <li id="brand"><a href="#">MINIMAL</a></li> 
    <li id="navm"><a href="#">Men</a></li> 
    <li id="navm"><a href="#">Women</a></li> 
    <li id="navm"><a href="#">Contact</a></li> 
</ul> 

<h1>Simplicity is Minimal</h1> 

<div id="home"> 
<a href="#" id="homeb">Shop Now</a> 
</div> 

</div> 

</body>

CSS:

<!--Content from code shows--> 
body { 
background-image: url(); 
background-size: 100% 130%; 
background-repeat: no-repeat; 
font-family: "PT Sans", sans-serif; 

} 
<!--IMAGE TAKES PRIORITY--> 
img { 
height: 1000px; 
background-repeat: no-repeat; 
}

Quelle

2017-03-23 RogerFedFan

Hallo, Gabriel. Herzlich willkommen. Sie sollten diesen Code in ein jsFiddle oder etwas werfen. Dein Ziel ist also, den Text und die Links oben auf dem Bild zu haben? – sheriffderek

Ja. Ich möchte das Bild als Hintergrund und den Inhalt in meinem HTML-Code darauf. – RogerFedFan

So etwas wie das?

body { 
 
font-family: "PT Sans", sans-serif; 
 
} 
 

 
.image { 
 
    background: url("https://www.blogcdn.com/www.joystiq.com/media/2011/06/respawngameblurryimage530pxheaderimg.jpg"); 
 
    background-size: cover; 
 
} 
 

 
li { 
 
    display: inline-block; 
 
    padding-right: 10px; 
 
} 
 

 
li a{ 
 
    color: white; 
 
}

<div class="image"> 
 
<ul id="nav"> 
 
    <li id="brand"><a href="#">MINIMAL</a></li> 
 
    <li id="navm"><a href="#">Men</a></li> 
 
    <li id="navm"><a href="#">Women</a></li> 
 
    <li id="navm"><a href="#">Contact</a></li> 
 
</ul> 
 

 
<h1>Simplicity is Minimal</h1> 
 

 
<div id="home"> 
 
<a href="#" id="homeb">Shop Now</a> 
 
</div> 
 

 
</div>

Hinweis: Entfernt das Bild in Ihrem HTML und hinzugefügt, um es zu Ihrem CSS.

Hoffe, es half

Quelle

2017-03-23 18:43:11

Vielen Dank! – RogerFedFan

Gern geschehen;) –

Was ich aus Ihrer Frage verstehen ist, dass Sie die Inhalte auf das Bild setzen wollen. Sie können dies erreichen, indem Sie das Hintergrundbild verwenden, wie Sie es getan haben, aber für das Hintergrundbild müssen Sie den korrekten Pfad des Bildes angeben.

In Ihrem Code background-image: URL ('Pfad Ihres Bildes'): background-size: contain;

Entfernen Sie Bild-Tag aus HTML.

Quelle

2017-03-23 18:45:28

Von den Blicken von ihm, ich glaube, Sie das Bild wollen, sind der Hintergrund auf body sein, so können Sie die src Ihrer img in die background-url() Eigenschaft auf body bewegen. Wenn der Hintergrund die gesamte Höhe des Browserfensters umfassen soll, fügen Sie min-height: 100vh; zu body hinzu.

body { 
 
    background-image: url(http://3.bp.blogspot.com/_EqZzf-l7OCg/TNmdtcyGBZI/AAAAAAAAAD8/KD5Y23c24go/s1600/homer-simpson-1280x1024.jpg); /* put your "C:\Users\Gabriel\Downloads\Green-blur.jpg" image here */ 
 
    background-size: 100% 130%; 
 
    background-repeat: no-repeat; 
 
    font-family: "PT Sans", sans-serif; 
 
    min-height: 100vh; 
 
}

<body> 
 
    <ul id="nav"> 
 
    <li id="brand"><a href="#">MINIMAL</a></li> 
 
    <li id="navm"><a href="#">Men</a></li> 
 
    <li id="navm"><a href="#">Women</a></li> 
 
    <li id="navm"><a href="#">Contact</a></li> 
 
    </ul> 
 

 
    <h1>Simplicity is Minimal</h1> 
 

 
    <div id="home"> 
 
    <a href="#" id="homeb">Shop Now</a> 
 
    </div> 
 

 
</body>

Quelle

2017-03-23 18:46:26

Es gibt zwei Möglichkeiten, um Bilder und Inhalte auf sie zu denken. Eine wäre, dem Element, in dem sich der Inhalt befindet, ein Hintergrundbild hinzuzufügen. In anderen Fällen möchten Sie das Bild verwenden, um das Verhältnis beizubehalten und dann den Inhalt bei absoluter Positionierung "oben" zu positionieren.

Markup

<header> 
    <div class="stuff">Stuff here... example with background image</div> 
</header> 

<!-- OR --> 

<div class="thing"> 
    <img src="https://placehold.it/1600x900" alt=""> 
    <div class="text"> 
    Stuff here... example with absolute and relative positioning 
    </div> 
</div>

Arten

header { /* background image example */ 
    background-color: lightblue; 
    padding: 10px; 
    background-image: url(https://placehold.it/1600x900); 
} 

.thing img { 
    display: block; /* so the image responds to it's parent */ 
    width: 100%; /* */ 
    height: auto; /* */ 
} 

.thing { /* absolute position example */ 
    position: relative; /* so it is the new boundery for children that are absolute */ 
    max-width: 600px; 
} 

.thing .text { 
    position: absolute; /* this will take it out of the flow but let you position it based on parent */ 
    top: 0; 
    left: 0; 
    padding: 1rem; 
}

Beispiel: https://jsfiddle.net/sheriffderek/fvvq4cwq/

Quelle

2017-03-23 18:50:08 sheriffderek

Bild zeigt über Inhalt

Antwort

Verwandte Themen