<div>要素に背景画像を追加する

170

<div>要素に背景画像を含めることは可能ですか？その場合、どうすればこれを実行できますか？

html

204

あなたはこれを意味しますか？

<style type="text/css">
.bgimg {
    background-image: url('../images/divbg.png');
}
</style>

...

<div class="bgimg">
    div with background
</div>

— phoibos
ソース

繰り返し不可に設定できますか？

— Valentino Ru

12

はい：background-repeat：no-repeat; w3schools.com/cssref/pr_background-repeat.asp

— マットベッカー

42

CSSのbackgroundプロパティを使用してそれを行うことができます。それを行うにはいくつかの方法があります：

ID別

HTML： <div id="div-with-bg"></div>

CSS：

#div-with-bg
{
    background: color url('path') others;
}

クラス別

HTML： <div class="div-with-bg"></div>

CSS：

.div-with-bg
{
    background: color url('path') others;
}

HTML（これは悪です）

HTML： <div style="background: color url('path')"></div>

どこ：

色は、16進数またはX11 Colorsからの色です。
pathは画像へのパスです
他のポジション、アタッチメントなど

background CSSプロパティは、その構文のすべてのbackground-xxxプロパティの接続です。

background： background-color background-image background-repeat background-attachment background-position ;

ソース：w3schools

— ロビック
ソース

HTMLメソッドを使用したいのですが、このメソッドを使用するだけで、位置が異なる2つの画像を追加できます。私はそれが次のようなことをすることが可能であることを知っています：background-image：url（ "image.jpg"）、url（ "image2"）; しかし、これを行うと、両方の画像が同じ場所にあり、互いに「オーバーレイ」するため、それらに異なる位置を設定したいと思います。

— PaulP1

32

はい：

<div style="background-image: url(../images/image.gif); height: 400px; width: 400px;">Text here</div>

— 閃光
ソース

14

このスタイルを使用して、繰り返しなしで中央の背景画像を取得します。

.bgImgCenter{
    background-image: url('imagePath');
    background-repeat: no-repeat;
    background-position: center; 
    position: relative;
}

HTMLで、divにこのスタイルを設定します。

<div class="bgImgCenter"></div>

— ジェガディーシュ
ソース

10

のように使用してください。

<div style="background-image: url(../images/test-background.gif); height: 200px; width: 400px; border: 1px solid black;">Example of a DIV element with a background image:</div>
<div style="background-image: url(../images/test-background.gif); height: 200px; width: 400px; border: 1px solid black;"> </div>

— アナンドタンガパン
ソース

確かにパスは一重引用符で囲む必要がありますか？

— シェーンG

7

次のIDのimg src属性を追加するだけです。

<body>
<img id="backgroundimage" src="bgimage.jpg" border="0" alt="">
</body>

そしてあなたのCSSファイル（ストレッチ背景）で：

#backgroundimage
{
   height: auto;
   left: 0;
   margin: 0;
   min-height: 100%;
   min-width: 674px;
   padding: 0;
   position: fixed;
   top: 0;
   width: 100%;
   z-index: -1;
}

— アダム・サンドラー
ソース

2

質問は、divに背景要素を追加することに関するものであり、個別のimg属性を追加することではないため、これは質問に対する回答を提供しません。

— Dipen Shah 2016

3

この解決策は質問に適切に答えませんが、私が直面している別の問題についてのアイデアを与えてくれたので、感謝します。

— ストライカー

6

<div class="foo">Foo Bar</div>

そしてあなたのCSSファイルで：

.foo {
    background-image: url("images/foo.png");
}

— ダリン・ディミトロフ
ソース

2

<div id="imgg">Example to have Background Image</div>

以下のコンテンツをStyleタグに追加する必要があります：

.imgg(

   background-image: url('C:\Users\ajai\Desktop\10.jpg');

)

— Guvaliour
ソース

ローカルパス：C：\ Users \ ajai \ Desktop \ 10.jpgがオンラインで機能することは決してありません;）

— AlmostPitt

ちょうど揺れのために私はこの道を与える

— Guvaliour 19/12/19

0

ほとんどの場合、方法は全身を設定するのと同じです

.divi{
    background-image: url('path');
}

</style>

<div class="divi"></div>

— ウィンストンブラウン
ソース