Copy link to clipboard
Copied
Hi,
I'm curious of the best way to place an image on top of another and have them both center. For example I have a nice background.png image. I want to assign it to the body tag (or should I assign it to a container div?) and have it center/top. Next I want to place a header image ON TOP of the background image and have it center as well and be flush on the top.
Thanks for anyone who can help
1 Correct answer
You mean something like this?
CODE:
<!doctype html>
<html>
<head>
<title>Centered Page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style>
img {
display: block;
vertical-align: baseline;
max-width: 100%;
}
body {
width: 90%;
margin: 0 auto;
background: url(http://lorempixel.com/900/500/abstract/4) no-repeat center center fixed;
background-size: cover;
}
header {
width: 70%;
...
Copy link to clipboard
Copied
You mean something like this?
CODE:
<!doctype html>
<html>
<head>
<title>Centered Page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style>
img {
display: block;
vertical-align: baseline;
max-width: 100%;
}
body {
width: 90%;
margin: 0 auto;
background: url(http://lorempixel.com/900/500/abstract/4) no-repeat center center fixed;
background-size: cover;
}
header {
width: 70%;
margin: 0 auto;
}
</style>
</head>
<body>
<header>
<img src="http://dummyimage.com/900x700" alt="header banner">
</header>
</body>
</html>
Copy link to clipboard
Copied
Hi Nancy,
Thanks for the reply. It is interesting how you coded this. I would have tried to use a Z-Index.
One further question if you don't mind.... Let's say you want to put a logo image within the header and float it left. (So basically an image on top of the header image. Or perhaps another below the header image?
I really appreciate your response
Gary
Copy link to clipboard
Copied
Z-index only works on positioned elements. To keep my sanity, I avoid positioning in primary layouts if at all possible. It really doesn't work well in responsive layouts.
For what you want, I think it's wise to begin with a grid and figure out on paper where you plan to put your elements. Hence this forum's banner image of a chalkboard with scribbled layout ideas. That's how I approach all new projects.
Alternatively, you could combine logo with banner in Photoshop to make one image. Whichever works best.
Copy link to clipboard
Copied
Thanks Nancy,
I am curious how you would code it. It is interesting to see the approach you would take.
Thanks again for your time,
Copy link to clipboard
Copied
I use Bootstrap. Logo in navbar. You can follow it up with an SVG banner too if you like.
Mobile
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap 3.7 starter</title>
<!--for mobile devices-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/flatly/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Merienda+One" rel="stylesheet">
<style>
/**offset top navbar**/
body { padding-top: 70px }
.navbar-brand {
margin-top: 0;
padding-top: 0;
}
.jumbotron h1, .jumbotron h2 {
font-family: 'Merienda One', cursive;
font-weight: normal;
}
.center-block { float: none }
</style>
</head>
<body>
<!--begin top nav bar-->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header"> <a class="navbar-brand" href="#"><img src="https://dummyimage.com/160x60/18bc9b/fff.png&text=Logo" class="img-circle" alt="logo"></a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">MENU 1</a></li>
<li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">submenu 1-1</a></li>
<li><a href="#">submenu 1-2</a></li>
<li><a href="#">submenu 1-3</a></li>
</ul>
</li>
<li><a href="#">MENU 3</a></li>
<li><a href="#">MENU 4</a> </li>
<li><a href="#">MENU 5</a> </li>
<li><a href="#">MENU 6</a></li>
</ul>
</div>
</div>
<!--end top nav--></nav>
<div class="jumbotron center-block text-center">
<h1>My Responsive Website</h1>
<h2 class="text-success">Some Pithy Slogan</h2>
</div>
<div class="container">
<div class="row">
<!--begin panel columns-->
<div class="col-sm-6 col-lg-3">
<div class="panel panel-warning">
<div class="panel-heading">
<h3 class="text-center">Heading 3</h3>
</div>
<div class="panel-body"> <img class="img-responsive center-block" src="http://dummyimage.com/400x200.jpg" alt="...">
<p class="text-primary">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi! </p>
<button type="button" class="btn btn-sm btn-primary center-block"> MORE</button>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-3">
<div class="panel panel-danger">
<div class="panel-heading">
<h3 class="text-center">Heading 3</h3>
</div>
<div class="panel-body"> <img class="img-responsive center-block" src="http://dummyimage.com/400x200.jpg" alt="...">
<p class="text-primary">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi! </p>
<button type="button" class="btn btn-sm btn-primary center-block"> MORE</button>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-3">
<div class="panel panel-warning">
<div class="panel-heading">
<h3 class="text-center">Heading 3</h3>
</div>
<div class="panel-body"> <img class="img-responsive center-block" src="http://dummyimage.com/400x200.jpg" alt="...">
<p class="text-primary">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi! </p>
<button type="button" class="btn btn-sm btn-primary center-block"> MORE</button>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-3">
<div class="panel panel-danger">
<div class="panel-heading">
<h3 class="text-center">Heading 3</h3>
</div>
<div class="panel-body"> <img class="img-responsive center-block" src="http://dummyimage.com/400x200.jpg" alt="...">
<p class="text-primary">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi! </p>
<button type="button" class="btn btn-sm btn-primary center-block"> MORE</button>
</div>
</div>
</div>
</div>
<!--LOWER CONTENT-->
<div class="row">
<div class="col-sm-7">
<h3>Heading 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus. Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus. Aenean tristique enim ut ante dignissim. </p>
<h3>Heading 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus. Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus. Aenean tristique enim ut ante dignissim. </p>
</div>
<div class="col-sm-offset-1 col-sm-4">
<h3>Right side content here</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus. Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus. Aenean tristique enim ut ante dignissim.</p>
</div>
<!--/row--></div>
<!--end cotnainer--></div>
<hr>
<div class="container-fluid">
<footer class="row bg-primary">
<!--4 columns-->
<div class="col-sm-2"> <img src="https://dummyimage.com/160x60/18bc9b/fff.png&text=Logo" class="img-circle" alt="logo"> </div>
<div class="col-sm-4">
<h3>something here</h3>
<h4>Something here</h4>
<p>something here</p>
</div>
<div class="col-md-3">
<h3>something here</h3>
<h4>Something here</h4>
<p>something here</p>
</div>
<div class="col-md-3">
<h3>something here</h3>
<h4>Something here</h4>
<p>something here</p>
</div>
</footer>
</div>
<!--latest jQuery-->
<script src="https://code.jquery.com/jquery-1.12.2.min.js" integrity="sha256-lZFHibXzMHo3GGeehn1hudTAP3Sc0uKXBXAzHX1sjtk=" crossorigin="anonymous"></script>
<!--Bootstrap-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
NOTE: This is just one approach. There are many others.
Nancy
Copy link to clipboard
Copied
Hi Nancy,
I am sorta new to all of this and I appreciate your responses.
I noticed you linked out to an external style sheet. Is it ok to use this or do I need to get permission first? Also where should I place an additional style sheet (would it go below)? I'm confused that the first link has "rel" first and the second has the "href" first.
Also I see you put the scripts at the bottom of the body. Is that normal/preferred? I've usually seen them above.
Thanks again for your time ....
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/flatly/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Merienda+One" rel="stylesheet">
Copy link to clipboard
Copied
I use assets on Content Distribution Networks (CDNs) as much as I can because they really do make the web faster.
https://www.keycdn.com/support/7-reasons-you-should-use-a-content-distribution-network/
Yes, it's OK to use Bootstrap or Bootswatch CSS from Max CDN. In fact there are other themes you can use if you want to. I arbitrarily chose the Flatly Theme here.
Custom CSS goes below Bootstrap CSS.
Link rel="stylesheet" can appear either at the beginning or end of the line. It makes no difference.
These days we don't put <scripts> in above the fold HTML because it slows down page load. I always put <scripts> at the end if possible. Google explains why. Remove Render-Blocking JavaScript | PageSpeed Insights | Google Developers
Nancy
Copy link to clipboard
Copied
CSS3 also allows for multiple background-images to be used in the same element and it's very well supported by modern browsers (if you don't want to combine the images allowing them to behave differently from each other)...

