Cách chèn ảnh nền vào css. Đặt nền liền mạch trong HTML

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ẽ giới thiệu cho bạn một dịch vụ nước ngoài tuyệt vời để chọn hình 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ể dán mã này vào tệp văn bản và lưu nó 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.

Để nhanh chóng thay đổi nền hoặc bất kỳ hình ảnh nào trên trang, chỉ cần chỉ định đường dẫn mới tới tệp của bạn bằng trình chỉnh sửa văn bản.

Để tìm đường dẫn trước đó, bạn cần truy cập trang có ảnh, nhấp chuột phải vào ảnh và nhấp vào “Sao chép URL ả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ỉ nhận được ý tưởng chung và các ví dụ làm sẵn mà còn hiểu được 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ấp đầy toàn bộ không gian có sẵn của 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. Đáng chú ý là không thể đặt màu và/hoặc hình nền bằng HTML cho tất cả các thành phần 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 trường hợp này, chúng tôi đang đặ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:

Văn bản có nền

Đá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 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:

Văn bản có nền

Đá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ỉ ảnh nền. Trong trường hợp này, đường dẫn tương đối đến hình ảnh được sử dụng, 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 tới 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, vì vậy để đảm bảo tính hợp lệ của mã HTML, bạn sẽ phải sử dụng DOCTYPE chuyển tiếp. Để đặt màu nền trong HTML, nó sử dụng các mã đặc biệt mà bạn có thể tìm thấy trong trình chỉnh sửa đồ 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!

lúc 22:37

Chỉnh sửa tin nhắ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 phương án tối ưu nhất cho mình. Tất nhiê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, hãy xem một phương pháp đơn giản để đặt hình ảnh vào 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, bạn cần hiểu một chi tiết khá quan trọng: chỉ cần làm nền gradient hoặc sơn màu đồng nhất là đủ, nhưng nếu bạn cần chèn ảnh vào nền thì nó sẽ không giãn ra. 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ả hình ảnh, hình động và các tệp đồ họa khác mà chúng tôi sử dụng. Thư mục này phải nằm trong thư mục gốc của tất cả các tệp html của bạn. 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.

Viết thuộc tính thẻ.
Thông qua phong cách CSS trong mã HTML.
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. Dưới đây là ví dụ HTML về thẻ:

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 hình ảnh có tên “Hình ảnh” và phần mở rộng JPG, đồng thời chúng ta đặt tên thư mục là “Hình ảnh”, thì mục nhập mã HTML sẽ trông như thế này: (body Background="Images/Picture.jpg") … (/thân hình) .
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")").
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 ở 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 các 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 phân bổ 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 để biến nền của trang web thành 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 phần 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. Như vậy, hình nền của bạn sẽ không chuyển động. Lướt qua nội dung trên trang web, bạn sẽ thấy các dòng 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 nền thành hình ảnh 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 việc ghi các hàng và cột trong bảng tương ứng được gọi là các 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 và phiên bản trình duyệt khác nhau. Trong trường hợp này, bạn cần điều chỉnh mã HTML và kiểu CSS cho phù hợp với trình duyệt được yêu cầu. Ngoài ra, trong thời đại phát triển của điện thoại thông minh hiện đại, nhiều nhà phát triển web đang cố gắng tạo ra các trang web phù hợp với cả phiên bản di động và chế độ xem trên máy tính.

Trong html, nền của trang web không được chỉ định; nó được viết bằng các kiểu CSS, nhưng đây chỉ là hình thức lý thuyết. Bây giờ chúng ta hãy tìm hiểu làm thế nào để xác định nền này.

Nền cho một trang web hoặc một khối riêng biệt

Vì chúng ta cần một tệp css để đạt được mục tiêu này nên chúng ta cần tạo nó và kết nối nó với html. Điều này được viết về trong. Sau này bạn có thể bắt đầu làm việc. Trước tiên, bạn cần phải quyết định xem bạn muốn đặt nền nào. Nếu toàn bộ trang thì bạn có thể làm như thế này:

Thân( màu nền: trắng; )

Tức là chúng ta truy cập vào thẻ body, thẻ này đại diện cho toàn bộ trang của chúng ta. Để đặt màu nền, hãy sử dụng thuộc tính màu nền. Nhưng điều gì sẽ xảy ra nếu bạn cần đặt nền thành một mẫu chứ không phải một màu đồng nhất? Sau đó, bạn nên viết nó như thế này:

Nội dung( hình nền: url(đường dẫn đến hình ảnh. phần mở rộng hình ảnh) )

Để rõ ràng, tôi đề xuất xem xét mọi thứ chi tiết hơn bằng cách sử dụng một ví dụ. Đối với điều này tôi sẽ sử dụng hình ảnh này:

