How to Inherit grandparent CSS not parent?

I have a feeling this won't be possible, but thought I'd ask anyway.

<body>                  //body uses 'back' background
<div id="div1">         //div1 uses 'front' background
   <div id="child1">    //child1: no backgrounds, so shows 'front' background
   </div>
</div>
</body>

My body element uses a background image. (I'll call it the back background image)
div1 uses a different background image (I'll call it the front background image), so the front background image covers over the main background image.
div1 contains a child div child1 that doesn't use any background images, so it just shows the background image of its parent i.e. it shows the front background.

I would like child1 to use the background of body and not the background of its parent div1. Because of the nature of the back background (it's a drawing, not a repeating pattern), I can't just apply the back background image to child1. I actually need a way to make a hole in div1's background so that child1 gets the back background image as its background, and not its parent's background.

So my question is: is there a way a div can inherit its grandparent's background, as opposed to its parent's background?

If this isn't possible with CSS, I'm open to javascript solutions.

This would be with using javascript and jQuery:

CSS

body {
   background: url("Background 1");
}
#div1 {
   background: url("Background 2");
}
#child1 {
   background: url("Background 1");
}

$(function() {

  function positionBackground() {

     var myChild1   = $("#child1");
     myChild1.css({
        backgroundPosition : "-" + myChild1.offset().left + "px -" + myChild1.offset().top + "px"
     });
  }

  positionBackground();

  $(window).resize(positionBackground);
});

Here is the fiddle: http://jsfiddle.net/gMK9G/

I don't think you'll be able to change the way that styles are inherited, that said, you shouldn't really need to.

This is a little rough, but you could use the same image on the child div as you're using on the body and just play with the background positioning to line it up.

Working Example

body {
    background: url("Background 1");
}
#div1 {
    background: url("Background 2");
}
#child1 {
    background: url("Background 1");
    background-position: 0px -125px; /* adjust as needed */
}

UPDATE 2 Elements in the DOM Cannot share the same background image, you can maybe apply the background image and position them exactly so that it looks like they are, but in reality it is not possible.

As far as I am aware this is not currently possible because css only has inherit and inherit "inherits" from it's parents and there is no way to customize that. Of course javascript can do this easily and I will provide a jQuery example only because you have the jquery tag.

$('.inherit-grandparent').each(function( element ) {
    var $this = $(this),
        property = $this.attr('grandparent-property'),
        value = $this.parent().parent().css(property);
    if(property && value) $this.css(property, value);
});

Usage

<div class="inherit-grandparent" grandparent-property="background"></div>

Demo: http://jsfiddle.net/aKHfr/

So not only will this solve your problem, but it's dynamic so you can use it on any element and request any property.

Update:

Here is a jQuery Plugin version, if you would prefer that.

jQuery.fn.inheritGrandparent = function( property ) {
    var $this = $(this),
        value = $this.parent().parent().css(property);
    if(property && value) $this.css(property, value);
};

Usage:

$('#test').inheritGrandparent('background');

Demo: http://jsfiddle.net/aKHfr/2/

~~Happy Coding!~~

来源：https://stackoverflow.com/questions/18543810/how-to-inherit-grandparent-css-not-parent

标签

javascript

jquery

css

background

background-image