2016-06-13 1 views
0

基本的にコードが動作しています。画像をサイトレイアウトの右上に表示するのに問題があります。それは右下がりのデフォルトであり、それは私が望むものではありません。Javascriptのランダムな背景が右上に固定

私は迷っているので、右上に画像が表示されるように助けてください。

私はそれも簡単なことだと思う。ここでは、要求を1として>の.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> 

行なわれていますCSSの一部である:それはだHTML用として

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%; 
} 

必ずうん、ここで行なわれていCSSですフォーラムホストZetaboardsでしたがって、HTMLはほとんどが自動化されています。

+0

あなたは、いくつかのHTMLとCSSファイルを投稿することができますか?あなたの問題は、提供されたjsコードではありません(私はbgイメージが画面上にレンダリングされると思います)。 – ali404

+0

あなたは...実際にこの質問をして私の問題を解決しました。それは私が行っている最上層の背景画像の位置に配置していました。あなたは天才です。 ;) –

+0

あなたのコードに基づいて作成されたこのplunkerをチェックしてください。https://plnkr.co/edit/zEQbUhvDE4Ug2GYL96Tc?p=preview、あなたのコードとして変更を行い、問題に直面している場所を教えてください。 – Deep

答えて

0

また、このように、Javascriptを経由デフォルトの背景の位置を設定することができます。

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

これはかなり自己説明する必要があります。

ここからわかります。

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

私はそれを試しましたが、それはCSSラインによって上書きされていました。私は今何が間違っているのか、なぜ私が試したときにこれがうまくいかないのかを知っています。 私は狂っていると思った。私はあなたが本当にそうではないことを確認していただき、ありがとうございます。 –

+0

それはあなたのために今働いていることを聞いて良いです。残念ながら、私はあなたのCSSコードを見て忘れてしまったので、私は上書きを考慮しませんでした。 Yikes! –

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> 
関連する問題