How to get hovered images into background ?

Question

@charset "utf-8";

html{
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}

body {
	background: #F2F2F2; 
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	font-family: expresswayregular;
}

@font-face {
    font-family: 'expresswayregular';
    src: url('fonts/expressway_rg-webfont.woff2') format('woff2'),
         url('fonts/expressway_rg-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

#header {
	position: fixed;
	background: #333333;
	width: 100%;
	height: 50px;
	padding: 0;
	margin: 0;
	top: 0;
}

#header-content {
	background: #333333;
	width: 1280px;
	height: 50px;
	margin-left: auto;
	margin-right: auto;
}

#logo {
	position: absolute;
}

#currentsite-info font {
	position: absolute;
	height: 30px;
	width: auto;
	margin-left: 60px;
	padding: 10px;
	color: #fff;
	font-size: 26px;
}

#search-box {
	width: 400px;
	height: 50px;
	margin-right: auto;
	margin-left: auto;
}

#search {
	background: #fff;
	width: 356px;
	height: 16px;
	margin-top: 10px;
	margin-bottom: 10px;
	padding: 6px;
	border: 1px solid #fff;
	border-radius: 6px 0 0 6px;	
}

#submit {
	float: right;
	background: #fff;
	width: 29px;
	height: 28px;
	margin-top: 10px;
	margin-bottom: 10px;
	padding: 0;
	border-top: 1px solid #fff;
	border-right: 1px solid #fff;
	border-bottom: 1px solid #fff;
	border-radius: 0 6px 6px 0;	
}

#menu {
	margin-right: 30px;
	margin-left: 25px;
	z-index: 1000;
}

.menu-linkbox a{
	position: static;
	float: right;
	width: 60px;
	height: 14px;
	top: 0;
	padding: 18px 15px 18px 15px;
	color: #F2F2F2;
	font-size: 14px;
	text-decoration: none;
	text-align: center;
}

.menu-linkbox:hover a {
	color: #2997D3;
	transition: all 500ms;
}

#menu-linkbox-live a {
	color: #2997D3;
}

#main-content {
	background: #fff;
    min-height: 100%;
    width: 1280px;
    margin: 0 auto;
	padding-top: 50px;
	overflow: auto;
}

#content-articles {
	background: #F2F2F2;
	width: 1220px;
	bottom: 0;
	margin: 20px;
	padding: 10px;
	border: 1px solid #000;
	overflow: auto;
}

#article1 {
	width: 550px;
	margin: 10px;
	float: left;
	text-align: justify;
	word-spacing: 4px;
}

#article1 h1 {
	font-size: 40px;
}

#article1-content {
	width: 100%;
}

#photo1 {
	width: 500px;
	height: 500px;
	margin: 0px auto;
	border: 2px solid #2997D3;
	display: block;
	transition: all 500ms;
}

#photo1:hover {
	opacity: 0.8;
}

#article2 {
	width: 550px;
	margin: 10px;
	float: right;
	text-align: justify;
	word-spacing: 4px;
}

#article2 h1 {
	font-size: 40px;
}

#article2-content {
	width: 100%;
}

#photo2 {
	width: 500px;
	height: 500px;
	margin: 0px auto;
	border: 2px solid #2997D3;
	display: block;
	transition: all 500ms;
	z-index: -1000;
}

#photo2:hover {
	opacity: 0.8;
}

#article3 {
	width: 550px;
	margin: 60px 10px 10px 10px;
	float: left;
	text-align: justify;
	word-spacing: 4px;
}

#article3 h1 {
	font-size: 40px;
}

#article3-content {
	width: 100%;
}

#photo3 {
	width: 500px;
	height: 500px;
	margin: 0px auto;
	border: 2px solid #2997D3;
	display: block;
	transition: all 500ms;
	z-index: -1000;
}

#photo3:hover {
	opacity: 0.8;
}

#article4 {
	width: 550px;
	margin: 60px 10px 10px 10px;
	float: right;
	text-align: justify;
	word-spacing: 4px;
}

