2016-06-13 14 views
0

Ich habe den Code funktioniert, im Grunde. Ich habe Probleme, das Bild so zu setzen, dass es oben rechts im Layout der Website angezeigt wird. Es ist Standard unten rechts und das ist nicht, was ich begehre.Javascript zufälligen Hintergrund oben rechts behoben

Jede Hilfe, um es zu bekommen, so dass das Bild oben rechts angezeigt wird, da ich ratlos bin.

Ich wette, es ist auch etwas Einfaches. > .o

<script type='text/javascript'> 
var bgColorArray = ['http://s33.postimg.org/5xlufyx6n/image.png','http://s33.postimg.org/y1sy7zkvz/BG2.png','http://s33.postimg.org/icmelisu7/BG3.png','http://s33.postimg.org/twvtrar9b/BG4.png','http://s33.postimg.org/xvy4urypr/BG5.png','http://s33.postimg.org/kpmh0h75r/BG6.png','http://s33.postimg.org/7d6aukl8f/BG7.png','http://s33.postimg.org/3xsf9m933/BG8.png','http://s33.postimg.org/4dhh7uz5r/BG9.png','http://s33.postimg.org/6kzi108lb/BG10.png','http://s33.postimg.org/3jmyfngjj/BG11.png','http://s33.postimg.org/55klqfkan/BG12.png'], 
    selectBG = bgColorArray[Math.floor(Math.random() * bgColorArray.length)]; 

document.body.style.backgroundImage = 'url(' + selectBG + ')'; 
</script> 

Per hier angefordert ist der Teil der CSS, die bewirkt hat ist:

Ja sicher, hier ist die CSS, die bewirkt hat ist:

html,body { 
background: url(http://s33.postimg.org/7nk1hqiwv/Woosh2.png) right bottom fixed no-repeat, url(http://s33.postimg.org/nk9mmywjj/ONEMORETIME.png) left top fixed no-repeat, url(http://s33.postimg.org/xgapmm2bj/Left_Side_Repeat.png) left bottom fixed repeat-y, url(http://s33.postimg.org/k00q0gawv/6_Done.png) fixed repeat; 
color:#FFF; 
text-shadow:#000 1px 1px 0; 
font-family: "Comic Sans MS", "Trebuchet MS", "Bitstream Vera Sans", "Verdana", sans-serif; 
font-size: 12px; 
margin: 0; 
padding:0; 
height: 100%; 
} 

Wie für die HTML es ist auf einem Forum-Host, Zetaboards. So ist das HTML größtenteils automatisiert.

+0

Können Sie einige HTML und CSS-Dateien erstellen? Dein Problem ist nicht mit dem js Code versehen (ich vermute deine bg Bilder rendern auf dem Bildschirm). – ali404

+0

Sie ... haben mein Problem gerade gelöst, indem Sie diese Frage gestellt haben. Es platzierte es in der Position der obersten Schicht von Hintergrundbildern, die ich gemacht habe. Du bist ein Genie. ;) –

+0

check out dieser Plunker erstellt basierend auf Ihrem Code https://plnkr.co/edit/zEQbUhvDE4Ug2GYL96Tc?p=preview, hoffe, es hilft sonst die Modifikation als äh Ihr Code und lassen Sie uns wissen, wo Sie das Problem haben. – Deep

Antwort

0

Sie können auch die Standard-Hintergrundposition durch Javascript, wie diese ein:

document.body.style.backgroundPosition = 'right top' 

Es sollte ziemlich selbsterklärend.

Und Sie können sehen, dass es hier funktioniert.

var bgColorArray = ['http://s33.postimg.org/5xlufyx6n/image.png', 'http://s33.postimg.org/y1sy7zkvz/BG2.png', 'http://s33.postimg.org/icmelisu7/BG3.png', 'http://s33.postimg.org/twvtrar9b/BG4.png', 'http://s33.postimg.org/xvy4urypr/BG5.png', 'http://s33.postimg.org/kpmh0h75r/BG6.png', 'http://s33.postimg.org/7d6aukl8f/BG7.png', 'http://s33.postimg.org/3xsf9m933/BG8.png', 'http://s33.postimg.org/4dhh7uz5r/BG9.png', 'http://s33.postimg.org/6kzi108lb/BG10.png', 'http://s33.postimg.org/3jmyfngjj/BG11.png', 'http://s33.postimg.org/55klqfkan/BG12.png']; 
 
selectBG = bgColorArray[Math.floor(Math.random() * bgColorArray.length)]; 
 

 
document.body.style.backgroundImage = 'url(' + selectBG + ')'; 
 
document.body.style.backgroundPosition = 'right top';

+0

Ich habe das versucht, aber es wurde von der CSS-Zeile überschrieben, in die es sich einklinkte. Ich weiß jetzt, was ich falsch gemacht habe und warum das nicht funktionierte, als ich es versuchte. Ich dachte, ich wäre verrückt. Ich weiß es zu schätzen, dass Sie bestätigt haben, dass ich es tatsächlich nicht war. –

+0

Gut zu hören, dass es jetzt für Sie funktioniert. Leider habe ich vergessen, einen Blick auf Ihren CSS-Code zu werfen, sodass ich das Überschreiben nicht berücksichtigt habe. Huch! –

0
<!DOCTYPE html> 
<html> 
<style> 
.bodyclass 
{ 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    background-position: right; 
    background-position: right 20px top 10px; 
} 
</style> 
<body class="bodyclass"> 

<p id="demo">Click the button to change the text in this paragraph.</p> 

<button onclick="myFunction()">Try it</button> 

<script> 
function myFunction() { 

var bgColorArray = ['http://s33.postimg.org/5xlufyx6n/image.png','http://s33.postimg.org/y1sy7zkvz/BG2.png','http://s33.postimg.org/icmelisu7/BG3.png','http://s33.postimg.org/twvtrar9b/BG4.png','http://s33.postimg.org/xvy4urypr/BG5.png','http://s33.postimg.org/kpmh0h75r/BG6.png','http://s33.postimg.org/7d6aukl8f/BG7.png','http://s33.postimg.org/3xsf9m933/BG8.png','http://s33.postimg.org/4dhh7uz5r/BG9.png','http://s33.postimg.org/6kzi108lb/BG10.png','http://s33.postimg.org/3jmyfngjj/BG11.png','http://s33.postimg.org/55klqfkan/BG12.png'], 
    selectBG = bgColorArray[Math.floor(Math.random() * bgColorArray.length)]; 

document.body.style.backgroundImage = 'url(' + selectBG + ')'; 
} 
</script> 

</body> 
</html>