javascript - 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.

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.

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.

Share Improve this question edited Apr 28, 2021 at 7:30 tanguy_k 12.4k6 gold badges62 silver badges64 bronze badges asked Aug 31, 2013 at 2:10 sameold 19.3k22 gold badges65 silver badges89 bronze badges

1 I'm not a CSS expert... that said I don't think it is possible – Arun P Johny Commented Aug 31, 2013 at 2:26
A possible (but tedious ) could be, Switching the child and grandchild elements ( body > child1 > div1) and by absolute positioning, place them wherever you want. – Jashwant Commented Aug 31, 2013 at 4:29

Add a ment |

4 Answers 4

Sorted by: Reset to default 2

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/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/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/aKHfr/2/

~~Happy Coding!~~

My HTML:

  <div class="p1">
       <div class="p2">
         <div class="p3">
           GandSOn
         </div>
       </div>
    </div>

My css:

    .p1 {
disapley: flex;
}

.p2{
display:inherit;
}

.p3 {
display:inherit;
}

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How to inherit grandparent CSS not parent? - Stack Overflow

4 Answers 4

Happy Coding!

与本文相关的文章

评论列表(0)