How to Inherit grandparent CSS not parent?


Tags: javascript,jquery,css,background,background-image

Problem :

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.



Solution :

This would be with using javascript and jQuery:

CSS

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

JS

$(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/


    CSS Howto..

    How to use a variable for image paths with less mixins

    How to make css border shape [duplicate]

    How do I get this list to be seperated by a tab? (HTML/CSS)

    How to over ride the transparency aspect in CSS

    how to find a class and apply a style with jquery?

    How to make information appear only when hovered over using jquery and css?

    How do I keep my input fields on one line while centering the DIV that contains them?

    How to edit CSS so button appears on same line as input field?

    How to handle CSS unable to load resource error

    How to prevent anchor tag from following the link on click, but make it show the submenu?

    How to change active menu item style in html/css/js/php

    JS/CSS: How to change z-index value after scrolling down past 1200 pixels (in height)?

    Picture doesn't show up [closed]

    How to create a nested vertical menu with horizontally sub-menus using css

    How to keep two divs and images inside them to be side by side on browser resize?

    How can I get Outlook to display my tables properly

    how to recreate tex's over- underbracket using css

    How to target last TD cell?

    c3.js - how to show hand cursor on bar chart hover

    How to target iPhone 3GS AND iPhone 4 in one media query?

    How to scale canvas and keep its position on screen?

    How to make an image not overlap navigation bar in CSS/HTML [closed]

    How to force Twitter Bootstrap .dl-horizontal DT content to wrap instead of truncate?

    How to make a snowboard (or squeezed rectangle) shaped div in css?

    How to do img validation

    How to apply a drop shadow on a triangle in CSS?

    CSS How to change background color of text?

    CSS: How to position divs 2 by 2

    How do you close the CSS preview view in Eclipse?

    Bootstrap with Picture Slideshow