Logo Over Multiple Divs at once

Question

I am creating a website and have designed the header enter image description here

The Red and Blue is an image The Yellow is a navigation bar The circle is a logo My issue is that I am unable to put the logo in div of the image and the nav div at the same time. Is this even possible or should I consider a new design. Perhaps I am looking at this incorrectly.

This can simply be achieved with `margin-top: -50px;`. However, you would need to provide some code in order to state **exactly** what your code should look like. — Obsidian Age, Feb 16 '17 at 23:38
You are downvoted because you don't show your code and what exactly doesn't work for you. I didn't downvote, this is just a friendly piece of explanation for you. — Battle_Slug, Feb 16 '17 at 23:39
Please read [ask]. Key phrases: "Search, and research" and "Explain ... any difficulties that have prevented you from solving it yourself". — Heretic Monkey, Feb 16 '17 at 23:40
Possible duplicate of [How CSS Positions work, why absolute elements stack up on each other instead of stacking one after other](http://stackoverflow.com/questions/20718577/how-css-positions-work-why-absolute-elements-stack-up-on-each-other-instead-of) — , Feb 17 '17 at 02:59

score 0 · Accepted Answer · answered Feb 16 '17 at 23:38

Your question is about having the same image on both the nav and that div.

Pen here!

You can do it easily with background-image and set the same image aswell.

  background-image: url(http://s.glbimg.com/jo/g1/f/original/2016/05/02/palestinian-gaza-daily_life_mohammed_abed_afp.jpg);
  background-size: cover;
  backgroud-position: center center;

score 0 · Answer 2 · answered Feb 16 '17 at 23:45

This can be achieved using pure CSS. This is a possible approach to get what you want:

#one {
  height: 100px;
  background-color: blue;
}

#two {
  position: relative;
  width: 50px;
  height: 50px;
  background-color: red;
  border-radius: 100px;
  transform: translateY(40px);
  margin: 0 auto;
  z-index: 1;
}

#three {
  position: relative;
  height: 30px;
  background-color: yellow;
  bottom: -20px;
}

<div id="one">
  <div id="two">
  </div>
  <div id="three">
  </div>
</div>

Replace divs with any block element and it should work too. Otherwise, you'll need to set display: block.

Logo Over Multiple Divs at once

2 Answers2