How to make a div inside a div while keeping same image background


Tags: html,css,css3

Problem :

I have a image background on a first div. Then I want to have a div (show here for convenience with orange background) and another box "above" it with comments (called "comments box").

The problem is that I DON'T want the content of the "orange-zone' to be shown UNDER it.

Here is what I have CURRENTLY :

enter image description here The problem with my current code is that some content I put in the "orange zone" div DOES go under the Comment box, which is ugly.

Here is a jsfiddle for this: http://jsfiddle.net/uu0xe2xL/1/ :

HTML

<body class='example-page'>

<div id="content">
  <div class="page-main-image" >
  </div>
  <!--div with orange background -->
  <div id="orange-zone">  
  </div>
  <!-- comment box -->
  <div class="comment-box comment" style="opacity: 1;">
      xxx it's cool to comment<br/>
      nice one dude
   </div>
</div>
</body>

CSS

html {
    height:100%;
}

body.example-page {
    height:100%;
}

#content {
    height: 100%;
    margin-top: 18px;
    @media (max-width: 767px) {
        margin-top: 9px;
    }
}
.page-main-image {
    height: 100%;
    background: url('http://www.thedrum.com/uploads/drum_basic_article/115509/main_images/BBCb.jpg'); background-size: cover; background-repeat: no-repeat;
}

#orange-zone {
    position:fixed;
    top:10%; 
    left:30%;
    width:100%;
    height:100%; 
    background-color:orange;
}
.treasure{
  position: absolute;
}

.comment-box {
  position:relative;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.3);
  padding: 10px;
  bottom:5%;
  right:5%;
}
.comment {
  position:absolute;  
}

Here is what I want to achieve.

enter image description here

Notice how the orange never gets under the Comment-zone BUT the background image with an island is still visible UNDER the "comment box", which is what I want to achieve).

Also I want text to be put on the orange zone and I can't put the background image in the body tag as it has to start right after the menu, so it has a of its own.

Feel free to update this jsfiddle



Solution :

If the border solution sdcr made won't work for you, you can give the inner div the same background as the outer div, and set the background-position so that they both line up. EDIT: Added color layer.

* {
    margin: 0;
    padding: 0;
}

#background {
    background-image: url('http://www.desktopaper.com/wp-content/uploads/tropical-island-wallpaper.jpg');
    width: 700px;
    height: 700px;
}

#innertext {
    width: 200px;
    height: 200px;
    background-color: yellow;
    position: absolute;
    top: 50px;
    left: 50px;
}

#transparent {
    width: 100px;
    height: 100px;
    position: relative;
    background-image: url('http://www.desktopaper.com/wp-content/uploads/tropical-island-wallpaper.jpg');
    background-position: -75px -75px;
    top: 25px;
    left: 25px;
}

#colorlayer {
    background-color: rgba(255, 0, 0, .3);
    height: 100%;
}

jsfiddle

EDIT: Just wanted to add, you can pretty easily automate that with Javascript as well if you want.


    CSS Howto..

    How to debug CSS/Javascript hover issues

    How can I control the css of cloned
    with Javascript?

    How to center an image .logo via css? [duplicate]

    How can I exclude a hover effect with CSS

    How to get a css animation to transition quicker in keyframes

    How to highlight the table row using jquery in Rails 3?

    How do I make a Google Map span 100% remaining height between header and footer?

    how to read content in a webpage that doesn't appear in page source

    How to design a CSS for a centered floating confirm dialog?

    How to make css two borders?

    how to tag multiple elements? [closed]

    How to combine transforms in CSS?

    How to load CSS into CodeIgniter

    how to add same width on bootstrap dropdown menu item as parent item

    How do I prevent a JQuery UI menu from floating?

    How to add different CSS to the same HTML tags?

    How do I know when is the right moment to stop using a specific css vendor-prefix?

    How to layout images in 3 columns [closed]

    how to show section of a CSS sprite within a set position on the whole html body

    How to make Block Container with Inline-Block Child in CSS

    How to change the mouse cursor over an embedded flash?

    how to apply multiple css image filters using jquery

    How to write many functions in one JS function

    How would I go about having placeholder divs that are then “overwritten” later with PHP?

    how to deal with suffix and prefix in css

    How do I use CSS to to vertically center align an image in a div?

    Showing/hiding content with jQuery

    How to get 'hover' and 'active' states working with CSS and HTML?

    Overwriting a CSS Class How to?

    How to turn a CSS class on and off by clicking a button