web-dev-qa-db-ja.com

CSSの背景サイズのカバーと背景位置

HTML：

_#backgroundproduct {
  position: fixed;
  top: 5%;
  left: 5%;
  width: 90%;
  height: 90%;
  z-index: 12;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-position: top;
}_
<div id="backgroundproduct" style="background-image: url(http://example.com/example.jpg)">

背景画像として画像を使用していますが、画像の下部のみが上部よりも重要です。

背景を少し上げるにはどうすればよいですか？

htmlcsscss3background-image
27
Ivo

下部がより重要な場合：background-position: bottom;

background-positionでは、パーセント値も使用できます：0% 0%;デフォルトでは。

最初の値は水平位置で、2番目の値は垂直位置です。左上隅は0％0％です。右下隅は100％100％です。 1つの値のみを指定した場合、他の値は50％になります。

試してみてください background-position: 0% -10%;

40
Stéphane Bruckert

次を使用できます。

background-position: center bottom;
7
vivek

明確にするために、背景位置の割合は、画像と背景コンテナの両方に対して計算されます。したがって、バックグラウンドの位置：25％25％;バックグラウンドコンテナでXとYの両方の25％ポイントを見つけ、そのポイントの上に画像の25％、25％ポイントを配置します。

1
m b