Cách đặt hình nền trong HTML: 13 bước (với hình ảnh) – html thiết lập hình nền

Nếu bạn muốn thêm hình ảnh vào một trang web, tất cả những gì bạn cần là HTML. Nếu bạn muốn đặt một hình ảnh làm nền cho một trang web, bạn sẽ cần cả HTML và CSS. HTML là viết tắt của Hypertext Markup Language và là mã cho trình duyệt biết phải …

Bạn đang xem: html thiết lập hình nền

1. 
   

   {“smallUrl”: “https: \ / \ / www.wikihow.com \ / images \ / thumb \ / e \ / e2 \ /2627945-8-3.jpg \ /v4-460px-2627945-8-3.jpg”,”bigUrl”:”\/images\/thumb\/e\/e2\/2627945-8-3.jpg\/aid2627945-v4-728px-2627945- 8-3.jpg “,” smallWidth “: 460,” smallHeight “: 345,” bigWidth “: 728,” bigHeight “: 546,” Licence “:” & lt; div class = \ “mw-parser-output \” & gt; & lt; p & gt; Hình ảnh của: Người tải lên & lt; br & gt; \ nLicense: & lt; a target = \ “_ blank \” rel = \ “nofollow noreferrer noopener \” class = \ “external text \” href = \ “https: \ /\/creativecommons.org\/licenses\/by\/3.0\/\”>Creative Commons & lt; \ / a & gt; \ n & lt; \ / p & gt; & lt; \ / div & gt; “}

   1

   Nhập & lt;! DOCTYPE html & gt; ở đầu tài liệu HTML. Mã HTML được tạo thành từ các thẻ mở và thẻ đóng. Mọi trang HTML được viết tốt phải bắt đầu bằng & lt;! DOCTYPE html & gt ;. Điều này cho trình duyệt web biết rằng tệp HTML là một tệp HTML.

2. 
   

   {“smallUrl”: “https: \ / \ / www.wikihow.com \ / images \ / thumb \ / c \ / cc \ /2627945-10-3.jpg \ /v4-460px-2627945-10-3.jpg”,”bigUrl”:”\/images\/thumb\/c\/cc\/2627945-10-3.jpg\/aid2627945-v4-728px-2627945- 10-3.jpg “,” smallWidth “: 460,” smallHeight “: 345,” bigWidth “: 728,” bigHeight “: 546,” Licence “:” & lt; div class = \ “mw-parser-output \” & gt; & lt; p & gt; Hình ảnh của: Người tải lên & lt; br & gt; \ nLicense: & lt; a target = \ “_ blank \” rel = \ “nofollow noreferrer noopener \” class = \ “external text \” href = \ “https: \ /\/creativecommons.org\/licenses\/by\/3.0\/\”>Creative Commons & lt; \ / a & gt; \ n & lt; \ / p & gt; & lt; \ / div & gt; “}

   3

   Nhập & lt; head & gt; ở dòng tiếp theo. Đây là thẻ mở đầu cho phần Head của tài liệu HTML. Phần đầu chứa thông tin meta không được hiển thị trong trình duyệt web. Phần này chứa thông tin như tiêu đề trang, nó cũng chứa Trang tính kiểu xếp tầng (CSS) định dạng giao diện của mã HTML.

3. 
   

   {“smallUrl”: “https: \ / \ / www.wikihow.com \ / images \ / thumb \ / f \ / ff \ /2627945-11-3.jpg \ /v4-460px-2627945-11-3.jpg”,”bigUrl”:”\/images\/thumb\/f\/ff\/2627945-11-3.jpg\/aid2627945-v4-728px-2627945- 11-3.jpg “,” smallWidth “: 460,” smallHeight “: 345,” bigWidth “: 728,” bigHeight “: 546,” Licence “:” & lt; div class = \ “mw-parser-output \” & gt; & lt; p & gt; Hình ảnh của: Người tải lên & lt; br & gt; \ nLicense: & lt; a target = \ “_ blank \” rel = \ “nofollow noreferrer noopener \” class = \ “external text \” href = \ “https: \ /\/creativecommons.org\/licenses\/by\/3.0\/\”>Creative Commons & lt; \ / a & gt; \ n & lt; \ / p & gt; & lt; \ / div & gt; “}

   4

   Nhập & lt; title & gt; Tiêu đề Trang & lt; / title & gt ;. Đây là mã HTML chứa tiêu đề trang của trang web của bạn. “& Lt; title & gt;” là thẻ mở của mã HTML Tiêu đề trang. “& Lt; / title & gt;” của thẻ là thẻ đóng. Thay thế văn bản “Tiêu đề trang” bằng bất kỳ tiêu đề nào bạn muốn đặt tên cho trang HTML của mình. Văn bản này sẽ xuất hiện trong tab trình duyệt ở đầu trình duyệt web.

