I see that this question has been asked before but with different elements used. I want the balance of space that is left (less header and footer space) to have the image smack in the middle no matter the size of the viewer's screen / browser.
I've tried sooooo many codes that I've read here but always either
a. something becomes messed up on the page and/or
b. the image still isn't vertically centered on the page itself (unless the page itself doesn't contain all my bits) though fixes center it in the middle of a space allocated but that space isn't centered vertically on the page.
EDIT NOTE: The answers below by roopa only resolved the Footer issue that I had included in this post as vertically centered image fixes I tried messed it up too.
EDIT 2: I have found the solution and have posted it as an Answer.
Thank you.
Here are the current codes: http://jsbin.com/vazevamile/edit?html,output
And a Stack Snippet:
/* chrome android to show background-image */
html{
height:100%;
min-height:100%;
}
body {
overflow-x: hidden;
padding-top: 50px; /* Padding for .navbar-fixed-top. Change value if navbar height changes. Remove if using .navbar-static-top. */
font-family: 'Didact Gothic', sans-serif, calibri, "lucida sans", verdana, arial, monospace;
font-size: 12px;
/* chrome android to show background-image */
min-height:100%;
/* .end */
/*keep footer at bottom*/
height:100%;
margin:0; /* for footer*/
/* .end*/
padding: 0 2em; /* top, right, bottom, and left*/
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
color: #ffff;
background-color: #B4A890;
background-image: url("http://www.planwallpaper.com/static/images/Fall-Nature-Background-Pictures.jpg");
background-position:absolute;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
}
/* resize images as windows shrinks */
img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
/* CSSReset.com - How To Keep Footer At Bottom of Page with CSS
* http://www.cssreset.com/2010/css-tutorials/how-to-keep-footer-at-bottom-of-page-with-css/*/
#wrapper {
min-height:100%;
position:relative;
}
#header {
background:#ededed;
padding:0px;
}
}
#content {
position:relative;
padding:50px 0;
/*background-color:black; - for testing*/
}
/* orginal, before footer background fix:
#content {
padding:50px; /*padding for navbar at the top*/
/* padding-bottom:100px; /*value must be equal to or greater than the height of #footer*/
/*background-color:black; - for testing*/
/*}*/
#footer {
background:#000000;
width:100%;
min-height:100px; /*for footer background fix*/
/*height:100px; - orginal before footer background fix*/
position:absolute;
bottom:0;
left:0;
font-size: 15px;
}<!DOCTYPE html>
<html lang="en">
<meta name="robots" content="index, follow">
<meta http-equiv="imagetoolbar" content="no">
<meta http-equiv="language" content="en">
<head>
<!-- MenuBar - below 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- ./3 meta tags -->
<!-- MenuBar - Bootstrap Core CSS (ddmenu.js, jquery.js & bootstrap.js are the bottom for faster loading)-->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- MenuBar & Mine Custom CSS -->
<link href="css-mb/main.css" rel="stylesheet">
<!-- /.custom css -->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!--for footer bottom:-->
<!--[if lt IE 7]>
<style type="text/css">
#wrapper { height:100%; }
</style>
<![endif]-->
</head>
<body>
<div id="wrapper">
<div id="header">
<!-- MenuBar Navigation -->
<a id="ddmenuLink" href="menu_bar.htm">Menu</a>
<script src="js-mb/jsfiddle.js"></script>
<!-- /.navigation -->
</div><!--.header-->
<div id="content">
<center><img src="http://oi64.tinypic.com/k3sz9x.jpg" width="840" height="166"></center>
</div><!--.content-->
<div id="footer">
<center><TABLE BORDER=0><TR>
<TD><b><center>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque venenatis ante vitae interdum feugiat. Duis pretium diam quis justo fermentum efficitur. Pellentesque justo tortor, vulputate quis suscipit ut, lobortis eu massa. Donec vitae nisi sagittis, dictum eros pulvinar, finibus turpis. Nullam</center></b></TD>
</TR></TABLE></center>
<p><center><b>FOOTER</b></center></p>
</div><!--.footer-->
</div><!--.wrapper-->
<!-- MenuBar - jQuery & JavaScript are required for the dropdown menu. Placed at the end of the document so the pages load faster -->
<script src="http://m.uploadedit.com/ba3s/1492400858966.txt" type="text/javascript"></script>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.js"></script>
<!-- Bootstrap core JavaScript-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.js"></script>
</body>
</html>
