Simon Hayter Simon Hayter - 7 months ago 20
Javascript Question

How to fetch the background of DIV on a bottom layer with exact position using jQuery and CSS

I'm looking to make a page that has a background gradient that changes color every few seconds and blends between transitions. Now I want to apply this effect on the to the upper elements that are blocked by a element that has a solid background.

To give you a better example what I mean I have attached a simple mockup and hopefully your understand what I'm attempting to do, I'm open to suggestions.

Jquery and CSS

The problem is obviously the block that contains the black background which any PNG transparent used would see black not the gradient.

I'll include sample code so far:

<body><!-- A Jquery script will be used to add CSS background, Easy stuff -->
<div class="blackbox">
<div class="logo"><img src="#" alt=""></div>
<hr class="h-line">
<div class="v-line"> </div>
</div>


So what I'm after is either:


  • A known jQuery method to obtain a background image but it needs to be able to refer of the position of the gradient so its inline with the background.

  • A better solution to getting this to work, please bare in mind that the page needs to be responsive so I could use other methods but since its responsive I can't think of any.


Answer

Since you ask for alternatives to jQuery solutions

You could play a little with margins and box-shadow and keyframe animations.

Something in this direction for the shape (depends on what you want to do with which part - add content ... and in what way you want it to be responsive):

html:

<div class="wrapper">
    <div class="header"><img src="http://i.imgur.com/CUbOIxr.png" alt="Company name" /></div>
    <div class="content"></div>
</div>

CSS:

body {
    background:orange;
    width:100%;
    height:100%;
}
.wrapper {
    width:40%;
    height:90%;
    border:30px solid #000;
    border-right-width:100px;
    border-bottom-width:100px;
}
.header {
    width:100%;
    border-bottom:10px solid transparent;
    -webkit-box-shadow: 0 30px 0 #000;
    -moz-box-shadow: 0 30px 0 #000;
    box-shadow: 0 30px 0 #000;
}
.header img {
    width:100%;
}
.content {
    width:95%;
    height:400px;
    background-color:#000;
    margin-top:30px;
}

DEMO

This way no javascript is needed. And for the background you can use a linear gradient and do all animations with css transitions or keyframe animations. You also need to play with the lengths and adjust the borders and box-shadows to your needs, maybe add some @media queries for the responsiveness.

Hope this helps you a little in the right direction =)


Update:

I hoped the gradients changing was the smaller problem ;-) Silly me, sorry.

I will elaborate my CSS-only suggestion for the animation, but you can choose a javascript slider for the background animation, if you don't like CSS3 solutions - although this is the hot stuff now ;-)

Ok. So, I would add some more fixed positioned elements with gradient backgrounds (layer1 and layer2).

To have something in this direction in the html now:

<div class="layer layer1"></div>
<div class="layer layer2"></div>
<div class="wrapper">
    <div class="header">
        <img src="http://newtpond.com/test/company-name.png" alt="Company name" />
    </div>
    <div class="content"></div>
</div>

and add a keyframe animation on them in CSS (here it is just with the -webkit vendor prefix [probably cause I am a lazy bum], but I hope you can get the idea, and could add the others):

body {
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}
/* for the animation */
 .layer {
    position:fixed;
    width:100%;
    height:100%;
}
@-webkit-keyframes GoLayer1 {
    0% {
        opacity:1;
    }
    50% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}
@-webkit-keyframes GoLayer2 {
    0% {
        opacity:0;
    }
    50% {
        opacity:1;
    }
    100% {
        opacity:0;
    }
}
.layer1 {
    background: -webkit-linear-gradient(bottom, rgb(43, 70, 94) 29%, rgb(194, 41, 41) 65%, rgb(155, 171, 38) 83%);
    -webkit-animation: GoLayer1 5s infinite;
}
.layer2 {
    background: -webkit-linear-gradient(bottom, rgb(225, 202, 230) 29%, rgb(39, 163, 194) 65%, rgb(36, 124, 171) 83%);
    -webkit-animation: GoLayer2 5s infinite;
}
/* the wrapper shape */
 .wrapper {
    z-index:999;
    opacity:1;
    position:relative;
    width:40%;
    height:90%;
    border:30px solid #000;
    border-right-width:100px;
    border-bottom-width:100px;
}
.header {
    width:100%;
    border-bottom:10px solid transparent;
    -webkit-box-shadow: 0 30px 0 #000;
    -moz-box-shadow: 0 30px 0 #000;
    box-shadow: 0 30px 0 #000;
}
.header img {
    width:100%;
}
.content {
    width:95%;
    height:400px;
    background-color:#000;
    margin-top:28px;
}

DEMO (tested in Chrome 26 - looked cool =)

This is now where I can point you according this CSS-only approach. There is still stuff to modify and consider browser compatibility. But it is certainly an alternative ... and a step in the direction where html5 and css3 is going (if you want to be hot and cool ;-), hehe, sorry, too much silliness.

Good luck!


Update 2:

So, I overcame my laziness a tiny bit and added some more vendor prefixes to the top example (and of course you can use any image as background):

DEMO

And here I add another example, that is using a png image for the gradient, and is sliding up and down in the background (as another alternative):

DEMO