<div> 요소에 배경 이미지 추가

170

<div>요소에 배경 이미지를 포함 시킬 수 있습니까? 그렇다면 어떻게하면됩니까?

html

— 산딥
소스

204

당신은 이것을 의미합니까?

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

...

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

— 포이보스
소스

반복 불가능으로 설정할 수 있습니까?

— Valentino Ru

12

예 : 배경 반복 : 반복 없음; w3schools.com/cssref/pr_background-repeat.asp

— Matt Becker

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 색상 중 하나입니다.
경로 는 이미지의 경로 입니다
위치, 첨부 파일과 같은 다른 사람

background CSS 속성은 해당 구문에서 모든 background-xxx 속성의 연결입니다.

배경 : 배경색 배경 이미지 배경 반복 배경 첨부 배경 위치 ;

출처 : 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>

— 아난드 탄 가판
소스

분명히 경로는 작은 따옴표로 묶어야합니까 ??

— Shane 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

문제는 별도의 img 속성을 추가하지 않고 div에 배경 요소를 추가하는 것이므로 질문에 대한 답변을 제공하지 않습니다.

— Dipen Shah

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>

스타일 태그에 아래 내용을 추가해야합니다.

.imgg(

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

)

— 구 발리
소스

로컬 경로 : C : \ Users \ ajai \ Desktop \ 10.jpg는 온라인에서 작동하지 않습니다;)

— AlmostPitt

그냥

— 흔들어이

0

대부분의 경우, 방법은 몸 전체를 설정하는 것과 같습니다

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

</style>

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

— 윈스턴 브라운
소스