Use a DIV as a background for another element

Question

If I have a div that contains images and text, is it possible to use this div's content as a background for, let's say, a section ?

For example, something like this:

HTML:

<section id="sec1">
    <div id="bg-div">
        <em>This is a background</em>
        <img src="image1">
        <img src="image2">
    </div>
</section>

And CSS:

#sec1 {
    background: src(#bg-div);
}

This way, I could have this div content acting like a background for my section.

Your question is fuzzy. Do you want the bg-div and section to share the same background? — Vangel Tzo, Sep 22 '14 at 09:34
I think OP wants to use a div like a image as background for another div? — Azrael, Sep 22 '14 at 09:35
@srekoble: I am trying to use Skrollr.js to use a parallax effect. The `div`'s content is meant to act like the parallax background while the `sections` are normal "color bands", that's why I wanted to do that. — Seeven, Sep 22 '14 at 09:40
This may help you: http://stackoverflow.com/questions/13501419/html-set-4-div-as-background — Nagu_R, Sep 22 '14 at 09:40
Maybe you need to use z-index to set one div behind the other one — Biribu, Sep 22 '14 at 11:42

score 55 · Accepted Answer · answered Sep 22 '14 at 10:16

Here I made an example with 2 divs:

.content which contains everything you need in frontend
.background - with text, images and everything else in background

To overwrap one div on another (make an overlay) you have to put them into same element, in this example it's #wrapper div. Put position: relative and width/height for wrapper; position: relative also should be set for your content div and position: absolute; top: 0; left: 0; for your background.

The final step is to setup z-index. Element containing a bigger value in z-index is rendered above elements with smaller z-index value. In other words you should set z-index for background div smaller then for content div.

Final HTML:

<div id="wrapper">
    <div class="content">    
        <p>This text is in frontend</p>
    </div>
    <div class="background">
        <p>Background text</p>
        <img src="http://nuclearpixel.com/content/icons/2010-02-09_stellar_icons_from_space_from_2005/earth_128.png" alt="background" />
        <img src="http://upload.wikimedia.org/wikipedia/en/0/0c/IrfanView_Logo.png" alt="background 2" />

    </div>
</div>

Final CSS:

#wrapper{
    position: relative;
    width: 200px;
    height: 200px;
}

.content{
    color: #FFFFFF;
    font-size: 26px;
    font-weight: bold;
    text-shadow: -1px -1px 1px #000, 1px 1px 1px #000;
    position: relative;
    z-index: 100;
}

.background{
    color: #999999;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -100;
}

View live example:

http://jsfiddle.net/1fevoyze/

Thanks, I used your method with `position: fixed;` for the `.background` element and it suits my needs with Skrollr.js and parallax. It really acts like a background element. (The positionning is still a pain though) — Seeven, Sep 22 '14 at 13:08
`position: fixed` also allows for floating other divs within the wrapper for a multi "column" layout. — Lexus de Vinco, Nov 17 '22 at 11:59

Gass · Answer 2 · 2022-05-21T07:01:01.753

It's key to understand that...

A page element with relative positioning gives you the control to absolutely position children elements inside of it.

As you can see in this example, the element with card class is the parent. This is needed if we want to add children elements with absolute positioning.

The trick here is to wrap the images inside an element and then position it absolute so we can use z-index: 0 which will stack under the elements inside <div class='overlay-content'> due to the fact that the overlay-content has z-index: 1

The z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order

.card{
  position:relative;
  width:245px;
  height:325px;
  overflow:hidden;
  border-radius:5px;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.bg-wrapper{
  position:absolute;
  z-index:0;
}
.overlay-content{
  position:absolute;
  z-index:1;
  width:100%;
  text-align:center;
}
.text{
  width:90%;
  margin-top:135px;
  height:80px;
  padding:5%;
  background-color:rgba(0,0,0,0.4);
  color:white;
}

<div class='card'>
  <div class='overlay-content'>
    <h1>Some Title Here</h1>
    <div class='text'>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>
  <div class='bg-wrapper'>
    <img src='https://i.stack.imgur.com/TCsgW.png' />
    <img src='https://i.stack.imgur.com/jLo2a.png' style='margin-top:-5px'/>
  </div>
</div>

score 3 · Answer 3 · 2014-09-22T11:34:22.773

3

Use the CSS element() function. See https://developer.mozilla.org/en-US/docs/Web/CSS/element. Currently available only in FF under the -moz-element prefix. Example:

<div style="width:400px; height:100px; background:-moz-element(#backgroundElt);">

An alternative would be to play with SVG's foreignObject tag, cloning the HTML for the element you want to use as background into it.

Spec is at http://dev.w3.org/csswg/css-images/#element-notation.

edited Sep 22 '14 at 11:34

answered Sep 22 '14 at 09:48

Although the CSS `element()` function is what I was looking for, it turns out not to behave as expected, besides the fact it only works on Firefox. Can you tell me more about the `foreignObject` tag ? I'm not familiar with SVG. – Seeven Sep 22 '14 at 10:03
Just out of curiosity, how did it turn out not to behave as expected? – Sep 22 '14 at 11:32

Use a DIV as a background for another element

3 Answers3

Linked