4. 
   

   {“smallUrl”: “https: \ / \ / www.wikihow.com \ / images \ / thumb \ / b \ / b0 \ /2627945-12-3.jpg \ /v4-460px-2627945-12-3.jpg”,”bigUrl”:”\/images\/thumb\/b\/b0\/2627945-12-3.jpg\/aid2627945-v4-728px-2627945- 12-3.jpg “,” smallWidth “: 460,” smallHeight “: 345,” bigWidth “: 728,” bigHeight “: 546,” Licence “:” & lt; div class = \ “mw-parser-output \” & gt; & lt; p & gt; Hình ảnh của: Người tải lên & lt; br & gt; \ nLicense: & lt; a target = \ “_ blank \” rel = \ “nofollow noreferrer noopener \” class = \ “external text \” href = \ “https: \ /\/creativecommons.org\/licenses\/by\/3.0\/\”>Creative Commons & lt; \ / a & gt; \ n & lt; \ / p & gt; & lt; \ / div & gt; “}

   5

   Nhập & lt; / head & gt; ở dòng tiếp theo. Đây là thẻ đóng phần đầu của tài liệu HTML của bạn. Nếu bạn muốn bao gồm bất kỳ thông tin hoặc biểu định kiểu nào khác cho tài liệu HTML của mình, hãy nhớ viết chúng sau “& lt; head & gt;” thẻ mở và trước “& lt; / head & gt;” thẻ đóng.

5. 
   

   {“smallUrl”: “https: \ / \ / www.wikihow.com \ / images \ / thumb \ / 1 \ / 12 \ /2627945-13-3.jpg \ /v4-460px-2627945-13-3.jpg”,”bigUrl”:”\/images\/thumb\/1\/12\/2627945-13-3.jpg\/aid2627945-v4-728px-2627945- 13-3.jpg “,” smallWidth “: 460,” smallHeight “: 345,” bigWidth “: 728,” bigHeight “: 546,” Licence “:” & lt; div class = \ “mw-parser-output \” & gt; & lt; p & gt; Hình ảnh của: Người tải lên & lt; br & gt; \ nLicense: & lt; a target = \ “_ blank \” rel = \ “nofollow noreferrer noopener \” class = \ “external text \” href = \ “https: \ /\/creativecommons.org\/licenses\/by\/3.0\/\”>Creative Commons & lt; \ / a & gt; \ n & lt; \ / p & gt; & lt; \ / div & gt; “}

   6

   Nhập & lt; body & gt; ở dòng tiếp theo. Đây là thẻ mở cho phần nội dung tài liệu HTML của bạn. Phần thân là nơi chứa tất cả các yếu tố hình ảnh của trang web của bạn. Điều này bao gồm văn bản, hình ảnh, nút và các yếu tố khác có thể xem được trên trang web.

6. 
   

   {“smallUrl”: “https: \ / \ / www.wikihow.com \ / images \ / thumb \ / 1 \ / 1d \ /2627945-14-3.jpg \ /v4-460px-2627945-14-3.jpg”,”bigUrl”:”\/images\/thumb\/1\/1d\/2627945-14-3.jpg\/aid2627945-v4-728px-2627945- 14-3.jpg “,” smallWidth “: 460,” smallHeight “: 345,” bigWidth “: 728,” bigHeight “: 546,” Licence “:” & lt; div class = \ “mw-parser-output \” & gt; & lt; p & gt; Hình ảnh của: Người tải lên & lt; br & gt; \ nLicense: & lt; a target = \ “_ blank \” rel = \ “nofollow noreferrer noopener \” class = \ “external text \” href = \ “https: \ /\/creativecommons.org\/licenses\/by\/3.0\/\”>Creative Commons & lt; \ / a & gt; \ n & lt; \ / p & gt; & lt; \ / div & gt; “}

   7

   Nhập & lt; div style = “background-image: url (‘[url hình ảnh ] ‘); “& gt; ở dòng tiếp theo. Đây là thẻ HTML để thêm hình nền vào trang web của bạn. Thay thế “[url hình ảnh]” bằng vị trí url thực của hình ảnh bạn muốn thêm. Đây có thể là vị trí của hình ảnh được tải lên máy chủ trực tuyến hoặc vị trí cục bộ của hình ảnh trên máy tính của bạn. [3]

   • Ngoài ra, bạn có thể sử dụng CSS để đặt hình nền.
   • Khi bạn sử dụng tên tệp không có đường dẫn tệp hoặc URL (tức là), trình duyệt web sẽ tìm hình ảnh được đặt tên trong thư mục trang web. Nếu tệp nằm trong một thư mục khác trên hệ thống tệp của bạn, bạn sẽ cần thêm đường dẫn đầy đủ đến tệp đó.

   Đây là thẻ HTML để thêm hình nền vào trang web của bạn. Thay thế “[url hình ảnh]” bằng vị trí url thực của hình ảnh bạn muốn thêm. Đây có thể là vị trí của hình ảnh được tải lên máy chủ trực tuyến hoặc vị trí cục bộ của hình ảnh trên máy tính của bạn.

