I am curios how the designers of this site http://starcraft2.com/ did that nice effect on the bottom of the page ? It's a image that stand still when I scroll the page, but the image container, which is not a simple border, moves with my scrolling. How did they do that ? css ? and without flash please, because I know they did not use it. Thx
i think they put an iframe beneath the actual content. the iframe 100% width and height... Could it ibe it?
CSS: .footer-table {width:100%;} .footer-left {width:50%; background:url(/images/layout/footer-left.gif) 100% 0 no-repeat;} .footer-right {width:50%; background:url(/images/layout/footer-right.gif) 0 0 no-repeat;} .footer {height:391px; margin:0; padding:0; clear:both; position:relative; text-align:center; font:bold 8px Arial, Helvetica, sans-serif; text-transform:uppercase; color:#a7a7a7; background:url(/images/layout/bg-planet.jpg) 50% 100% fixed no-repeat;} .footer div {background:url(/images/layout/bg-footer2.gif) 0 0 no-repeat;} .footer div div {height:391px; background:url(/images/layout/bg-footer.jpg) 0 100% no-repeat;} .footer div div div {width:893px; height:auto; background:transparent;} .footer div div div div {padding:0;} .footer-content {position:absolute; bottom:0px; left:0; text-align:center;} .footer-content .logos {width:auto; margin:30px 0 0; position:relative;} .footer-content .copyright {margin:0 auto 10px;} .footer-content .logo-esrbprivacy {width:117px; height:66px; position:absolute; left:150px; top:6px;} .footer-content .logo-esrbrating {width:56px; height:85px; position:absolute; left:60px; top:-12px;} .footer-content .logo-esrb {width:125px; height:61px; position:absolute; left:155px; top:0;} .footer-content .logo-blizz {width:118px; height:90px; margin:0 auto;} .footer-content .logo-bnet {width:147px; height:84px; position:absolute; left:606px; top:2px;} Code (markup): HTML: <table class="footer-table"><tbody><tr><td class="footer-left"></td><td><div class="footer"><div><div><div><div class="footer-content"><div class="logos"><div class="logo-esrbprivacy"><a href="http://www.blizzard.com/privacy.shtml"><img title="" alt="" src="/images/layout/logo-esrbprivacy.png"></a></div><div class="logo-esrbrating"><a href="http://www.esrb.org/ratings/ratings_guide.jsp"><img title="" alt="" src="/images/layout/ratingsymbol_rp.gif"></a></div><div class="logo-blizz"><a href="http://www.blizzard.com"><img title="" alt="Blizzard.com" src="/images/layout/logo-blizz.png"></a></div><div class="logo-bnet"><a href="http://www.battle.net"><img title="" alt="Battle.net" src="/images/layout/logo-bnet.png"></a></div></div><div class="copyright"><a href="http://www.blizzard.com/privacy.shtml">Online Privacy Policy</a> | <a href="http://www.blizzard.com/legalfaq.shtml">©2008 Blizzard Entertainment. All rights reserved.</a></div></div></div></div></div></div></td><td class="footer-right"></td></tr></tbody></table> Code (markup): With basically this image http://starcraft2.com/images/layout/bg-footer2.gif overlaying this image http://starcraft2.com/images/layout/bg-planet.jpg which is fixed on the background. Since it's fixed it doesn't scroll with the rest of the content.
very easy: CSS .fixed { background: url(fixedimage.jpg) no-repeat fixed 50% 100%; } .scroll { background:transparent url(holes.gif) no-repeat 0% 0%; width:600px; height:300px; } Code (markup): HTML <div class="fixed"> <div class="scroll"></div> </div> Code (markup): of course width and height are just as example, in this case they would match an hypothetical gif image 600px by 300px.
Hey, I can only see this as only source code for that page <?xml version="1.0" encoding="UTF-8"?> <?xml-stylesheet type="text/xsl" href="layout/frontpage.xsl"?> <page lang="es_es"> <frontpage/> </page> Code (markup):
They transform XML to XHTML cause otherwise you couldn't see the site in Internet Exploder. In Firefox with the Web Developers Toolbar, you can right-click on the page, and View Generated Source (which is different than the source you see under View Source). I think they were wasting their time writing it in XML and using XSLT... since it all has to go back to XHTML and CSS anyway.
If it's on Dynamic Drive, it's likely a JS version. What's nice about the above is that it's just HTML and CSS. If I were to use JS on top of that, I'd go ahead and add a bunch of other stuff-- fades, glows, I dunno. Fancy stuff : )
I have tried the effect with the code of Themystical and the images linked by Stomme poes and it is quite simple. But the foreground image must have some property I have to restitute.
Yeah, thx Themystical, it works great, can someone do a upgrade of this version please ? The background image stays sticked to the bottom of the webpage, and I want it to stay sticked to the bottom of the div. When I have something after the div, the effect turns ugly because the background image sticks to the bottom of the page and the .gif frame sticks to the top of the div. Through the space you can see the page background.
thats really easy, you can just use layers via css and use a png or gif image that has transparency but the main thing is that you need a browsers that supports transparency as IE does NOT, which is why in IE 6 it is fixed and does not scroll like a window
Raynor It's gotta stick to the body to get the scroll effect working... you'll need to fiddle with the forground image and div. The "frame" you mean (I hope they're not real frames) should be the same size as the div, so it shouldn't be at the "top" of it... if this div is like, a page container, then you'll need more divs, not just one, with the top part of the foreground image on a top element and sides on a middle element and the bottom on like the footer or so.
It's definitely just a fixed CSS background image. Dunno how they got the see-through holes, though. Shouldn't be too hard.
Hy again guys, remember the effect ? ) It works, fine on Firefox, but I just noticed it wont work in IE. Why ? And how can I make it work in IE also ?