Hình ảnh nền html. Cách chèn nhanh nền khác trong Photoshop

Trong bài viết này tôi sẽ nói với bạn như thường lệ đặt nền cho trang web sử dụng HTML mã số.

Tôi cũng sẽ cho bạn thấy một điều tuyệt vời Dịch vụ nước ngoài bằng cách lựa chọn nền liền mạch.
Ngày nay, việc cài đặt trang web được thực hiện dễ dàng và thuận tiện hơn thông qua bảng điều khiển CMS như WordPress.
Có thể cần phải thay đổi mẫu trang web bán hàng, bài viết này sẽ giúp ích cho việc này.

Nếu bạn không biết nó là gì HTML, thì đây thường có thể được gọi là ngôn ngữ của các trang web hoặc một bộ quy tắc mà các trang web được tạo ra.

Ví dụ: bạn nhìn thấy một hình ảnh trên một trang web, nhưng trong mã HTML của trang đó, nó có thể trông như thế này:

Đặt màu đồng nhất cho nền trang.

Để cài đặt nền màu đặc, cần gắn thẻ thêm thuộc tính bgcolor.

< html >
< head >
< title >Tiêu đề trang.

< body bgcolor = "#ffcc00" >

Bạn có thể mã này chèn vào tập tin văn bản và lưu với phần mở rộng .html. Sau đó mở nó bằng bất kỳ trình duyệt nào và xem kết quả.

Như bạn có thể đoán, màu nền xuất hiện do mã màu trong thuộc tính bgcolor="giá trị", có thể được tìm thấy bằng cách theo liên kết này.

Đặt hình ảnh làm nền của trang HTML.

Để đặt hình ảnh làm nền, bạn có thể sử dụng thuộc tính lý lịch trong thẻ .

< html >
< head >
< title >Tiêu đề trang.

< body background = "http://сайт/images/mlmsecret.jpg" >Xin chào. Đây là trang đầu tiên của tôi

Bạn có thể nhận thấy rằng thuộc tính lý lịch bằng đường dẫn của tệp được sử dụng làm nền.

Để thay đổi nhanh nền hoặc bất kỳ hình ảnh nào trên trang, chỉ cần chỉ định cách mới vào tập tin của bạn bằng trình soạn thảo văn bản.

Để tìm ra đường dẫn trước đó, bạn cần nhấp vào hình ảnh trên trang có hình ảnh click chuột phải và nhấp vào “Sao chép URL hình ảnh”. bằng cách này bạn sẽ thấy tên của hình ảnh/nền. Sau đó, bạn có thể chỉ cần thay thế hình ảnh cũ bằng hình ảnh của mình, sử dụng cùng tên tệp.

Đây là những điều cơ bản đơn giản nhất để thiết lập nền trong html, Bây giờ đến phần thú vị. 🙂

Việc đặt màu nền và/hoặc hình ảnh cho một trang hoặc thành phần riêng lẻ của nó khá đơn giản. Điều quan trọng là phải biết thực hiện việc này ở đâu và như thế nào, cũng như có mã màu và/hoặc hình nền. Có thể bạn sẽ học được nhiều điều mới từ bài viết này, nhưng tôi đã tạo nó dành riêng cho người mới bắt đầu. Vì vậy, mọi thứ sẽ đồng thời ngắn gọn và chi tiết nhất có thể. Điều chính là bạn sẽ không chỉ có được một ý tưởng chung và ví dụ làm sẵn, mà còn hiểu biết về cách tạo nền trong HTML.

Để đặt nền trong HTML, hãy sử dụng DOCTYPE trung gian

Và tôi sẽ bắt đầu với thực tế là trong HTML5 không thể thiết lập được. Người ta đã quyết định thêm tính năng này vào CSS. Do đó, nếu bạn định sử dụng cách sau và muốn lấy mã hợp lệ (chính xác), bạn cần chọn loại tài liệu chuyển tiếp. Để làm điều này, trang web của bạn phải bắt đầu bằng dòng sau:

