Forums

Niplo

Hi,

I'm pretty new to web design and javascript, I watched the Starry Night Video tutorial on this website that featured large images for a background that adjusted as you moved the browser window.

I've done a similar thing with a large image background that adjusts with the browser. I'm using Java Script for an accordion menu and also to slide down the main window. PROBLEM. When the main window animates down the background image gets warped, lines appear. Works fine if I don't use the 'repeat 20% 20%' but I like the effect:

http://www.get-over.net/Images/over/shot1.jpg
http://www.get-over.net/Images/over/shot2.jpg

any help.

CSS Part:

body {
  	font-family:	Geneva, Arial, Helvetica, sans-serif;
	font-size:11px;
	line-height:15px;
	background:url(images/face.jpg) repeat 20% 20%;
	text-align:left;
}

HTML

</head>

<body>
	<div id=\"container\">
            <div id=\"navBar\">
            
            <ul id=\"menu1\" class=\"menu\">
                    <li>
                        <a href=\"#\">Magazine</a>
                        <ul>
                            <li><a href=\"javascript:animatedcollapse.toggle('logo')\">Current Issue</a></li>
                            <li><a href=\"#\">Past Issues</a></li>
                            <li><a href=\"#\">Subscribe</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href=\"#\">Contact</a>
                        <ul>
                            <li><a href=\"#\">Contributors</a></li>
                            <li><a href=\"#\">Contact Us</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href=\"#\">Community</a>
                        <ul>
                            <li><a href=\"#\">Blog</a></li>
                        </ul>
                    </li>
                </ul>
			<div id=\"stuff\"></div>

            </div>

			<div id=\"logo\" style=\"display:none\">
            <p>Hey yall wassup</p><img src=\"../images/girl.jpg\" alt=\"girl\" />
            
            </div>
            <div style=\"clear:both;\"></div>
     </div>
</body>
</html>

Robskiwarrior

you dont have a live link by chance do you? Just kinda like pokin stuff with a stick, I mean firebug lol

Niplo

Just put something up:

http://www.get-over.net/Tester/index.html

Pretty sketchy but I'm still honing my skills. Any help or suggestions is greatly appreciated. Thanks

Robskiwarrior

mmm link not working? :(

Niplo

Not sure man, I tried the link on a different computer and it worked fine:
http://www.get-over.net/Tester/index.html
Not sure if being in Australia would have any bearing on this.

Robskiwarrior

works now :D

Its coz you have your background position as a %, its some strangely weird issue - which is well above my head lol

If you set a solid PX to the background pos instead of % then it works lovely, the only problem is you loose the reason you have a % position lol

I dunno how to get round that one dude... unless you dont mind having a more fixed bg... I will give it a think through again when its not so early in the morning...

treehouse : what would you like to learn today?

Forums

Javascript animated Divs trouble.