#article4 h1 {
	font-size: 40px;
}

#article4-content {
	width: 100%;
}

#photo4 {
	width: 500px;
	height: 500px;
	margin: 0px auto;
	border: 2px solid #2997D3;
	display: block;
	transition: all 500ms;
	z-index: -1000;
}

#photo4:hover {
	opacity: 0.8;
}

#imprint {
	background: #333333;
	bottom: 0;
	width: 100%;
}

#imprint-content {
	background: #333333;
	width: 1280px;
	height: 150px;
	margin: auto;
}

#about-info {
	width: 300px;
	height: 130px;
	float: left;
	margin-left: 20px;
	padding: 10px 20px 10px 20px;
	vertical-align: middle;
	font-size: 18px;
	text-align: justify;
	color: #fff;
}

#about-info h2 {
	text-align: center;
}

#about-info p {
	margin: 20px;
	text-align: center;
	vertical-align: middle;
}

#contact-info {
	position: static;
	width: 300px;
	height: 130px;
	margin-right: auto;
	margin-left: auto;
	padding: 10px 20px 10px 20px;
	vertical-align: middle;
	font-size: 18px;
	text-align: justify;
	color: #fff;
}

#contact-info h2 {
	text-align: center;
}

#contact-info p {
	margin: 20px;
	text-align: center;
	vertical-align: middle;
}


#legal-info {
	width: 300px;
	height: 130px;
	float: right;
	margin-right: 20px;
	padding: 10px 20px 10px 20px;
	vertical-align: middle;
	font-size: 18px;
	text-align: justify;
	color: #fff;
}

#legal-info h2 {
	text-align: center;
}

#legal-info p {
	margin: 20px;
	text-align: center;
	vertical-align: middle;
}

h1 {
	color: #2997D3;
	font-size: 20px;
	text-align: center;
	margin-bottom: 20px; 	
}

p {
	margin: 20px;	
}

a {
	color: #2997D3;
}

<!doctype html>
<html>

	<head> 
	
		<meta charset="utf-8">
		
		<link rel="stylesheet" type="text/css" href="stylesheet_topics.css">
		
		<link rel="icon" href="images/logo_site.png">
		
		<title>Topics</title>
	
		<script>
			function toggleNavPanel(x){
				var panel = document.getElementById(x), navarrow = document.getElementById("navarrow"), maxH="300px";
				if(panel.style.height == maxH){
					panel.style.height = "0px";
					navarrow.innerHTML = "&#9662;";
				} 
			
				else {
					panel.style.height = maxH;
					navarrow.innerHTML = "&#9652;";
				}
			}
		</script>
	
	</head>
	
	<body>
	
		<div id="header">
		
			<div id="header-content">
		
				<img id ="logo" src="images/logo.png" />
				
				<div id="currentsite-info">
				
					<font>Topics</font>
				
				</div>
				
				<div id="menu">					
					
					<div class="menu-linkbox" id="menu-linkbox-breaking"><a href="../Breaking/index_breaking.html">Breaking</a></div>
						
					<div class="menu-linkbox" id="menu-linkbox-live"><a href="index_topics.html">Topics</a></div> 

					<div class="menu-linkbox" id="menu-linkbox-scene"><a href="../News/index_news.html">News</a></div>

					<div class="menu-linkbox" id="menu-linkbox-home"><a href="../../index.html">Overview</a></div>
					
				</div>
				
				<div id="search-box">
			
					<form action="http://www.google.com/search" method="get">
			
						<input id="search" type="text" name="q" placeholder="Search">
			
						<input id="submit" type="image" src="images/search.png" alt="Submit">
		 
					</form>
			
				</div>
			
			</div>
			
		</div>
		
		<div id="main-content">
		
			<div id="content-articles">
			
				<div id="article1">	
				
					<div id="article1-content">
						
						<h1>Politics</h1>
						
					</div>
					
					<div id="article1-photo">
					
						<a href="https://www.youtube.com/"><img id ="photo1" src="images/footage/topic1adjusted.jpeg" /></a>
						
					</div>
			
				</div>
				
				<div id="article2">	
				
					<div id="article2-content">
						
						<h1>Healthcare</h1>
						
					</div>
					
					<div id="article2-photo">
					
						<a href="https://www.youtube.com/"><img id ="photo2" src="images/footage/topic2.jpeg" /></a>
						
					</div>
			
				</div>
				
				<div id="article3">	
				
					<div id="article3-content">
						
						<h1>Network</h1>
						
					</div>
					
					<div id="article3-photo">
					
						<a href="https://www.youtube.com/"><img id ="photo3" src="images/footage/topic3adjusted.jpeg" /></a>
						
					</div>
			
				</div>
				
				<div id="article4">	
				
					<div id="article4-content">
						
						<h1>Travel</h1>
						
					</div>
					
					<div id="article4-photo">
					
						<a href="https://www.youtube.com/"><img id ="photo4" src="images/footage/topic4adjusted.jpeg" /></a>
						
					</div>
			
				</div>
			
			</div>
		
		</div>
		
		<div id="imprint">
			
			<div id="imprint-content">
			
				<div id="about-info">
						
					<h2>About Us</h2>
			
					<p>
			
						Company information 

					</p>
						
				</div>
				
				<div id="legal-info">
						
					<h2>Legal Use</h2>
			
					<p>
			
						Copyright information
			
					</p>
						
				</div>
				
				<div id="contact-info">
						
					<h2>Contact</h2>
			
					<p>
			
						Contact information 

					</p>
						
				</div>
			
			</div>	

		</div>
	
	</body>