Chuyển tiếp//VI" "http://www.w3.org/TR/html4/loose.dtd">

Bỏ ý đó đi, chúng ta hãy chuyển sang tìm hiểu cách tạo nền. Và điều đầu tiên cần lưu ý ở đây là sự khác biệt giữa màu nền Và Hình nền. Lúc đầu nó đi màu nền, làm ngập lụt mọi thứ không gian có sẵn trang hoặc phần tử của nó. Phía trên nó là sự lặp lại Hình nền. Trực quan điều này có thể được mô tả như sau:

Bối cảnh của một tài liệu HTML và các thành phần của nó

Điều thứ hai bạn cần biết là sự khác biệt giữa nội dung của tài liệu Và yếu tố tài liệu. Nội dung tài liệuđược biểu thị trong mã HTML của trang web bằng thẻ BODY, bao gồm toàn bộ nội dung của trang web. Rõ ràng, nền của nội dung tài liệu không thể trong suốt. Nếu nền nội dung tài liệu không được chỉ định thì giá trị mặc định được chỉ định trong cài đặt trình duyệt sẽ được sử dụng.

Phần tử trang nằm trong thẻ BODY. Điều đáng chú ý là bạn có thể đặt màu và/hoặc hình nền sử dụng HTMLĐiều này là không thể đối với tất cả các thành phần của tài liệu. Ví dụ: chỉ có thể chỉ định hình nền cho bảng. Theo mặc định, chúng thường có nền trong suốt.

Thuộc tính bgcolor để tạo màu nền

Để hỏi màu nền tài liệu hoặc các phần tử của nó sử dụng thuộc tính bgcolor, ví dụ:

TRONG trong trường hợp này chúng tôi đặt màu nền cho toàn bộ trang. Và đây là ví dụ về cách đặt màu nền cho bảng trong thẻ TABLE:

Đáng chú ý là màu nền trong bảng có thể được chỉ định cho cả hai hàng trong thẻ TR và cho các ô của chúng trong thẻ TD.

Làm thế nào để tìm ra mã màu?

Có thể bạn đã nhận thấy rằng màu sắc trong HTML được đặt thành một giá trị đặc biệt. mã số, ví dụ: #ec008c . Để tìm ra mã màu bạn cần, bạn có thể sử dụng một trong các trình chỉnh sửa đồ họa. Ví dụ: trong Photoshop bạn có thể sử dụng " Công cụ nhỏ giọt nước mắt» (Pipette) để lấy màu từ một điểm trong ảnh. Sau đó, bạn cần nhấp vào màu kết quả trên thanh công cụ và trong cửa sổ mở ra “ Bộ chọn màu» (Chọn màu) sao chép mã màu.

Xin lưu ý rằng mã này sẽ không có dấu thăng (#) ở đầu; dấu hiệu này sẽ cần được thêm theo cách thủ công.

Bạn cũng có thể sử dụng nhiều dịch vụ trực tuyến, Ví dụ:

• vân vân.

Nguyên tắc hoạt động của chúng thậm chí còn đơn giản hơn - nhấp vào màu mong muốn và lấy mã của nó.

Thuộc tính nền để tạo hình nền

Tương tự như trong trường hợp màu nền và trong trường hợp Hình nền Bạn cần sử dụng một thuộc tính đặc biệt, cụ thể là nền, ví dụ:

Trong trường hợp này, chúng tôi đang đặt hình nền cho toàn bộ trang. Đáng chú ý là do hạn chế về kích thước của hình ảnh nên nó sẽ bị lặp lại, ví dụ:

Như bạn có thể thấy, khi lặp lại, sự chuyển đổi giữa các bức ảnh sẽ trở nên dễ nhận thấy. Do đó, những hình ảnh đặc biệt thường được sử dụng khi tính đến điểm này.

Và đây là ví dụ về cách đặt ảnh nền cho bảng trong thẻ TABLE:

Đáng chú ý là hình nền chỉ có thể được đặt cho toàn bộ bảng và/hoặc ô riêng lẻ của nó. Điều này sẽ không hoạt động đối với một chuỗi.

Đường dẫn tuyệt đối và tương đối tới ảnh nền

Điều đáng được quan tâm đặc biệt Địa chỉ Hình nền . Trong trường hợp này nó được sử dụng đường dẫn tương đối vào hình ảnh, tức là Địa chỉ được chỉ định tương ứng với vị trí của tệp hình ảnh cho tệp trang web. Tùy chọn này không thể được gọi là đặc biệt thành công. Tốt nhất nên sử dụng đường dẫn tuyệt đối vào hình ảnh, tức là URL đầy đủ của nó, Ví dụ:

Trong trường hợp này, bạn sẽ không gặp bất kỳ vấn đề liên quan nào. Bạn có thể đọc thêm về điều này.

Hãy tóm tắt lại

Việc sử dụng các thuộc tính bgcolor và nền đã lỗi thời, do đó, để mã HTML hợp lệ, bạn sẽ phải sử dụng DOCTYPE chuyển tiếp. Đối với nhiệm vụ màu nền trong HTML sử dụng các mã đặc biệt mà bạn có thể tìm thấy trong biên tập đồ họa hoặc sử dụng các dịch vụ trực tuyến đặc biệt. Hình nền được nhân đôi trong vùng được phân bổ cho nó và nằm trên màu nền. Để chỉ định hình nền, tốt hơn là sử dụng URL đầy đủ của nó. Đó là tất cả những gì tôi có. Cám ơn vì sự quan tâm của bạn. Chúc may mắn!

Chúc một ngày tốt lành cho những ai muốn tìm hiểu và học hỏi điều gì đó mới! Bạn đã bao giờ để ý vẻ bề ngoài, trong quá trình phát triển mà người sáng tạo đã quá lười thiết kế nền của các trang? Và tôi đã. Nó có vẻ tồi tệ. Thường là do thiếu sự chia rẽ thông thường giữa chúng ta các loại khác nhau thông tin bị lẫn lộn và đơn giản là không có mong muốn tiếp tục xem bất kỳ thứ gì trên một tài nguyên web như vậy.

Để ngăn thảm họa như vậy xảy ra với mình, tôi quyết định viết một bài về chủ đề: “Cách tạo nền trang bằng html”. Sau khi đọc ấn phẩm, bạn sẽ tìm hiểu những công cụ nào bạn có thể sử dụng để đặt thiết kế nền, cách cố định hoặc thay đổi nền, v.v. sẽ giúp trang web của bạn trở nên hấp dẫn. Bây giờ hãy bắt đầu!

Các công cụ cơ bản để thiết lập nền cho trang web

Để đặt hình nền, các nhà phát triển ngôn ngữ web đã cung cấp thuộc tính nền. Nó có sẵn cả trong và trong css.

Trong ngôn ngữ đánh dấu, đây là một thuộc tính của thẻ body và trong biểu định kiểu, nó là thuộc tính chung cho phép bạn thiết lập tối đa 5 đặc điểm nền cùng một lúc. Nền là một phần tử khá linh hoạt, có thể được sử dụng để đặt nền ở dạng một màu, hình ảnh màu hoặc thậm chí là hoạt ảnh.

Vì vậy, để đặt hình nền thông qua đơn vị html chỉ cần viết đoạn mã sau: ... và thay vì dòng chữ “địa chỉ tệp”, hãy chèn đường dẫn đến ảnh.

Tuy nhiên, xin lưu ý! Nếu bạn muốn xem một màu đồng nhất làm nền, giá trị đã cho từ bảng màu, việc này được thực hiện bằng thuộc tính bgcolor.

Ví dụ, ..., chúng tôi đã đặt nền đen cho trang web của mình.

Màu sắc trong css và html được chỉ định bằng một từ tiếng Anh (ví dụ: màu đỏ) hoặc mã đặc biệt, bao gồm dấu # và sáu ký tự sau nó (ví dụ: #FFDAB9).

Khi gõ tùy chọn thứ hai trong chuyên ngành sản phẩm phần mềmĐối với các nhà phát triển, bảng màu sẽ tự động xuất hiện trước mặt bạn. Nếu bạn mới bắt đầu học các ngôn ngữ web này thì có thể tra cứu mã màu trên Internet.

Nền làm thuộc tính trong biểu định kiểu xếp tầng

Nó được chỉ định trong tập tin riêng biệt với kiểu css hoặc trong một phần tử

Dựa trên lưu ý này, chúng tôi có thể tóm tắt công việc của mình. Hãy gia nhập hàng ngũ những người đăng ký trung thành của tôi, đặt câu hỏi nếu có điều gì đó chưa rõ ràng và đừng tham lam với một liên kết đến blog của tôi mà hãy chia sẻ nó với bạn bè của bạn. Chúc bạn có trải nghiệm học tập thú vị. Tạm biệt!

Trân trọng, Roman Chueshov

Chào mừng đến với blog của tôi. Chúng tôi tiếp tục hiểu cơ bản về html. Hướng dẫn này sẽ đơn giản và thú vị đến mức tôi hy vọng bạn sẽ muốn tìm hiểu thêm về ngôn ngữ lập trình. Chỉ trong vài phút, bạn sẽ học cách tạo một bức ảnh làm nền trong HTML và đạt được kết quả xuất sắc.

Tôi cũng sẽ nói về một số sắc thái giúp nền đồng đều và đẹp hơn. Nào, chúng ta bắt đầu nhé?

Chọn một hình ảnh

Tôi muốn bắt đầu bằng việc chọn một hình ảnh. Để bạn trông đồng đều và đẹp hơn trên trang mà không cần phải bận tâm đến kích thước và căn chỉnh. Tôi đề nghị ngay lập tức tìm kiếm kết cấu liền mạch. Nó là gì?

Thật không may, không thể kéo dài hình ảnh trong html để lấp đầy toàn bộ màn hình. Ảnh được sử dụng ở kích thước thực tế. Nếu ảnh nhỏ thì nó sẽ bao phủ toàn bộ khu vực, như trong ảnh chụp màn hình bên dưới. Để kéo dài hình ảnh, bạn sẽ phải tạo thêm tài liệu css, không có cái này nó sẽ không hoạt động.

Mặc dù vậy, bạn có cơ hội bỏ qua hệ thống. Để thực hiện việc này, hãy sử dụng Photoshop và hình ảnh có chiều rộng tối đa của màn hình (1280x720). Mặc dù trong trường hợp này, khi cuộn xuống, hình ảnh sẽ thay thế một hình ảnh khác.

Nhiều sự lựa chọn tốt nhất nếu bạn không muốn sử dụng css thì sẽ sử dụng kết cấu liền mạch. Họ không có bất kỳ khớp nào có thể nhìn thấy được. Chúng giống như giấy dán tường hoặc gạch hiện đại trong thiết kế. Cái này thay thế cái kia và không nhìn thấy khớp nào.

Nếu bạn quan tâm đến việc không có hậu quả pháp lý đối với việc sử dụng chúng, thì tôi khuyên bạn nên tìm kiếm trên trang web Pixabay.com .

HTML

Bây giờ hãy làm việc với mã. Tôi cần lưu ý ngay rằng chúng tôi hiện đang làm việc với html, nghĩa là chúng tôi đang thay đổi hình ảnh không phải cho toàn bộ trang web mà chỉ cho một trang web trang cụ thể, mà mã được viết. Nếu bạn quan tâm đến việc thay đổi toàn bộ tài nguyên thì bạn cần viết mã bằng cách sử dụng css, Nhưng nhiều hơn về điều này sau.

Vì vậy, bạn có thể làm việc trong notepad, tôi thích NotePad++ hơn. Sẽ thuận tiện hơn nhiều khi làm việc trong đó: mã được hoàn thành cho bạn, các thẻ được đánh dấu. Chương trình này miễn phí và nặng khoảng 3 MB. Tôi đánh giá cao nó, đặc biệt nếu bạn là người mới bắt đầu.

Vì vậy, để gắn thẻ thân hình bạn cần thêm thuộc tính lý lịch và chỉ ra liên kết đến hình ảnh nơi hình ảnh sẽ được chụp. Đây là những gì nó trông giống như trong chương trình.

Bạn chỉ có thể mở notepad và sao chép mã này. Trong dấu ngoặc kép, hãy đặt liên kết đến hình ảnh bạn thích.

Tôi muốn lưu ý cho người mới bắt đầu, đây là điểm chính. Nếu bạn chụp ảnh từ Pixabay, thì bạn cần dán liên kết không phải trên trang có hình ảnh mà mở hình ảnh trong tab tiếp theo.

Sao chép URL chính xác này.

Lưu tài liệu. Đừng quên rằng nếu bạn sử dụng notepad thì cần phải sử dụng tiện ích mở rộng .html . Chỉ cần đặt tên cho tài liệu, ví dụ: trở lại.html . Nếu không nó sẽ được lưu dưới dạng Dữ liệu văn bản và trình duyệt sẽ không hiểu nó cần làm gì.

Xong, trang này được tô bằng một màu khác.

Nếu bạn muốn tìm hiểu thêm về html, tôi khuyên bạn nên tải xuống khóa học miễn phí Evgenia Popova . Từ đó bạn sẽ học được nhiều thẻ hơn, khả năng ngôn ngữ, thử một số kỹ thuật mới và biết thêm nhiều điều.

Tôi sẽ không nói rằng các khóa học của Evgeniy Popov cực kỳ phổ biến. Nhiều chuyên gia mắng mỏ anh ta, và nếu bạn đã từng gặp những tuyên bố như vậy, thì đây là ý kiến ​​​​của tôi. Những bài học này được cung cấp miễn phí và mặc dù vậy, chúng vẫn hoàn thành xuất sắc nhiệm vụ chính của mình - chỉ cho người mới bắt đầu những kiến ​​​​thức cơ bản và giúp họ cập nhật.

Giống như mỗi người viết đều có quan điểm riêng về cách viết, các lập trình viên cũng có phong cách riêng của họ. Bạn có thể dành cả đời để học cách tạo trang web, nhưng bạn cần phải bắt đầu từ đâu đó. Từ sách? Không phải cái này. Có, chúng chứa thông tin đáng tin cậy hơn, thông tin cập nhập, nhưng chúng rất khó để thành thạo.

Bạn không đồng ý với tôi? Tôi có thể đưa ra một giải pháp thay thế. Sách của Elizabeth và Erica Freeman Học HTML, XHTML và CSS " Đây không phải là một cuốn sách bán chạy quá nhàm chán và được phát hành cách đây không lâu, vào năm 2016. Thông tin vẫn chưa trở nên lỗi thời.

CSS

Nếu bạn cần lặp lại nền trên tất cả các trang trên trang web của mình thì CSS là điều bắt buộc. Tất nhiên, bạn có thể chỉ định đường dẫn mỗi lần, như trong chương trước. Nhưng hãy tưởng tượng nếu theo thời gian bạn cần phải thay thế nó: liên kết trở nên lỗi thời hoặc đơn giản là bạn muốn thay đổi thiết kế. Vào từng trang và đổi mã? Điều này sẽ không hoạt động.

CSS giúp giải quyết vấn đề này. Bạn cần tạo một tệp có phần mở rộng css và nhập mã sau:

Hãy nói một chút về chính mã đó. Trong ngoặc đơn, sau địa chỉ bạn có thể nhập liên kết tới hình ảnh từ nguồn của bên thứ ba, hoặc đơn giản là tên của tài liệu, nếu ảnh nằm trong cùng thư mục với tệp này.

Dành cho những người muốn biết rõ hơn

Tại trợ giúp về css bạn có thể kéo dài hình nền, đảm bảo nó không lặp lại, thêm hoạt ảnh GIF và hơn thế nữa.

Bạn không thể viết mọi thứ trong một bài viết. Và tôi đã không đặt ra một nhiệm vụ như vậy cho chính mình. Có rất nhiều điều tế nhị, và nếu họ hứa sẽ kể cho bạn nghe mọi chuyện trong một bài viết thì đây chẳng qua là một sự lừa dối.

Bạn có muốn học cách viết trang web một cách chính xác? Tôi khuyên bạn nên học ngôn ngữ lập trình. Tôi có thể giới thiệu khóa học của Andrey Bernatsky “ HTML5 và CSS3 từ Zero đến Pro " Tôi thực sự thích tác giả này. Tôi đã không tham gia khóa học cụ thể này; vài năm trước cũng có một khóa học tương tự, nhưng kém hiện đại hơn.

Tác giả nói chuyện rất hay, mọi thứ đều dễ hiểu và dễ hiểu. Điểm nổi bật của khóa học này là bạn không chỉ học mà còn tạo một trang web cụ thể cùng với giáo viên. Kết quả là bạn sẽ có được một tấm danh thiếp, một blog và thậm chí là một cửa hàng trực tuyến. Rất tuyệt. Bạn có thể xem ba bài học lý thuyết đầu tiên về HTML5 từ khóa học này ngay tại đây.

Nhân tiện, cùng với khóa học này, bạn nhận được 7 phần thưởng: kiến ​​thức cơ bản về html và css của Andrei Bernatsky, bố cục cho người mới bắt đầu, tạo trang đích trong một buổi tối và hơn thế nữa. Trước khi bạn cam kết đào tạo nghiêm túc, hãy thử khóa học miễn phí " Thực hành HTML5 và CSS3 ».

Vâng, về cơ bản là tất cả. Đăng ký nhận bản tin để tìm hiểu thêm. Tôi sẽ sớm kể cho bạn nghe thêm một chút về bố cục thích ứng, tăng thu nhập từ bất kỳ blog nào và mang lại cho bạn rất nhiều lời khuyên hữu ích về việc đơn giản hóa công việc. Hẹn gặp lại và chúc may mắn trong nỗ lực của bạn.

Nhiều nhà thiết kế bố cục mới bắt đầu, mới đi sâu vào bản chất của việc tạo trang web, thường tự hỏi làm thế nào để tạo hình nền trong html. Và ngay cả khi một số người có thể hiểu được nhiệm vụ này, vấn đề vẫn nảy sinh khi kéo dài hình ảnh trên toàn bộ chiều rộng của màn hình. Đồng thời, tôi mong muốn trang web được hiển thị đồng đều trên tất cả các trình duyệt nên phải đáp ứng yêu cầu đa trình duyệt. Bạn có thể đặt nền theo hai cách: sử dụng kiểu CSS. Mỗi người đều chọn điều tốt nhất cho mình lựa chọn tốt nhất. Chắc chắn, kiểu CSS thuận tiện hơn nhiều, vì mã của nó được lưu trữ trong một tệp riêng biệt và không chiếm thêm các cột trong thẻ chính của trang web, nhưng trước tiên chúng ta sẽ xem xét một phương pháp đơn giản để cài đặt hình ảnh trên nền của trang web.

Các thẻ HTML cơ bản để tạo nền

Vì vậy, hãy chuyển sang câu hỏi, nền bằng html trên toàn bộ màn hình. Để trang web trông đẹp mắt, bạn cần hiểu một chi tiết khá quan trọng: chỉ cần làm là đủ nền dốc hoặc sơn nó một màu, nhưng nếu bạn cần chèn hình ảnh vào nền, nó sẽ không trải dài trên toàn bộ chiều rộng của màn hình. Ban đầu, bạn cần chọn một hình ảnh hoặc tự thiết kế với tiện ích mở rộng mà trang trên trang web của bạn sẽ được hiển thị. Chỉ sau khi hình nền đã sẵn sàng, hãy chuyển nó vào thư mục có tên “Hình ảnh”. Trong đó, chúng tôi sẽ lưu trữ tất cả các hình ảnh, hoạt ảnh đã sử dụng và những thứ khác tập tin đồ họa. Thư mục này phải ở trong thư mục gốc với tất cả của bạn tập tin html. Bây giờ bạn có thể chuyển sang mã. Có một số tùy chọn để viết mã sẽ thay đổi nền thành ảnh.

1. Viết thuộc tính thẻ.
2. Thông qua phong cách CSS trong mã HTML.
3. Viết kiểu CSS trong một tệp riêng biệt.

Cách tạo nền cho hình ảnh trong HTML là tùy thuộc vào bạn, nhưng tôi muốn nói đôi lời về cách tối ưu nhất. Phương pháp đầu tiên, sử dụng cách viết thông qua thuộc tính thẻ, đã lỗi thời từ lâu. Tùy chọn thứ hai được sử dụng trong những trường hợp rất hiếm, chỉ vì thu được nhiều mã giống nhau. Và lựa chọn thứ ba là phổ biến và hiệu quả nhất. Đây ví dụ HTML thẻ:

1. Cách ghi đầu tiên là thông qua thuộc tính thẻ (body) trong file index.htm. Nó được viết dưới dạng sau: (body Background= "Folder_name/Image_name.extension")(/body). Nghĩa là, nếu chúng ta có một bức tranh có tên “Picture” và Phần mở rộng JPG, và chúng ta đặt tên thư mục là “Hình ảnh”, khi đó mục nhập mã HTML sẽ trông như thế này: (body Background="Images/Picture.jpg")… (/body).
2. Phương pháp ghi thứ hai ảnh hưởng đến kiểu CSS, nhưng được viết trong cùng một tệp có tên là index.htm. (body style="background: url("../Images/Picture.jpg")").
3. Và phương pháp ghi thứ ba được thực hiện thành hai tệp. Trong tài liệu có tên là index.htm, dòng sau được viết: (head)(link rel="stylesheet" type="text/css" href="Path_to_CSS_file")(/head). Và trong tệp kiểu có tên style.css, chúng tôi đã viết: body (nền: url(Images/Picture.jpg")).

Chúng ta đã thảo luận cách tạo hình nền trong HTML. Bây giờ bạn cần hiểu cách kéo dài hình ảnh theo chiều rộng của toàn bộ màn hình.

Các cách kéo dài hình nền theo chiều rộng của cửa sổ

Hãy tưởng tượng màn hình của chúng ta trong dạng phần trăm. Hóa ra toàn bộ chiều rộng và chiều dài của màn hình sẽ là 100% x 100%. Chúng ta cần kéo dài hình ảnh đến chiều rộng này. Hãy thêm một dòng vào mục hình ảnh trong tệp style.css. Dòng này sẽ kéo dài hình ảnh theo toàn bộ chiều rộng và chiều dài của màn hình. Làm thế nào điều này được viết theo phong cách CSS? Thật đơn giản!

nền: url(Hình ảnh/Picture.jpg")

kích thước nền: 100%; /* mục này phù hợp với hầu hết trình duyệt hiện đại */

Vì vậy, chúng tôi đã tìm ra cách tạo một hình ảnh làm nền trong html để lấp đầy toàn bộ màn hình. Ngoài ra còn có một cách để ghi vào tệp index.htm. Mặc dù phương pháp này đã lỗi thời nhưng người mới bắt đầu cần phải biết và hiểu nó. Trong thẻ (head)(style) div (background-size: cover; ) (/style) (/head), mục này có nghĩa là chúng ta đang chọn một khối đặc biệt cho nền, khối này sẽ được định vị trên toàn bộ chiều rộng của cửa sổ. Chúng tôi đã xem xét 2 cách để tạo nền trang web hình ảnh htmlđể hình ảnh trải dài trên toàn bộ chiều rộng của màn hình trong bất kỳ trình duyệt hiện đại nào.

Cách tạo nền cố định

Nếu bạn quyết định sử dụng một hình ảnh làm nền cho tài nguyên web trong tương lai, thì bạn chỉ cần tìm cách làm cho nó bất động để nó không bị giãn dài ra và làm hỏng vẻ ngoài thẩm mỹ. Thật dễ dàng để viết phần bổ sung nhỏ này với sự trợ giúp. Bạn cần thêm một cụm từ trong tệp style.css sau nền: url(Images/Picture.jpg") đã được sửa; hoặc thay vào đó, hãy thêm một dòng riêng sau dấu chấm phẩy - vị trí: đã sửa. Do đó, bạn Hình nền sẽ trở nên bất động. Khi bạn cuộn qua nội dung trên trang web, bạn sẽ thấy rằng chuỗi văn bản di chuyển, nhưng nền vẫn giữ nguyên. Vậy là bạn đã học được cách tạo hình nền trong HTML theo nhiều cách.

Làm việc với bảng trong HTML

Nhiều nhà phát triển web thiếu kinh nghiệm khi đối mặt với các bảng và khối thường không hiểu cách tạo hình ảnh làm nền bảng trong HTML. Giống như tất cả các kiểu CSS, ngôn ngữ lập trình web này khá đơn giản. Và giải pháp cho vấn đề như vậy là viết một vài dòng mã. Bạn hẳn đã biết rằng cách viết hàng của bảng và các cột được chỉ định tương ứng là thẻ (tr) và (td). Để làm nền bảng dưới dạng hình ảnh, bạn cần thêm một cụm từ đơn giản vào thẻ (table), (tr) hoặc (td) biểu thị liên kết đến hình ảnh: nền = URL của hình ảnh. Để rõ ràng, hãy đưa ra một vài ví dụ.

Bảng có hình ảnh thay vì nền: ví dụ HTML

Hãy vẽ một bảng 2x3 và đặt nền của nó thành một bức ảnh được lưu trong thư mục “Hình ảnh”: (nền bảng = “Images/Picture.jpg”) (tr) (td)1(/td) (td)2(/td) (td) 3)(/td)(/tr) (tr)(td)4(/td) (td)5(/td) (td)6(/td)(/tr) (/table). Bằng cách này, bảng của chúng ta sẽ được vẽ vào nền của bức tranh.

Bây giờ chúng ta hãy vẽ cùng một tấm có kích thước 2x3, nhưng chèn ảnh vào các cột được đánh số 1, 4, 5 và 6. (table)(tr)(td Background = “Images/Picture.jpg”)1(/td) (td )2 (/td) (td)3(/td)(/tr) (tr)(td nền = “Hình ảnh/Picture.jpg”)4(/td) (td nền = “Hình ảnh/Picture.jpg”) 5( /td) (td nền = “Hình ảnh/Picture.jpg”)6(/td) (/tr) (/table). Sau khi xem, chúng tôi thấy rằng nền chỉ xuất hiện trong các ô mà chúng tôi đã đăng ký chứ không xuất hiện trong toàn bộ bảng.

Khả năng tương thích đa trình duyệt của trang web

Ngoài ra còn có một thứ như khả năng tương thích giữa nhiều trình duyệt của một tài nguyên web. Điều này có nghĩa là các trang của trang web sẽ được hiển thị chính xác như nhau trong các loại khác nhau và các phiên bản trình duyệt. Trong trường hợp này, bạn cần tùy chỉnh mã HTML và kiểu CSS cho phù hợp. trình duyệt cần thiết. Ngoài ra, ở thời hiện đại phát triển của điện thoại thông minh, nhiều nhà phát triển web đang cố gắng tạo ra các trang web phù hợp với phiên bản di động và dưới dạng xem máy tính.