Ví dụ: hình nền: url(comp.png) . Trong ví dụ này, chúng tôi đặt hình nền có tên comp (tôi gọi nó như vậy) ở định dạng png, nằm trong cùng thư mục với tệp css.
Trong html tôi sẽ tạo một khối tùy chỉnh với các kích thước cụ thể để thể hiện hoạt động của các thuộc tính CSS.

Và đây là phong cách cho nó:

#ct( hình nền: url(comp.png); chiều rộng: 600px; chiều cao: 400px; )

Đây là những gì chúng tôi có:

Tại sao vậy? Thực tế là theo mặc định, trình duyệt sẽ lặp lại hình ảnh rất nhiều lần để lấp đầy toàn bộ khối. Đôi khi điều này là cần thiết, chẳng hạn như khi sử dụng các mẫu liền mạch, nhưng trong trường hợp của chúng ta phải có một hình ảnh. May mắn thay, điều này có thể được quản lý rất dễ dàng.

Lặp lại nền

Nếu bạn có hình ảnh làm nền thì theo mặc định, nó sẽ được lặp lại theo chiều ngang và chiều dọc để lấp đầy toàn bộ không gian của trang. Để loại bỏ điều này, hãy sử dụng thuộc tính lặp lại nền và giá trị không lặp lại của nó. Ngoài ra còn có các giá trị sau:

Lặp lại-x - chỉ lặp lại theo chiều ngang
Lặp lại-y – chỉ theo chiều dọc

Hãy thêm vào các thuộc tính của nền đồ họa của chúng tôi:

Lặp lại nền: không lặp lại;

Chức vụ

Thuộc tính vị trí nền xác định vị trí đặt hình ảnh. Hai giá trị được chỉ định ở đây – theo chiều ngang và chiều dọc. Ví dụ: vị trí nền: dưới cùng bên phải – vị trí ở góc dưới bên phải, trên cùng bên trái – ở góc dưới phía trên (và theo mặc định), 250px 500px – bù từ góc trên bên trái sang bên phải 250 pixel và giảm xuống 500.

Chúng ta hãy xem xét tốt hơn các ví dụ:

Vị trí nền: trên cùng bên phải;

Hình ảnh sẽ di chuyển đến cạnh trên bên phải. Tôi cũng tạo cho khối này nền màu vàng để có thể nhìn thấy các cạnh của nó.

vị trí nền: 50% 50%;

Hình ảnh xuất hiện chính xác ở giữa khối của nó. Có, vâng, điều này cũng có thể thực hiện được nhờ vào việc ghi lại tỷ lệ phần trăm của vị trí.

vị trí nền: 70% 20%;

Nền được dịch chuyển 70% theo chiều ngang và 20% theo chiều dọc.

Nó cũng được phép chỉ định giá trị vị trí âm tính bằng pixel. Điều này có thể được thực hiện, ví dụ, khi bạn đang sử dụng một hình ảnh sprite lớn và bạn cần đặt phần cần thiết của sprite này vào một khối.

Khóa nền

Tôi cũng thực sự thích một thuộc tính có tên là Background-attachment . Nó chỉ có hai giá trị và giá trị đầu tiên là mặc định (cuộn). Điều này có nghĩa là khi bạn cuộn trang, nền cũng sẽ cuộn và nếu bạn sử dụng một hình ảnh không lặp lại, cuối cùng nó sẽ chỉ có một màu đơn sắc.

Để ngăn điều này xảy ra, phần đính kèm nền: đã sửa được chỉ định và bây giờ nền của chúng ta đã được cố định an toàn tại chỗ. Điều này có thể được so sánh với cách xác định vị trí cố định cho một khối để nó không biến mất khỏi trang khi cuộn.

Một phiên bản rút gọn của tất cả điều tốt đẹp này

Chúng ta đã thảo luận về nhiều thuộc tính cho phép bạn tạo nền, nhưng nếu bạn áp dụng tất cả chúng, bạn sẽ có một bản ghi cồng kềnh. Có một giải pháp rất thanh lịch. Thuộc tính nền cho phép bạn viết các cài đặt cần thiết cách nhau bằng dấu cách theo thứ tự sau:
Nền: vị trí ghim lặp lại hình ảnh màu;
Và bây giờ mọi thứ có thể được viết như thế này:

Nền: url màu vàng (comp.png) không lặp lại 20% 100px;

Nếu một số thuộc tính không cần phải được xác định thì nó chỉ cần được bỏ qua (trong trường hợp của chúng tôi, chúng tôi không viết phần đính kèm nền).

Rất nhiều hình nền

Nếu bạn cần một vài hình nền thì sao? Nó xảy ra, bạn có thể làm gì? Ngày nay CSS hỗ trợ tính năng này. Chúng ta hãy thử nó quá. Hãy lấy biểu tượng này

Tôi gọi nó là máy tính xách tay.

Và đây là đoạn mã để chèn multiphone:

Bối cảnh: url(comp.png) không lặp lại 20% 100px, url(laptop.png) không lặp lại 50% 50%; màu nền: màu vàng;