7. 

   {“smallUrl”: “https: \ / \ / www.wikihow.com \ / images \ / thumb \ / a \ / a6 \ /2627945-16-3.jpg \ /v4-460px-2627945-16-3.jpg”,”bigUrl”:”\/images\/thumb\/a\/a6\/2627945-16-3.jpg\/aid2627945-v4-728px-2627945- 16-3.jpg “,” smallWidth “: 460,” smallHeight “: 345,” bigWidth “: 728,” bigHeight “: 546,” Licence “:” & lt; div class = \ “mw-parser-output \” & gt; & lt; p & gt; Hình ảnh của: Người tải lên & lt; br & gt; \ nLicense: & lt; a target = \ “_ blank \” rel = \ “nofollow noreferrer noopener \” class = \ “external text \” href = \ “https: \ /\/creativecommons.org\/licenses\/by\/3.0\/\”>Creative Commons & lt; \ / a & gt; \ n & lt; \ / p & gt; & lt; \ / div & gt; “}

   9

   Nhập & lt; / body & gt; ở dòng cuối cùng. Đây là thẻ đóng phần nội dung tài liệu HTML của bạn. Khi bạn hoàn tất việc thêm tất cả các phần tử HTML mà bạn muốn đưa vào tài liệu của mình, hãy nhập thẻ này vào dòng cuối cùng.

8. 
   

   {“smallUrl”: “https: \ / \ / www.wikihow.com \ / images \ / thumb \ / a \ / a8 \ /2627945-18-3.jpg \ /v4-460px-2627945-18-3.jpg”,”bigUrl”:”\/images\/thumb\/a\/a8\/2627945-18-3.jpg\/aid2627945-v4-728px-2627945- 18-3.jpg “,” smallWidth “: 460,” smallHeight “: 345,” bigWidth “: 728,” bigHeight “: 546,” Licence “:” & lt; div class = \ “mw-parser-output \” & gt; & lt; p & gt; Hình ảnh của: Người tải lên & lt; br & gt; \ nLicense: & lt; a target = \ “_ blank \” rel = \ “nofollow noreferrer noopener \” class = \ “external text \” href = \ “https: \ /\/creativecommons.org\/licenses\/by\/3.0\/\”>Creative Commons & lt; \ / a & gt; \ n & lt; \ / p & gt; & lt; \ / div & gt; “}

   11

   Lưu tệp HTML. Khi bạn hoàn tất mọi thứ, hãy nhấp vào Tệp và sau đó Lưu để lưu công việc của bạn. Toàn bộ tài liệu HTML của bạn sẽ trông giống như sau:

    
    
    
    & lt;! DOCTYPE html & gt; 
    & lt; 
    
    html 
    
    & gt; 
    & lt; 
    
    head 
    
    & gt; 
    & lt; 
    
    title 
    
    & gt; 
    Tiêu đề trang 
    & lt; / 
    
    title 
    
    & gt; 
    & lt; / 
    
    đầu 
    
    & gt; 
    & lt; 
    
    body 
    
    & gt; 
    & lt; 
    
    div 
    
    style 
    
    = < / p> 
    "background-image: url ('https://www.website.com/images/image_background.jpg');" 
    
    & gt; 
    & lt; / 
    
    body 
    
    & gt; 
    & lt; / 
    
    html 
    
    & gt; 
   

   Khi bạn hoàn thành mọi thứ, hãy nhấp và để lưu công việc của bạn. Toàn bộ tài liệu HTML của bạn sẽ trông giống như sau:

Quảng cáo