Chèn hình nền vào CSS (Twitter Bootstrap)

Question

Làm cách nào để thêm hình nền vào trang web của tôi?

body { 
    margin: 0; 
    background: url(background.png); 
    background-size: 1440px 800px; 
    background-repeat:no-repeatdisplay: compact; 
    font: 13px/18px "Helvetica Neue", Helvetica, Arial, sans-serif; 

Tôi đã làm điều đó nhưng không có gì hiển thị trên trang của mình. Tôi là người mới bắt đầu CSS.

Cập nhật:

body { 
margin: 0; 
background-image: url(.../img/background.jpg); 
background-size: 1440px 800px; 
background-repeat:no-repeat; 
display: compact; 
font: 13px/18px "Helvetica Neue", Helvetica, Arial, sans-serif; 

Answer 1

Đặt url nền trong dấu ngoặc kép.

Nó phải là background: url('background.png');

Xem here cho bản demo làm việc.

Bạn cũng gặp sự cố với background-repeat line thiếu dấu chấm phẩy ở giữa hai câu lệnh. Nếu nền của bạn là thực sự nhỏ, bạn sẽ không nhìn thấy nó vì vấn đề đó.

Chỉ cần cập nhật giải pháp, trong số các vấn đề khác, tệp nền đã được chỉnh sửa với .../background.jpg khi cần phải là ../background.jpg (2 dấu chấm, không phải 3).

Answer 2

không phải là vấn đề dòng sau đây là sai khi báo cáo kết quả cho background-repeat không đóng trước khi báo cáo kết quả tiếp theo cho display ...

background-repeat:no-repeatdisplay: compact; 

nên không này được

background-repeat:no-repeat; 
display: compact; 

thêm hoặc xóa dấu ngoặc kép (theo kinh nghiệm của tôi) sẽ không khác biệt nếu URL đúng. Đường dẫn đến hình ảnh có chính xác không? Nếu bạn cung cấp một đường dẫn tương đối đến một tài nguyên trong một CSS, nó liên quan đến tệp CSS, không phải tệp bao gồm CSS.

Answer 3

Hình ảnh của bạn có cùng thư mục/thư mục với tệp css của bạn không? Nếu vậy, url hình ảnh của bạn là chính xác. Nếu không, nó không phải.

Nếu bởi bất kỳ cơ hội cấu trúc thư mục của bạn là như vậy ...

trang web
-index.html
-css
- - style.css
- hình ảnh
- - background.png

sau đó để tham khảo hình ảnh trên tệp css của bạn, bạn nên sử dụng đường dẫn sau:

../images/background.png

Vì vậy, đó sẽ là nền: url ('../ images/background.png');

Logic rất đơn giản: Đi lên một thư mục bằng cách nhập "../" (bao nhiêu lần bạn cần). Đi xuống một thư mục bằng cách chỉ định thư mục bạn muốn đi xuống.

Answer 4

Nếu bạn thêm những điều sau đây bạn có thể thiết lập màu nền hoặc hình ảnh (css của bạn)

html { 
    background-image: url('http://yoursite/i/tile.jpg'); 
    background-repeat: repeat; 
} 

.body { 
    background-color: transparent; 
} 

Điều này là do BS áp dụng một quy tắc css cho màu nền và cũng cho lớp .container.

Answer 5

Thêm hình nền trên html, phần thân hoặc phần tử trình bao để đạt được hình nền sẽ gây ra vấn đề với đệm. Kiểm tra vé này https://github.com/twitter/bootstrap/issues/3169 trên github. Nhận xét của ShaunR và cũng là một trong những người sáng tạo phản ứng lại điều này. Các giải pháp được đưa ra trong vé tạo ra không giải quyết được vấn đề, nhưng ít nhất cũng có những thứ sẽ xảy ra nếu bạn không sử dụng các tính năng đáp ứng.

Giả sử rằng bạn đang sử dụng thùng chứa mà không cần tính năng đáp ứng, và có chiều rộng 960px, và muốn đạt được 10px đệm, bạn thiết lập:

.container { 
    min-width: 940px; 
    padding: 10px; 
} 

Answer 6

Và nếu bạn không thể lặp lại hình nền (ví lý do thẩm mỹ), thì plugin JQuery tiện dụng này sẽ kéo hình nền thành vừa với cửa sổ.

Backstretch http://srobbin.com/jquery-plugins/backstretch/

Các công trình lớn ...

~ Chúc mừng!

Answer 7

Đối với mô đun hơn và trong trường hợp bạn có nhiều hình ảnh nền mà bạn muốn kết hợp bất cứ nơi nào bạn muốn, bạn có thể cho mỗi hình ảnh tạo ra một lớp:

.background-image1 
{ 
background: url(image1.jpg); 
} 
.background-image2 
{ 
background: url(image2.jpg); 
} 

và sau đó chèn hình ảnh bất cứ nơi nào bạn muốn bằng cách thêm một div

<div class='background-image1'> 
    <div class="page-header text-center", style='margin: 20px 0 0px;'> 
     <h1>blabaaboabaon</h1> 
    </div> 
</div> 

Answer 8

body { 
    background-image: url(your image link); 
    background-position: center center; 
    background-repeat: no-repeat; 
    background-attachment:fixed; 
    background-size: cover; 
    background-color: #464646; 
} 

Answer 9

vấn đề cũng có thể đặt hàng nhập khẩu tấm phong cách của bạn. Tôi đã phải di chuyển nhập biểu định kiểu tùy chỉnh của mình bên dưới quá trình nhập bootstrap.