CODEWITHSUNDEEP
javascriptjqueryhtmlcsscss-position
user2703728
user2703728

Reputation:

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

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

Upvotes: 2

Views: 3513

Answers (3)

Abhitalks
Abhitalks

Reputation: 28437

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.

Upvotes: 0

Mayank Tripathi
Mayank Tripathi

Reputation: 1352

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;
}

Upvotes: 0

miguel-svq
miguel-svq

Reputation: 2176

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/

Upvotes: 0

Related Questions