</html>

Hello I have given you a snippet with my current website. It has 4 pictures and a fixed header. When you hover over the picture their opacity is being changed (1->0.8). My problem is that they are also goin over the header... I tried using a z-index but it's not working, any ideas on how to get them behind the header ?

Answer 1

I added z-index properties to your #header and #main-content css classes and there is no longer any overlap on hover.

I've also removed the z-index values you set on the images themselves (#photo1 etc) as the z-index set on #main-content applies to them as well, as they are its children.

Hope this helps.

@charset "utf-8";

html{
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}

body {
	background: #F2F2F2; 
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	font-family: expresswayregular;
}

@font-face {
    font-family: 'expresswayregular';
    src: url('fonts/expressway_rg-webfont.woff2') format('woff2'),
         url('fonts/expressway_rg-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

#header {
	position: fixed;
	background: #333333;
	width: 100%;
	height: 50px;
	padding: 0;
	margin: 0;
	top: 0;
  z-index: 1;
}

#header-content {
	background: #333333;
	width: 1280px;
	height: 50px;
	margin-left: auto;
	margin-right: auto;
}

#logo {
	position: absolute;
}

#currentsite-info font {
	position: absolute;
	height: 30px;
	width: auto;
	margin-left: 60px;
	padding: 10px;
	color: #fff;
	font-size: 26px;
}

#search-box {
	width: 400px;
	height: 50px;
	margin-right: auto;
	margin-left: auto;
}

#search {
	background: #fff;
	width: 356px;
	height: 16px;
	margin-top: 10px;
	margin-bottom: 10px;
	padding: 6px;
	border: 1px solid #fff;
	border-radius: 6px 0 0 6px;	
}

#submit {
	float: right;
	background: #fff;
	width: 29px;
	height: 28px;
	margin-top: 10px;
	margin-bottom: 10px;
	padding: 0;
	border-top: 1px solid #fff;
	border-right: 1px solid #fff;
	border-bottom: 1px solid #fff;
	border-radius: 0 6px 6px 0;	
}

#menu {
	margin-right: 30px;
	margin-left: 25px;
	z-index: 1000;
}

