Exit
  • Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
  • 한국 커뮤니티
0

Images on top of images. Basic HTML/CSS question

Explorer ,
Jan 28, 2017 Jan 28, 2017

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.2K
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Community Expert , Jan 28, 2017 Jan 28, 2017

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

   

...
Translate
Community Expert ,
Jan 28, 2017 Jan 28, 2017

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>

Nancy O'Shea— Product User, Community Expert & Moderator
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jan 29, 2017 Jan 29, 2017

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

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jan 29, 2017 Jan 29, 2017

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.

Nancy O'Shea— Product User, Community Expert & Moderator
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jan 30, 2017 Jan 30, 2017

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,

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jan 31, 2017 Jan 31, 2017

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

Nancy O'Shea— Product User, Community Expert & Moderator
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Feb 04, 2017 Feb 04, 2017

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">

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 04, 2017 Feb 04, 2017
LATEST

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.

https://bootswatch.com/

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

Nancy O'Shea— Product User, Community Expert & Moderator
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jan 30, 2017 Jan 30, 2017

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)...

Using CSS multiple backgrounds - CSS | MDN

CSS background-image property

http://caniuse.com/#feat=multibackgrounds

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines