Thêm ảnh nền vào phần tử <div>

170

Có thể tạo một <div>phần tử chứa ảnh nền không, và nếu vậy, tôi sẽ thực hiện việc này như thế nào?

html

— Máy quét cát
nguồn

204

Ý bạn là?

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

...

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

— phoibos
nguồn

Tôi có thể đặt nó không lặp lại?

— Valentino Ru

12

có: lặp lại nền: không lặp lại; w3schools.com/cssref/pr_background-repeat.asp

— Matt Becker

42

Bạn có thể làm điều đó bằng cách sử dụng các cơ sở của CSS background. Có một số cách để làm điều đó:

Bằng ID

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

CSS :

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

Theo lớp

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

CSS :

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

Trong HTML (đó là xấu xa)

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

Ở đâu :

màu là màu hex hoặc một từ X11 Colors
đường dẫn là đường dẫn đến hình ảnh
những người khác thích vị trí, tùy viên

background Thuộc tính CSS là một kết nối của tất cả các cơ sở nền-xxx trong cú pháp đó:

nền : màu nền-màu nền-hình nền lặp lại nền-đính kèm nền-vị trí ;

Nguồn: w3schools

— Robik
nguồn

Tôi muốn sử dụng phương thức HTML, nhưng có thể, bằng cách chỉ sử dụng phương thức đó, để thêm 2 hình ảnh có vị trí khác nhau. Tôi biết có thể làm một cái gì đó như: nền-hình ảnh: url ("image.jpg"), url ("image2"); nhưng làm điều này, cả hai hình ảnh sẽ ở cùng một nơi, giống như "chồng chéo" lẫn nhau và tôi muốn đặt các vị trí khác nhau cho chúng.

— PaulP1

32

Có :

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

— Tốc biến
nguồn

14

Sử dụng phong cách này để có được một hình ảnh nền trung tâm mà không lặp lại.

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

Trong HTML, đặt kiểu này cho div của bạn:

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

— jegadeesh
nguồn

10

Sử dụng như ..

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

— Anand Thangappan
nguồn

Chắc chắn con đường nên ở trong dấu ngoặc đơn ??

— Shane G

7

Bạn chỉ có thể thêm Thuộc tính img src với id:

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

và trong tệp CSS của bạn (kéo dài nền):

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

— Adam Sandler
nguồn

2

Câu hỏi là về việc thêm một phần tử nền vào div, không thêm thuộc tính img riêng biệt để điều này không cung cấp câu trả lời cho câu hỏi.

— Dipen Shah

3

Mặc dù giải pháp này không trả lời đúng câu hỏi, nhưng nó đã cho tôi một ý tưởng cho một vấn đề khác mà tôi đang phải đối mặt để tôi cảm ơn.

— Tiền đạo

6

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

và trong tệp CSS của bạn:

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

— Darin Dimitrov
nguồn

2

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

Chúng tôi cần thêm nội dung bên dưới vào thẻ Kiểu:

.imgg(

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

)

— Guvaliour
nguồn

Đường dẫn cục bộ của bạn: C: \ Users \ ajai \ Desktop \ 10.jpg sẽ không bao giờ hoạt động trực tuyến;)

— MostPitt

Chỉ cần lắc tôi cho con đường này

— Guvaliour

0

Đối với hầu hết các phần, phương pháp này giống như thiết lập toàn bộ cơ thể

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

</style>

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

— Winston Brown
nguồn