Centering button over responsive image - html

Question

I have an image I will be making into a button that I want to center over a responsive image. However I do not know how to center it over the image, or prevent it from hiding behind it. I tried z-index but that failed. See div "button". Thank you in advance!
#font-face {
font-family: Gudea;
src: url(https://www.google.com/fonts#UsePlace:use/Collection:Gudea:400,400italic,700);
}
h1, h2, h3, h4, h5, h6, p {
margin: 0;
padding: 0;
}
p {
margin: 0 0 1em 0;
font-size: 93%;
line-height: 1.5em;
}
body {
font-family: Helvetica, Arial, sans-serif;
padding: 0;
margin: 0;
background-image: url(http://oi68.tinypic.com/9tzv4n.jpg);
}
img {
max-width: 100%;
height: auto;
margin: 0 0 10px 0;
}
/* Section Inner */
div.section-inner {
max-width: 1100px;
padding: 0 25px;
margin: 0 auto;
}
/* Header */
div.header {
background-image: url(http://oi67.tinypic.com/33dfi86.jpg);
margin-top:40px;
height: 30px;
background-color: #E9E9E9;
padding: 40px 0;
}
/*Logo*/
h1 span {
position: absolute;
top: 97px;
left: 50%;
width: 402px;
height: 160px;
margin: -80px 0 0 -201px;
text-indent: -999em;
z-index: 99;
background: url(http://www.cutcodedown.com/for_others/barrelPony/sandmannFarm/images/h1Logo.png);
}
/*Satooth Pattern*/
h2 span {
position: absolute;
top: 140px;
height: 20px;
text-indent: -999em;
z-index: 90;
background: url(http://i1377.photobucket.com/albums/ah69/danalavelle3/Sawtooth_zps67oxpl7p.png);
background-repeat: repeat-x;
width: 100%;
}
/*Sawtooth Pattern Two*/
h3 span {
position: absolute;
margin-top: -30px;
height: 40px;
text-indent: -999em;
z-index: 90;
background: url(http://i1377.photobucket.com/albums/ah69/danalavelle3/Sawtooth_zps67oxpl7p.png);
background-repeat: repeat-x;
width: 100%;
}
/* Navigation */
#mainMenuCheck {
/* display none breaks this in some browsers, so just slide it out of view */
position:absolute;
left:-999em;
}
#mainMenu {
position:relative; /* depth sort over h1 */
background:#754 url(images/dots.png) top left;
padding:0.40em 0.75em 0.05em;
/* left margin adjusts for uneven menu width, change as needed */
text-align:center;
}
#mainMenu li {
list-style:none;
display:inline;
}
#mainMenu ul:before,
#mainMenu ul:after,
#mainMenu:after,
#mainMenu a {
color:#F0E8E0;
text-shadow:
0 0 2px #000,
2px 2px 2px #000,
2px 2px 3px #000;
}
#mainMenu a {
display:inline-block;
vertical-align:bottom;
text-decoration:none;
color:#F0E8E0;
-webkit-transition:color 0.3s, text-shadow 0.3s;
transition:color 0.3s, text-shadow 0.3s;
}
#mainMenu a.current {
color:#87C6BC;
}
#mainMenu a:active,
#mainMenu a:focus,
#mainMenu a:hover {
color:#87C6BC;
}
#mainMenu a:after {
display:inline-block;
padding:0 0.1em 0 0.5em;
color:#FFF;
}
#mainMenu .lastInSet a:after {
display:none;
}
#mainMenu .setBreak {
padding-right:8em;
}
#mainMenu a:after,
#mainMenu:after,
#mainMenu ul:before,
#mainMenu ul:after {
content:"\2605";
font-family:"arial unicode ms","dejavu sans",lastresort,sans-serif;
}
#mainMenu:after,
#mainMenu ul:before,
#mainMenu ul:after {
position:absolute;
left:50%;
width:3em;
bottom: 1em;
}
#mainMenu:after {
bottom:0.3em;
font-size:150%;
margin-left:-1.5em;
}
#mainMenu ul:before {
margin-left:-3em;
}
/* Body Content */
div.body-content {
padding: 50px 0;
background-image: url(http://i1377.photobucket.com/albums/ah69/danalavelle3/Page_zpscom5uhou.png);
font-family: Gudea;
}
button {
}
/* Thirds */
div.thirds {
padding-bottom: 50px;
text-align: center;
font-family: Gudea;
}
div.one-third {
width: 30%;
float: left;
margin-right: 5%;
text-align: center;
font-family: Gudea;
}
div.one-third-last {
margin: 0;
text-align: center;
font-family: Gudea;
}
h2 {
color:#4EB4AC;
font-family: Gudea;
font-size: 20px;
}
/* Main Column */
div.main {
width: 100%;
float: left;
margin-top: -30px;
margin-right: 5%;
text-align: center;
padding-bottom:20px;
font-family: Gudea;
position: relative;
}
/* Footer */
div.footer {
background-image: url(http://oi67.tinypic.com/33dfi86.jpg);
margin-top: 30px;
margin-bottom: 30px;
color: #FFF;
padding: 15px 0;
text-align: center;
}
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }
/*Mobile Nav*/
#media (min-width:900px) {
.header2 {
display: none;
}
.menu {
display: none;
}
}
#media (max-width:900px) {
body {
z-index: 100;
margin:;
font-family: font:bold 16px/18px arial,helvetica,sans-serif;
background-color: #f4f4f4;
}
a {
color: #F8F4E6;
text-shadow:
0 0 5px #000,
5px 5px 5px #754;
}
.menu a:before,
.menu ul:before,
.menu ul:before {
content:"\2605";
}
/* header */
.header2 {
background-color:#6A4E39;
box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
position: relative;
width: 100%;
z-index: 3;
}
.header2 ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
background-image:none;
}
.header2 li a {
display: block;
padding: 20px 20px;
border-right: 1px solid #f4f4f4;
text-decoration: none;
}
.header2 li a:hover,
.header2 .menu-btn:hover {
background-color:#4EB4AC;
}
.header2 .logo {
display: block;
float: left;
font-size: 15px;
padding: 10px 20px;
margin-top: 15px;
text-decoration: none;
}
/* menu */
.header2 .menu {
clear: both;
max-height: 0;
transition: max-height .2s ease-out;
}
/* menu icon */
.header2 .menu-icon {
cursor: pointer;
display: inline-block;
float: right;
padding: 28px 20px;
position: relative;
user-select: none;
}
.header2 .menu-icon .navicon {
background: #F8F4E6;
display: block;
height: 2px;
position: relative;
transition: background .2s ease-out;
width: 18px;
}
.header2 .menu-icon .navicon:before,
.header2 .menu-icon .navicon:after {
background: #F8F4E6;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
margin-top: 7px;
}
.header2 .menu-icon .navicon:before {
top: 03px;
}
.header2 .menu-icon .navicon:after {
top: -2px;
}
/* menu btn */
.header2 .menu-btn {
display: none;
}
.header2 .menu-btn:checked ~ .menu {
max-height: none;
}
.header2 .menu-btn:checked ~ .menu-icon .navicon {
background: transparent;
}
.header2 .menu-btn:checked ~ .menu-icon .navicon:before {
transform: rotate(-45deg);
}
.header2 .menu-btn:checked ~ .menu-icon .navicon:after {
transform: rotate(45deg);
}
.header2 .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header2 .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
top: 0;
}
}
/* 48em = 768px */
#media (max-width: 899px) {
#mainMenu {
display: none;
justify-content: center;
}
/* section */
.section {
overflow: hidden;
margin: auto;
max-width: 1400px;
}
.section a {
position: relative;
float: left;
width: 100%;
}
.section a img {
width: 100%;
display: block;
}
.section a span {
color: #fff;
position: absolute;
left: 5%;
bottom: 5%;
font-size: 2em;
text-shadow: 1px 1px 0 #000;
}
.section-split a span {
display: none;
}
.section-split a:hover span {
display: block;
}
/* 48em = 768px */
#media (min-width: 48em) {
.section-split a {
width: 50%;
}
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Introduction to Responsive Web Design</title>
<meta name="viewport" content="width=device-width">
<!-- css -->
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/responsive.css" media="screen and (max-width: 900px)">
</head>
<body>
<!--Logo-->
<h1>
<a href="/">
<span>-</span>
</a>
</h1>
<!--Sawtooth Pattern-->
<h2>
<a href="/">
<span>-</span>
</a>
</h2>
<!-- Header -->
<div class="header"><div class="section-inner">
</div></div>
<!-- Navigation -->
<div id="container">
<input type="checkbox" id="mainMenuCheck">
<label for="mainMenuCheck"></label>
<div id="mainMenu">
<ul>
<li>Home</li>
<li>About</li>
<li>What We Do</li>
<li class="lastInSet setBreak">Events</li>
<li>Success Stories</li>
<li>Contact</li>
<li>Events</li>
<li class="lastInSet">Blog</li>
</ul>
</div>
<!--Mobile Navigation-->
<link href="http://fonts.googleapis.com/css?family=Droid+Serif" rel="stylesheet" type="text/css" />
<header class="header2">
Navigation
<input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
<ul class="menu">
<li> Home</li>
<li> About</li>
<li> What We Do</li>
<li> Success Stories</li>
<li> Contact</li>
<li> Events</li>
<li> Blog</li>
</ul>
</header>
<!-- Body-Content -->
<div class="body-content"><div class="section-inner">
<div class="button">
<img src="http://i63.tinypic.com/2hyxcls.jpg">
</div>
<div class="main">
<img src="http://oi63.tinypic.com/14ifsz6.jpg">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<!-- thirds -->
<div class="thirds clearfix">
<!-- one-third -->
<div class="one-third mobile-collapse">
<img src="http://static1.squarespace.com/static/5461836ee4b073a05b541f40/t/548df630e4b023e5238f8546/1418589745114/0image.jpg" alt="A bird on a fence" />
<h2>The Trainer</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div><!--/one-third-->
<!-- one-third -->
<div class="one-third one-third-second mobile-collapse">
<img src="http://static1.squarespace.com/static/5461836ee4b073a05b541f40/t/548df630e4b023e5238f8546/1418589745114/0image.jpg" alt="A bird eating" />
<h2>Lessons</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div><!--/one-third-->
<!-- one-third -->
<div class="one-third one-third-last mobile-collapse">
<img src="http://static1.squarespace.com/static/5461836ee4b073a05b541f40/t/548df630e4b023e5238f8546/1418589745114/0image.jpg" alt="A cat" />
<h2>Training</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div><!--/one-third-->
</div><!--/thirds-->
</div></div><!--/body-content-->
<!--Sawtooth Pattern Two-->
<h3>
<a href="/">
<span>-</span>
</a>
</h3>
<!-- Footer -->
<div class="footer"><div class="section-inner">
<p>Footer text placed here.</p>
</div></div>
</body>
</html>

Answer 1

The problem is coming because of the background image you set for class body-content. If you remove that and than set the z-index of div with class main as -1 then it will put the button picture on top of your responsive image.
The issue there is that you are using a lot of images on top of another without setting proper z-indexs. Try what I said above you will get it work. Hope it can help
Also see the already posted answer related to your problem . Stacking multiple images with z-index

Answer 2

A very simple solution would use a responsive container of some sort, setting the under image as background. Use:
background-image:url('../images/bg.png');
background-repeat:no-repeat;
background-size:contain;
Then put your button image inside the container and center it like normal.