javascript - Placing logo inside multiple areas; header, body, content -


i don't know how explain this, maybe in case picture tells story instead of me:

img

shortly if cannot see it. i'm trying place logo inside multiple areas (header, body, content) global image.

is possible css, javascript, html, php?

and if is, guides or tips?

you can place logo inside of nav (in case) section. logo must absolutely positioned, doesn't mess other element's alignment, , nav section must relatively positioned, logo gets placed in relation nav container (even if it's absolute!). didn't provide html/dimensions, we're pretty left guess, here's how look, picking arbitrary dimensions.

.nav {    position: relative;    height: 100px; } /* .logo child of .nav */ .logo {    position: absolute;    top: -50px;    height: 200px;    width: 200px;    left: 0; } 

take look:

body {      color: #fff;      text-align: center;  }  .header {      height: 100px;      background: red;  }    .nav {      position: relative;      height: 70px;      background: blue;  }  .logo {      position: absolute;      width: 200px;      height: 200px;      left: 0;      top: -50px;  }  .body {      height: 250px;      background: purple;  }  .footer {      height: 100px;      background: lightblue;  }
<div class="header"> header </div>  <div class="nav">       <img src="http://www.udavinci.com/wp-content/uploads/2014/09/stackoverflow.png" class="logo"/>      nav   </div>  <div class="body"> body </div>  <div class="footer"> feet </div>

alternatively, may place logo outside of inside of body tag, , use position: absolute, , tweak it's position (top, left, etc..), according dimensions of relevant elements.


Popular posts from this blog

c# - ODP.NET Oracle.ManagedDataAccess causes ORA-12537 network session end of file -

matlab - Compression and Decompression of ECG Signal using HUFFMAN ALGORITHM -

utf 8 - split utf-8 string into bytes in python -