.menu-linkbox a{
	position: static;
	float: right;
	width: 60px;
	height: 14px;
	top: 0;
	padding: 18px 15px 18px 15px;
	color: #F2F2F2;
	font-size: 14px;
	text-decoration: none;
	text-align: center;
}

.menu-linkbox:hover a {
	color: #2997D3;
	transition: all 500ms;
}

#menu-linkbox-live a {
	color: #2997D3;
}

#main-content {
	background: #fff;
    min-height: 100%;
    width: 1280px;
    margin: 0 auto;
	padding-top: 50px;
	overflow: auto;
  z-index: -1;
}

#content-articles {
	background: #F2F2F2;
	width: 1220px;
	bottom: 0;
	margin: 20px;
	padding: 10px;
	border: 1px solid #000;
	overflow: auto;
}

#article1 {
	width: 550px;
	margin: 10px;
	float: left;
	text-align: justify;
	word-spacing: 4px;
}

#article1 h1 {
	font-size: 40px;
}

#article1-content {
	width: 100%;
}

#photo1 {
	width: 500px;
	height: 500px;
	margin: 0px auto;
	border: 2px solid #2997D3;
	display: block;
	transition: all 500ms;
}

#photo1:hover {
	opacity: 0.8;
}

#article2 {
	width: 550px;
	margin: 10px;
	float: right;
	text-align: justify;
	word-spacing: 4px;
}

#article2 h1 {
	font-size: 40px;
}

#article2-content {
	width: 100%;
}

#photo2 {
	width: 500px;
	height: 500px;
	margin: 0px auto;
	border: 2px solid #2997D3;
	display: block;
	transition: all 500ms;
}

#photo2:hover {
	opacity: 0.8;
}

#article3 {
	width: 550px;
	margin: 60px 10px 10px 10px;
	float: left;
	text-align: justify;
	word-spacing: 4px;
}

#article3 h1 {
	font-size: 40px;
}

#article3-content {
	width: 100%;
}

#photo3 {
	width: 500px;
	height: 500px;
	margin: 0px auto;
	border: 2px solid #2997D3;
	display: block;
	transition: all 500ms;
}

#photo3:hover {
	opacity: 0.8;
}

#article4 {
	width: 550px;
	margin: 60px 10px 10px 10px;
	float: right;
	text-align: justify;
	word-spacing: 4px;
}

#article4 h1 {
	font-size: 40px;
}

#article4-content {
	width: 100%;
}

#photo4 {
	width: 500px;
	height: 500px;
	margin: 0px auto;
	border: 2px solid #2997D3;
	display: block;
	transition: all 500ms;
}

#photo4:hover {
	opacity: 0.8;
}

#imprint {
	background: #333333;
	bottom: 0;
	width: 100%;
}

#imprint-content {
	background: #333333;
	width: 1280px;
	height: 150px;
	margin: auto;
}

#about-info {
	width: 300px;
	height: 130px;
	float: left;
	margin-left: 20px;
	padding: 10px 20px 10px 20px;
	vertical-align: middle;
	font-size: 18px;
	text-align: justify;
	color: #fff;
}

#about-info h2 {
	text-align: center;
}

#about-info p {
	margin: 20px;
	text-align: center;
	vertical-align: middle;
}

#contact-info {
	position: static;
	width: 300px;
	height: 130px;
	margin-right: auto;
	margin-left: auto;
	padding: 10px 20px 10px 20px;
	vertical-align: middle;
	font-size: 18px;
	text-align: justify;
	color: #fff;
}

#contact-info h2 {
	text-align: center;
}

#contact-info p {
	margin: 20px;
	text-align: center;
	vertical-align: middle;
}


#legal-info {
	width: 300px;
	height: 130px;
	float: right;
	margin-right: 20px;
	padding: 10px 20px 10px 20px;
	vertical-align: middle;
	font-size: 18px;
	text-align: justify;
	color: #fff;
}

#legal-info h2 {
	text-align: center;
}

#legal-info p {
	margin: 20px;
	text-align: center;
	vertical-align: middle;
}

h1 {
	color: #2997D3;
	font-size: 20px;
	text-align: center;
	margin-bottom: 20px; 	
}

p {
	margin: 20px;	
}

a {
	color: #2997D3;
}

<!doctype html>
<html>

	<head> 
	
		<meta charset="utf-8">
		
		<link rel="stylesheet" type="text/css" href="stylesheet_topics.css">
		
		<link rel="icon" href="images/logo_site.png">
		
		<title>Topics</title>
	
		<script>
			function toggleNavPanel(x){
				var panel = document.getElementById(x), navarrow = document.getElementById("navarrow"), maxH="300px";
				if(panel.style.height == maxH){
					panel.style.height = "0px";
					navarrow.innerHTML = "&#9662;";
				} 
			
				else {
					panel.style.height = maxH;
					navarrow.innerHTML = "&#9652;";
				}
			}
		</script>
	
	</head>
	
	<body>
	
		<div id="header">
		
			<div id="header-content">
		
				<img id ="logo" src="images/logo.png" />
				
				<div id="currentsite-info">
				
					<font>Topics</font>
				
				</div>
				
				<div id="menu">					
					
					<div class="menu-linkbox" id="menu-linkbox-breaking"><a href="../Breaking/index_breaking.html">Breaking</a></div>
						
					<div class="menu-linkbox" id="menu-linkbox-live"><a href="index_topics.html">Topics</a></div> 

					<div class="menu-linkbox" id="menu-linkbox-scene"><a href="../News/index_news.html">News</a></div>

					<div class="menu-linkbox" id="menu-linkbox-home"><a href="../../index.html">Overview</a></div>
					
				</div>
				
				<div id="search-box">
			
					<form action="http://www.google.com/search" method="get">
			
						<input id="search" type="text" name="q" placeholder="Search">
			
						<input id="submit" type="image" src="images/search.png" alt="Submit">
		 
					</form>
			
				</div>
			
			</div>
			
		</div>
		
		<div id="main-content">
		
			<div id="content-articles">
			
				<div id="article1">	
				
					<div id="article1-content">
						
						<h1>Politics</h1>
						
					</div>
					
					<div id="article1-photo">
					
						<a href="https://www.youtube.com/"><img id ="photo1" src="images/footage/topic1adjusted.jpeg" /></a>
						
					</div>
			
				</div>
				
				<div id="article2">	
				
					<div id="article2-content">
						
						<h1>Healthcare</h1>
						
					</div>
					
					<div id="article2-photo">
					
						<a href="https://www.youtube.com/"><img id ="photo2" src="images/footage/topic2.jpeg" /></a>
						
					</div>
			
				</div>
				
				<div id="article3">	
				
					<div id="article3-content">
						
						<h1>Network</h1>
						
					</div>
					
					<div id="article3-photo">
					
						<a href="https://www.youtube.com/"><img id ="photo3" src="images/footage/topic3adjusted.jpeg" /></a>
						
					</div>
			
				</div>
				
				<div id="article4">	
				
					<div id="article4-content">
						
						<h1>Travel</h1>
						
					</div>
					
					<div id="article4-photo">
					
						<a href="https://www.youtube.com/"><img id ="photo4" src="images/footage/topic4adjusted.jpeg" /></a>
						
					</div>
			
				</div>
			
			</div>
		
		</div>
		
		<div id="imprint">
			
			<div id="imprint-content">
			
				<div id="about-info">
						
					<h2>About Us</h2>
			
					<p>
			
						Company information 

					</p>
						
				</div>
				
				<div id="legal-info">
						
					<h2>Legal Use</h2>
			
					<p>
			
						Copyright information
			
					</p>
						
				</div>
				
				<div id="contact-info">
						
					<h2>Contact</h2>
			
					<p>
			
						Contact information 

					</p>
						
				</div>
			
			</div>	

		</div>
	
	</body>

</html>