複数の画像がCSSで問題を整列する

私はcssとhtmlを初めて使用しています。私はアプリケーションを作成し、HTMLやCSSのページを作成しました。これらは、私のページの画像です：複数の画像がCSSで問題を整列する

home page

これは私の.cssファイルのコードスニペットです：

body{ 
    background-color:#D8D8D8; 
    background-image:url("../images/spring.png"), url("../images/security.png"); 
    background-size:200px 100px, 200px 100px; 
    background-repeat:no-repeat, no-repeat; 
    background-position:top right, bottom right; 
    margin-right:200px; 
    margin-left:15px; 
    }

問題：イメージが2ページで同じにならないことがわかります。第2のイメージは、ページの最上部にある最初のイメージのようにページの下部にある必要があります。どんな体でも私にそれをする方法を導くことができます。ひどいので、その言語には申し訳ありません。ありがとうございました。

出典

2012-02-28 AbdulAziz

私はそれはあなたのためにどのように動作するか（同じオブジェクトに2枚の背景画像を）知らないが、あなたはこのコードを使用することができます表示されるようにスクロールバーが発生します。

<html> 
    <head> 
     <style> 
      img.first_image { position: absolute; top: 0px; } 
      img.second_image { position: absolute; bottom: 0px; } 
      body 
      { background-color:#D8D8D8; 
       background-size:200px 100px, 200px 100px; 
       background-repeat:no-repeat, no-repeat; 
       background-position:top right, bottom right; 
       margin-right:200px; 
       margin-left:15px; 
       height:100%; 
      } 
     </style> 
    </head> 
    <body> 
     <img src="../images/spring.png" class="first_image" /> 
     <div> 
      <!-- every things you need --> 
     </div> 
     <img src="../images/security.png" class="second_image" /> 
    <body> 
</html>

出典

2012-02-28 16:22:26 samra

bodyおよびhtmlにheight:100%を追加します。

出典

2012-02-28 15:20:45 bookcasey

をあなたは私メートルを導くことができますしてください鉱石。つまり、htmlに追加する方法をより正確にすることができますか？私は体に追加したが、htmlでどこを追加するのか？ありがとう – AbdulAziz

'html {height：100％; } ' – bookcasey

は

両方の画像が固定位置に設定

body,html {height: 100%; width: 100%;} 

#image-id {position: absolute; bottom: 0; right: 0;}

出典

2012-02-28 15:22:13

のようなものを試してみてください。次に、最初の1つは右上に、もう1つは右から下に右に移動します。次に、ページのコンテンツが長くなってスクロール可能な場合でも、いつでも希望の位置に写真が表示されます。

出典

2012-02-28 15:26:45

このような意味ですか？ '背景位置：固定、固定;' – AbdulAziz

体がページの全高が少し多すぎるかもしれません

body{ 
    background-color:#D8D8D8; 
    background-image:url("../images/spring.png"), url("../images/security.png"); 
    background-size:200px 100px, 200px 100px; 
    background-repeat:no-repeat, no-repeat; 
    background-position:top right, bottom right; 
    margin-right:200px; 
    margin-left:15px; 
    height:100%; 
}

を試していない、しかし...それは場合height:95%;に設定する価値があるかもしれないということのようですそれは

出典

2012-02-28 15:29:38 imma

複数の画像がCSSで問題を整列する

答えて

関連する問題