web-dev-qa-db-ja.com

div内の（背景）画像を中央に配置する方法は？

背景画像をdivの中央に配置することはできますか？私はすべてを試しましたが、成功しませんでした：

<div id="doit">
  Lorem Ipsum ...
</div>

//CSS
#doit { background-image: url(images/pic.png); background-repeat: none; text-align: center; }

これは可能ですか？

htmlcssimagebackgroundcenter
126
oompahloompah
#doit {
    background: url(url) no-repeat center;
}
259
Jake Lucas

background-position:center;を試してください

編集：この質問は多くのビューを取得しているため、追加情報を追加する価値があります：

背景画像はドキュメントの一部ではないため、フローの一部ではないため、text-align: centerは機能しません。

background-position:centerはbackground-position: center centerの省略形です。 （background-position: horizontal vertical）;

76
TimCodes.NET

Background-positionを使用します。

background-position: 50% 50%;
15
Capsule

背景画像が垂直に並んだスプライトシートの場合、次のように各スプライトを水平方向に中央揃えできます。

#doit {
    background-image: url('images/pic.png'); 
    background-repeat: none;
    background-position: 50% [y position of Sprite];
}

背景画像が水平に並んだスプライトシートである場合、次のように各スプライトを垂直方向に中央揃えできます。

#doit {
    background-image: url('images/pic.png'); 
    background-repeat: none;
    background-position: [x position of Sprite] 50%;
}

スプライトシートがコンパクトな場合、または前述のシナリオのいずれかで背景画像を中央に配置しようとしていない場合、これらのソリューションは適用されません。

7
claytonkirlew

これは私のために働く：

#doit{
    background-image: url('images/pic.png');
    background-repeat: no-repeat;
    background-position: center;  
}
5
Hemerson Varela

背景画像の中央または配置には、background-positionプロパティを使用する必要があります。 background-positionプロパティは、要素のtopおよびleft側から背景画像の開始位置を設定します。 CSS構文はbackground-position : xvalue yvalue;です。

「xvalue」および「yvalue」でサポートされる値は、pxのような長さの単位と、left、rightなどのパーセンテージ名と方向名です。

「xvalue」は背景の水平位置であり、要素の上部から始まります。 50pxを使用すると、要素の上部から "50px"離れます。 「yvalue」は、同じ条件を持つ垂直位置です。

したがって、background-position: center;を使用すると、背景画像が中央に配置されます。

しかし、私は常にこのコードを使用します：

.yourclass {
  background: url(image.png) no-repeat center /cover;
 }

私はそれがとても混乱していることを知っていますが、それは意味します：

.yourclass {
  background-image: url(image.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

また、background-sizeも新しいプロパティであり、圧縮コードでは/coverですが、これらのコードはfillバックグラウンドのサイズ変更とWindowsデスクトップのバックグラウンドでの配置を意味します。

background-positionの詳細は here で、background-sizeは here で確認できます。

4
Morteza Sadri

これは私のために働く：

.network-connections-icon {
  background-image: url(url);
  background-size: 100%;
  width: 56px;
  height: 56px;
  margin: 0 auto;
}
3
Collin Adams

これは私のために働く：

<style>
   .WidgetBody
        {   
            background: #F0F0F0;
            background-image:url('images/mini-loader.gif');
            background-position: 50% 50%;            
            background-repeat:no-repeat;            
        }
</style>
1
Rodrigo Valenzuela