Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

CSS3 - Animate background image filter

CSS3 - Animate background image filter

Problem

I'm trying to figure out a solution to animate my site's Background filter.
I want it to go from sharp to blur on page load, which I know how to do, but as my background is on the body, adding a filter would affect everything.

body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
    background-image:url("bg_beach.jpg");
    background-size: 100% 100%;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

I've tried to add a new div for the background, but just messed everything up Maybe there would be a way with jQuery?

Problem courtesy of: Claudio

Solution

jQuery won't help here. You are dealing with CSS only. If adding a new DIV for you background image messes things up for you, try again. This time kick it out of the document flow like this:

.mydiv {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-image:url("bg_beach.jpg");
    background-size: 100% 100%;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

#main {
    position: relative;
}

The top, bottom, right, left properties set to 0 act as 100% width/height. Position absolute keeps the DIV out of your other elements layout flow.

Your HTML would look like:


    

Hope it helps

Solution courtesy of: tmslnz

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

CSS3 - Animate background image filter

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×