CSS/Javascript Tips
- Started
- Last post
- 10 Responses
- 5timuli
I've thrown this mock-up together to test out some CSS/Javascript and I've run across a couple of problems.
I have a little Javascript that loads a random background image behind the content (which is mostly text only). For some reason it's knocking off my background color, making the page white behind the image. Does anyone have any ideas why it's doing this? Care to point out the errors in my JS/CSS?
I didn't use a PHP image rotator because I'm an interwebs dunce and couldn't get the fucker to work. Should I stick with the JS or try again with the PHP? Would the PHP be faster or better for any reason?
Is it bad that I'm trying to load 160k images into the background? They're 1600x1600px and shouldn't repeat, but when the image ends the background color should make it a seamless transition, instead of just grey>WHITE!!!
Site:
http://www.joefarquharson.com/20…CSS:
http://www.joefarquharson.com/st…BTW, I'm not after a crit as this is very early test work and the images were quickly mocked up.
- 5timuli0
Is it something to do with this:
var cssStr="#"+el+" { background: url("+bgimg[random]+") no-repeat top left } ";
Is it clashing with the #body style in the linked style sheet? Should I specify the background color somewhere in the line above and drop the one from the linked style sheet?
- acescence0
i think this may work for you:
http://pastebin.com/m6cd255c3but... you have to paste it at the bottom of the document, because you are manipulating an element that may not yet be loaded (the body) when the js is executing in the head of the document.
- bokswagen0
try this and just like acescence said...attach it to the bottom of your page, to make sure the body tag loads first before the script runs.
// JavaScript Document
var banner= new Array()
banner[0]="img1.jpg"
banner[1]="img2.jpg"
banner[2]="img3.jpg"
banner[3]="img4.jpg"
banner[4]="img5.jpg"var random=Math.floor(5*Math.random...
document.write("<style>");
document.write("body {");
document.write(' background:url("' + banner[random] + '") repeat; background-attachment:fixed;back... center;');
document.write(" }");
document.write("</style>");
- 5timuli0
Thanks guys, but neither of them are making any difference.
acescence's script is a bit cleaner than my original so I've used that instead, but the background color problem doesn't go away. If I add the color to the CSS shorthand within the script I get this:
- 5timuli0
The bg image is 1600x1600 and fixed so hopefully the image constraints won't show, but I'd like to be on the safe side in case some 30" monitor geek has the browser window maxed.
- I'm on 1680x1050 on my 20" Monitor.Jnr_Madison
- Sorry, misread your post.Jnr_Madison
- 5timuli0
http://www.joefarquharson.com/20…
Well fuck me with a jaggy stick - it's only gone and worked this time (the PHP version). I tried umpteen times to get this to work last night and it just wouldn't.
- 5timuli0
Thanks for all ze help.
:)
- 5timuli0
OK, change of plan. I'm not keen on this 2-3 sec bg image load. Anyone have any links to random text/link color instead? PHP/CSS?