1

Could somebody please help me? I have a site with an image set as background to the "body" element. I need to create an effect like "fade in".

This is the site http://www.ladycup.eu/.

If you zoom out, you can see the leaves on the side of the main content box. That is the image and I need it to "grow" from under the content box if you know what I mean. I have read much advice on this topic - like creating a div with this image in the background, etc. but in this case I can't do that. I would be really grateful for any help...

caitriona
  • 8,569
  • 4
  • 32
  • 36
Michal Artazov
  • 4,368
  • 8
  • 25
  • 38
  • because I got that site already made by somebody else and it has extremely complex structure, I'm not sure why, but there lots and lots of files that influence the content of the page and I'd go crazy before figuring out how to add a div there – Michal Artazov Oct 08 '12 at 08:38
  • Clear the body background image, which I assume is centralized in a stylesheet, and then append the div(s) to the `` via jQuery in an external JS script on page load. – glortho Oct 08 '12 at 13:47

1 Answers1

0

I've checked the site, but I couldn't see the background of the body, anyway, If I got your question, you want the background image of the body to fade out and grow above the content, if so,

Using CSS3, define a class and call it what ever you want, let's call it ani

.ani {
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

and in you HTML code add this class to the body <body class="ani">

Last thing, add the background to the body, and on load change the opacity

<script>
$(document).ready(function(){
   $('#Body').css('opacity', 0.1);
});
</script>
Mohammad Anini
  • 5,073
  • 4
  • 35
  • 46