「CSSで背景画像の位置（ピクセル）指定のサンプル」を別ウィンドウで開く
各種サンプルとソース一覧 | PCスキルの小技・忘却防止メモ |

CSSで背景画像の位置（ピクセル）指定のサンプル

  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>CSSで背景画像の位置（ピクセル）指定のサンプル</title>
  7. <style type="text/css">
  8. #wrapBgImgPos{}
  10. #wrapBgImgPos h2{
  11.   margin:1em 0 0;
  12.   position:0;
  13. }
  15. #wrapBgImgPos ol{
  16.   margin:0;
  17.   padding:0;
  18.   list-style:none;
  19. }
  21. #wrapBgImgPos li{
  22.   margin:0;
  23.   padding:5px;
  24.   list-style:none;
  25.   display:inline-block;
  26.   text-align:center;
  27. }
  29. .bgSample{
  30.   background-image: url("./images/catnapsample.gif");
  31.   background-repeat:no-repeat;
  32.   width:90px;
  33.   height:90px;
  34.   border:1px solid #e0e0e0;
  35.   margin-top:5px;
  36. }
  38. .all{width:125px; height:143px;}
  39. .flower{background-position:-70px -105px;}
  41. .view00{background-position:0 0;}
  42. .view01{background-position:10px 0;}
  43. .view02{background-position:20px 0;}
  44. .view03{background-position:30px 0;}
  45. .view04{background-position:40px 0;}
  46. .view05{background-position:50px 0;}
  47. .view11{background-position:-10px 0;}
  48. .view12{background-position:-20px 0;}
  49. .view13{background-position:-30px 0;}
  50. .view14{background-position:-40px 0;}
  51. .view15{background-position:-50px 0;}
  52. .view21{background-position:0 10px;}
  53. .view22{background-position:0 20px;}
  54. .view23{background-position:0 30px;}
  55. .view24{background-position:0 40px;}
  56. .view25{background-position:0 50px;}
  57. .view31{background-position:0 -10px;}
  58. .view32{background-position:0 -20px;}
  59. .view33{background-position:0 -30px;}
  60. .view34{background-position:0 -40px;}
  61. .view35{background-position:0 -50px;}
  62. .view41{background-position:10px 10px;}
  63. .view42{background-position:20px 20px;}
  64. .view43{background-position:30px 30px;}
  65. .view44{background-position:40px 40px;}
  66. .view45{background-position:50px 50px;}
  67. .view51{background-position:10px -10px;}
  68. .view52{background-position:20px -20px;}
  69. .view53{background-position:30px -30px;}
  70. .view54{background-position:40px -40px;}
  71. .view55{background-position:50px -50px;}
  72. .view61{background-position:-10px 10px;}
  73. .view62{background-position:-20px 20px;}
  74. .view63{background-position:-30px 30px;}
  75. .view64{background-position:-40px 40px;}
  76. .view65{background-position:-50px 50px;}
  77. .view71{background-position:-10px -10px;}
  78. .view72{background-position:-20px -20px;}
  79. .view73{background-position:-30px -30px;}
  80. .view74{background-position:-40px -40px;}
  81. .view75{background-position:-50px -50px;}
  83. </style>
  85. </head>
  86. <body>
  87. <h1>CSSで背景画像の位置（ピクセル）指定のサンプル</h1>
  89. <p>「background-position」の値次第で以下のような感じになる。</p>
  91. <p>
  92. 「contain」は、枠内に収まる最大サイズ。<br />
  93. 「cover」は、枠内が覆われる最大サイズ。<br />
  94. </p>
  96. <div id="wrapBgImgPos">
  97. <ol>
  98. <li><div class="bgSample all"></div>元画像</li>
  99. </ol>
  101. <h2>花を右上にもってきたいとき</h2>
  102. <ol>
  103. <li><div class="bgSample flower"></div>(-70px -105px)</li>
  104. </ol>
  105. ※もしくは、「background-repeat:no-repeat;」を解除して、正の整数指定ってのもあり。
  107. <h2>右にずらしていく</h2>
  108. <ol>
  109. <li><div class="bgSample view00"></div>(0, 0)</li>
  110. <li><div class="bgSample view01"></div>(10px, 0)</li>
  111. <li><div class="bgSample view02"></div>(20px, 0)</li>
  112. <li><div class="bgSample view03"></div>(30px, 0)</li>
  113. <li><div class="bgSample view04"></div>(40px, 0)</li>
  114. <li><div class="bgSample view05"></div>(50px, 0)</li>
  115. </ol>
  117. <h2>左にずらしていく</h2>
  118. <ol>
  119. <li><div class="bgSample view00"></div>(0, 0)</li>
  120. <li><div class="bgSample view11"></div>(-10px, 0)</li>
  121. <li><div class="bgSample view12"></div>(-20px, 0)</li>
  122. <li><div class="bgSample view13"></div>(-30px, 0)</li>
  123. <li><div class="bgSample view14"></div>(-40px, 0)</li>
  124. <li><div class="bgSample view15"></div>(-50px, 0)</li>
  125. </ol>
  127. <h2>下にずらしていく</h2>
  128. <ol>
  129. <li><div class="bgSample view00"></div>(0, 0)</li>
  130. <li><div class="bgSample view21"></div>(0, 10px)</li>
  131. <li><div class="bgSample view22"></div>(0, 20px)</li>
  132. <li><div class="bgSample view23"></div>(0, 30px)</li>
  133. <li><div class="bgSample view24"></div>(0, 40px)</li>
  134. <li><div class="bgSample view25"></div>(0, 50px)</li>
  135. </ol>
  137. <h2>上にずらしていく</h2>
  138. <ol>
  139. <li><div class="bgSample view00"></div>(0, 0)</li>
  140. <li><div class="bgSample view31"></div>(0, -10px)</li>
  141. <li><div class="bgSample view32"></div>(0, -20px)</li>
  142. <li><div class="bgSample view33"></div>(0, -30px)</li>
  143. <li><div class="bgSample view34"></div>(0, -40px)</li>
  144. <li><div class="bgSample view35"></div>(0, -50px)</li>
  145. </ol>
  147. <h2>右下にずらしていく</h2>
  148. <ol>
  149. <li><div class="bgSample view00"></div>(0, 0)</li>
  150. <li><div class="bgSample view41"></div>(10px, 10px)</li>
  151. <li><div class="bgSample view42"></div>(20px, 20px)</li>
  152. <li><div class="bgSample view43"></div>(30px, 30px)</li>
  153. <li><div class="bgSample view44"></div>(40px, 40px)</li>
  154. <li><div class="bgSample view45"></div>(50px, 50px)</li>
  155. </ol>
  157. <h2>右上にずらしていく</h2>
  158. <ol>
  159. <li><div class="bgSample view00"></div>(0, 0)</li>
  160. <li><div class="bgSample view51"></div>(10px, -10px)</li>
  161. <li><div class="bgSample view52"></div>(20px, -20px)</li>
  162. <li><div class="bgSample view53"></div>(30px, -30px)</li>
  163. <li><div class="bgSample view54"></div>(40px, -40px)</li>
  164. <li><div class="bgSample view55"></div>(50px, -50px)</li>
  165. </ol>
  167. <h2>左下にずらしていく</h2>
  168. <ol>
  169. <li><div class="bgSample view00"></div>(0, 0)</li>
  170. <li><div class="bgSample view61"></div>(-10px, 10px)</li>
  171. <li><div class="bgSample view62"></div>(-20px, 20px)</li>
  172. <li><div class="bgSample view63"></div>(-30px, 30px)</li>
  173. <li><div class="bgSample view64"></div>(-40px, 40px)</li>
  174. <li><div class="bgSample view65"></div>(-50px, 50px)</li>
  175. </ol>
  177. <h2>左上にずらしていく</h2>
  178. <ol>
  179. <li><div class="bgSample view00"></div>(0, 0)</li>
  180. <li><div class="bgSample view71"></div>(-10px, -10px)</li>
  181. <li><div class="bgSample view72"></div>(-20px, -20px)</li>
  182. <li><div class="bgSample view73"></div>(-30px, -30px)</li>
  183. <li><div class="bgSample view74"></div>(-40px, -40px)</li>
  184. <li><div class="bgSample view75"></div>(-50px, -50px)</li>
  185. </ol>
  186. <div>
  188. <div style="font-size:10pt;text-align:right;margin-top:0.5em;">
  189. <a href="//tips.recatnap.info/" target="_top">PCスキルの小技・忘却防止メモ</a> -
  190. <a href="//tips.recatnap.info/wiki/" target="_top">PCスキルの小技・忘却防止メモのまとめ（wiki）</a>
  191. </div>
  193. <div style="font-size:10pt;text-align:center;margin-top:0.5em;padding:0.5em;border-top:1px solid #ccc;">
  194. Copyright &copy; 2009 by PCスキルの小技・忘却防止メモ. All rights reserved.
  195. </div>
  197. </body>
  198. </html>