ĐịNh nghĩa và Định vị Ảnh Header của bạn với CSS trong WordPress Hai mươi Mười lăm - những núm vú

Phần lớn các chủ đề có một hình ảnh tiêu đề xuất hiện ở đầu trang. Trong WordPress, hình ảnh này được tạo ra bởi một hình ảnh được định nghĩa hoặc là trong giá trị CSS cho thuộc tính đại diện cho vùng tiêu đề hoặc thông qua việc sử dụng tính năng tiêu đề tùy chỉnh trong WordPress.

Định nghĩa hình nền để sử dụng như một tiêu đề

Trong WordPress mặc định Twenty Pifteen chủ đề, bao gồm một hình ảnh tiêu đề tùy chỉnh trên một trang web sử dụng Twenty Pifteen chủ đề là khá darn dễ dàng. Tất cả các công việc khó khăn đã được thực hiện cho bạn.

Trong các chủ đề không có tính năng hình ảnh tiêu đề tùy chỉnh, bạn có thể dễ dàng xác định một hình nền cho hình ảnh tiêu đề sử dụng CSS. Đối với mục đích của ví dụ này, đánh dấu HTML cho tiêu đề trong mẫu là

Trong tệp CSS (kiểu.css), bạn có thể sử dụng một hình nền bằng cách định nghĩa nó trong thuộc tính CSS cho #header. Sử dụng mã này:

#header {background: url (/ images / header-image. Jpg) no-repeat; chiều rộng: 980px; height: 100px;}

Giá trị nền cho biết một tiêu đề hình ảnh. hình ảnh jpg. Để hình ảnh đó xuất hiện trên trang web của bạn, bạn cần tạo hình ảnh và tải nó lên máy chủ web của bạn trong thư mục / images /.

Khi làm việc với đồ họa trên web, bạn nên sử dụng các định dạng hình ảnh GIF, JPG, hoặc PNG. Đối với hình ảnh có một số lượng nhỏ màu sắc (chẳng hạn như biểu đồ, biểu trưng, ​​biểu tượng, v.v …), định dạng GIF hoạt động tốt nhất. Đối với các loại hình ảnh khác (ảnh chụp màn hình với văn bản và hình ảnh, pha trộn minh bạch, v.v …), sử dụng JPG hoặc PNG.

Định vị, lặp lại hoặc cuộn hình nền của bạn

Sau khi bạn tải lên đồ hoạ để sử dụng trong chủ đề của mình, bạn có thể sử dụng thuộc tính nền của CSS để định vị nó. Các thuộc tính CSS chính - background-position, background-repeat, và background-attachment - giúp bạn đạt được hiệu quả mong muốn. Kiểm tra các thuộc tính nền của CSS và các giá trị có sẵn của chúng để thay đổi chúng trong bảng định kiểu chủ đề của bạn.

Ví dụ vị trí nền Xác định điểm xuất phát của hình nền trên trang web dưới dưới cùng trung tâm phía dưới bên phải trái trung tâm

ngay trung tâm trung tâm trung tâm

vị trí nền: trung tâm phía dưới;

lặp lại-y (lặp lại theo chiều dọc)

lặp lại-x (lặp lại theo chiều ngang)

lặp lại < không lặp lại (không lặp lại) background-repeat: repeat-y; background-attachment Xác định hình nền của bạn đã được cố định hay cuộn

với cửa sổ trình duyệt Cố định

cuộn

background-attachment: scroll;

Bạn có thể khám phá vị trí của hình ảnh tiêu đề với một số giá trị được cung cấp ở trên.Nếu bạn là người trực quan, bạn sẽ thích thử nghiệm và tinh chỉnh các giá trị để xem các hiệu ứng trên trang web của bạn. Nói mục tiêu của bạn là ngói, hoặc lặp lại, hình nền

theo chiều ngang, hoặc qua màn hình trình duyệt từ trái sang phải để nó vảy với chiều rộng của trình duyệt trên bất kỳ máy tính nào. Bạn cũng muốn thay đổi màu nền cho một màu khác (như màu trắng, như trong mẫu sau). Để đạt được điều này, mở lại bảng định kiểu và thay đổi:

background: # f1f1f1; đến

nền: #FFFFFF; background-image: url (hình ảnh / tiêu đề-hình ảnh. jpg); background-repeat: repeat-x;

hoặc bạn có thể sử dụng nền : #FFFFFF url (hình ảnh / tiêu đề hình ảnh.jpg) repeat-x;