How to Overlap a Parent Div's Background Image Over its Children

Question

I want to overlay the background image of a parent div over the content of its children.

What I have in essence is simple:

<div> <!-- has BGImage -->
  <div>
    <div>
      <iframe /> <!-- serves content that needs to be interacted with -->
    </div>
  </div>
</div>

The top parent div has a background image (a silhouette of an ipad) and the content in the iframe is a page serving JQuery Mobile content (it is a mobile preview). I can't have another parent div with absolute positioning using z-index because the content in the iframe must remain fully usable and click-able.

The reason I need this is that the inside edge of the tablet silhouette has a transparent inner border, I need this to soften the edges of the served iframe content.

I hope this is achievable, I put the JavaScript and JQuery tags in the question because I am not shy to using if they need to be, but as always, if I can complete this using CSS then I am all for that.

Mock up JS fiddle basically showing what I have: http://jsfiddle.net/fQ22A/1/

The following image is where I am wanting to go based on the JSFiddle above:

enter image description here

This would be a really good question if it had a JSFiddle (and a picture of the desired end-result) :) — iCollect.it Ltd, Jun 04 '14 at 14:19
@MelanciaUK No not a duplication, the iframe needs to be fully opaque, we need to see the parents container background image visible OVER the iframwe — Phish, Jun 04 '14 at 14:21
@TrueBlueAussie es, it would, I will get going with that and edit. — Phish, Jun 04 '14 at 14:21
@MelanciaUK unless I have misunderstood you, thank you though. — Phish, Jun 04 '14 at 14:33
I'm still unsure about what are you expecting, but this should work? `#template_preview_iframe { border:none; margin:0; padding:0; }` — emerson.marini, Jun 04 '14 at 14:37
@MelanciaUK what I need is the child, content to be overlapped by the parents BG-Image. — Phish, Jun 04 '14 at 14:39
@abhitalks ahah, yes it would, but I couldnt't think of another way to have the image overlap the iframe, yet have the iframe content still interactable — Phish, Jun 04 '14 at 14:40
You're looking for some kind of cropping or clipping. I'm afraid there's no such thing. — emerson.marini, Jun 04 '14 at 14:42
Someone had a similar issue here: http://stackoverflow.com/questions/11264240/add-inset-box-shadow-on-google-maps-element — emerson.marini, Jun 04 '14 at 14:47
@MelanciaUK similar, but unfortunately, the hacky nature of my iframe content and its scroll bar will destroy the great use of box-shadow. — Phish, Jun 04 '14 at 15:07
If you just want the image on top of the iframe but still allow content underneath to be clickable you can use the [absolute positioning with pointer events](http://jsfiddle.net/fQ22A/3/). However this won't stop you not being able to see through the image and I'm not sure what the support for pointer events is currently. The only way to get a true background image is to add it to the page within the iframe as unless the page has a transparent body, it will always block anything that you try to put behind it, and anything you put in front of it will block the text in the iframe — Pete, Jun 04 '14 at 15:14

score 1 · Answer 1 · answered Jun 04 '14 at 15:12

Not the way you wanted but your purpose is solved here. http://jsfiddle.net/fQ22A/5/

Full Screen: http://jsfiddle.net/fQ22A/5/embedded/result/

HTML:

<div id="finalCont2">
  <div id="insidewrapper2">
    <div id="outsidewrapper2">
      <div class="fullheight2">
        <iframe id="template_preview_iframe" src="http://www.w3schools.com" width="770" height="1024"></iframe> 
      </div>
    </div>
  </div>
</div>

CSS:

#insidewrapper2{
background-image:url("http://desktop.ly/images/devices/ipad_mini_black.png");
background-repeat: no-repeat;
display: block;
height: 1289px;
margin-left: auto;
margin-right: auto;
margin-top: 30px;
width: 870px;
}
#outsidewrapper2{
position: relative;
}
.fullheight2{
   padding-top:133px;
}
#template_preview_iframe{
overflow:hidden;
    display:block;
    border:none;
    margin:0 auto;
}

Thank you, I think this is the closest I am going to get - I will play with this a little and report back but it is a robust & coherent approach. — Phish, Jun 04 '14 at 15:21

miguel-svq · Answer 2 · 2014-06-04T14:51:06.727

0

You can't do that.

...but you can get something close to what I guess your want using a box-shadow inner.

EDIT:

body{border:none;box-shadow: inset 0 0 10px #000;}

http://jsfiddle.net/rwA2f/1/

edited Jun 04 '14 at 14:51

answered Jun 04 '14 at 14:29

miguel-svq

2,136
9
11

not even with some wild hack - back to the drawing board then for my construction, hank you for the input – Phish Jun 04 '14 at 14:34
Not a big change, you could via script insert to body `border:none;box-shadow: inset 0 0 10px #000;` to the iframe... or put it in the css if you control it also. (And make iframe border none in the parent doc) – miguel-svq Jun 04 '14 at 14:44
Unfortunately the content inside is very heavy on the JS and doesnt respond well, also, the content in the Iframe will always have a scroll bar. Thank you though – Phish Jun 04 '14 at 15:05

score 0 · Answer 3 · answered Jun 04 '14 at 15:27

This could be something closer to what you are actually after:

Demo: http://jsfiddle.net/abhitalks/ZVEug/2/

Full Screen: http://jsfiddle.net/abhitalks/ZVEug/2/embedded/result/

You need to position the iframe inside your div using positioning. Here is a simple markup to give you the idea:

HTML:

<div class="outer"> 
    <iframe src="..." /> 
</div>

CSS:

div.outer {
    width: 320px;
    height: 320px;
    background: url('...') no-repeat top left;
    background-size: 100%;
    position: relative;
}

iframe {
    border: none;
    width: 250px;
    height: 220px;
    position: absolute; 
    top: 48px; left: 32px;
    border-radius: 10px;
    box-shadow: 0 0 30px #fff;
    opacity: 0.6; 
}

The trick is to use a combination of box-shadow with opacity to give the illusion of soft edges and also meets your requirement of the background peeping through at the same time the iframe contents are usable.

Please notice how the background's reflection (diagonal glass reflection) is visible through the iframe contents.

How to Overlap a Parent Div's Background Image Over its Children

3 Answers3