Gabriel Pozo Gabriel Pozo -4 years ago 78
CSS Question

Image Displays over Content

I'm trying to add content on an image however I'm not sure where to place the code. When I place it above everything, it takes priority and none of my code shows. However when I place the image in the body CSS, it displays but I have problems trying to place my next line of code at the end of the image and not on the image below my last line of code which in this case is the Shop Now. I'm pretty sure I have placed the IMG code somewhere wrong. I appreciate anyone's help.

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;
}

Answer Source

Something like this?

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>

Note: Removed the image in your HTML and added it to your CSS.

Hope it helped

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download