Như bạn có thể thấy, bạn chỉ cần đặt dấu phẩy sau hình ảnh đầu tiên và nhập cài đặt cho hình ảnh thứ hai. Trong trường hợp này, tốt hơn là nên đặt một màu đồng nhất riêng biệt.

Tương tự như vậy, bạn có thể ghi thêm bao nhiêu ảnh tùy thích, nhưng đừng lạm dụng - quá nhiều đồ họa sẽ không đẹp cho lắm.

Đây là nơi tôi muốn kết thúc bài viết này. Bạn có thể làm nhiều điều thú vị khác với nền tảng này, tôi sẽ cố gắng viết về chúng trong tương lai (và tôi đã viết một cái gì đó - chẳng hạn).

Xin chào các bạn! Gần đây tôi đã phân tích blog của mình để tìm ra điểm yếu trong thiết kế và đi đến kết luận rằng nền trông rất kém và không phù hợp với bảng màu chính của toàn bộ trang web.

Điều này là do nền phù hợp với màu sắc chính của mẫu, cá nhân tôi thấy điều này hơi khó chịu và mắt tôi rất mỏi.

Trong bài viết ngắn này, tôi sẽ cho bạn biết cách tạo và thay đổi nền của trang web, hãy đọc kỹ cho đến cuối và tìm hiểu xem điều gì đã xảy ra.

Cách tạo nền cho một trang web trực tuyến

Trước khi tạo nền, bạn nên hiểu rằng bạn không nên chọn hình ảnh lớn cho việc này, điều này sẽ chỉ tạo thêm tải cho dự án, do đó sẽ mất nhiều thời gian để tải.

Tôi đã viết về cách tăng tốc độ tải của blog trong các bài viết trước: “” và “”.

Vì vậy, tốt nhất nên sử dụng PATTERN làm ảnh nền.

Mẫu là một bức tranh nhỏ không có đường nối, khi lặp lại sẽ tạo thành một nền lớn lấp đầy toàn bộ không gian của trang web.

Có rất nhiều cách để tạo nền (hoa văn). Ví dụ: bạn có thể mở bất kỳ công cụ tìm kiếm nào và nhập truy vấn vào thanh tìm kiếm “Tải nền cho trang web”, sau đó duyệt qua nhiều trang web khác nhau trong một thời gian dài với hy vọng tìm được mẫu phù hợp.

Nhưng làm thế nào để tạo nền với nỗ lực tối thiểu? Tôi khuyên bạn nên chú ý đến việc lựa chọn các dịch vụ trực tuyến có hàng trăm hình nền làm sẵn trong cơ sở dữ liệu của họ; tất cả những gì bạn phải làm là chỉnh sửa và tùy chỉnh chúng theo ý thích của mình.

1) MẫuCooler

Một trong những kho lưu trữ lớn nhất của bộ sưu tập hình nền. Tại đây, bạn có thể tìm thấy một mẫu có các họa tiết khác nhau, tự thay đổi các thông số màu sắc và cũng có thể chọn một mẫu phổ biến từ trên xuống.

Hãy nhìn những gì tôi đã có thể chọn cho mình:

2) máy phát điện sọc

Cũng là một trình tạo nền trực tuyến tốt. Có một số lượng nhỏ cài đặt và cơ sở dữ liệu trống khá lớn.

Kết quả của tôi:

3) BgMẫu

Một dịch vụ rất thú vị để tạo hình nền trực tuyến. Bạn có thể chọn các thiết kế khác nhau (trái tim, ngôi sao, hình tròn) và cách phối màu của nền đã tạo.

Hãy xem tôi đã chọn gì cho mình:

4) thợ làm vải tartan

Với những ai muốn tự tạo phông nền ca rô cho mình thì nên ghé thăm dịch vụ làm nền trực tuyến này.

Cách thay đổi nền trên trang HTML và PHP

Nếu bạn đang làm việc với một trang web được phát triển độc quyền bằng HTML thì bạn sẽ cần chèn nền vào thẻ mở ... Nó sẽ trông giống như thế này:

Nếu mẫu chính không được tải, thay vào đó, màu được chỉ định trong bgcolor (FFFFFF) sẽ được tải.

Về cơ bản, hầu hết những người mới bắt đầu và thậm chí cả những quản trị viên web nâng cao đều sử dụng CMS WordPress làm công cụ blog, vì vậy để cài đặt nền trên trang web, bạn cần tải mẫu đã tạo ở trên lên thư mục của mình cùng với hình ảnh chủ đề.

Để làm điều này, tôi tải một hình ảnh (mẫu) lên hosting, thư mục nằm ở địa chỉ này:

/ httpdocs/ wp- nội dung/ chủ đề/ Prosumer/ hình ảnh

/httpdocs/wp-content/themes/Prosumer/images

nền: #FFFFFF url(image/fon-1.png) lặp lại;

Cài đặt cơ bản: