Saat menyiapkan situs web apa pun, selain fungsionalitas, desain juga sangat penting. Inilah yang menentukan gaya dan desain perusahaan atau orang tertentu yang membuat situs web tersebut. Menyesuaikan warna latar belakang dan gambar sangatlah mudah dengan mengikuti petunjuk di artikel ini.

• masukkan baris:

Periksa halaman web Anda. Anda akan melihat bahwa latar belakang telah diganti dengan teks Anda.

• background-repeat : “Nilai.” Opsi untuk nilai Anda dapat berupa: “repeat-x” – mengulangi gambar latar belakang Anda secara horizontal dan vertikal. “repeat-y” – pengulangan hanya secara vertikal. “no-repeat” – gambar dibekukan di tempatnya dan tidak terulang. “spasi” – seluruh halaman akan diisi dengan jumlah salinan gambar maksimum, yang terluar akan dipotong. “bulat” – opsi yang sama, tetapi tepi gambar akan diskalakan dengan hati-hati;
• lampiran latar belakang: “Nilai.” Jika Anda mengganti tag “scroll” dan bukan kata Value, gambar akan bergulir bersama situsnya. “diperbaiki” – latar belakang tetap tidak berubah saat menggulir;
• ukuran latar belakang: Nilai Nilai2. Di sini nilainya harus bernilai piksel. Misalnya: 100px 200px. Selain piksel, nilai persentase juga diterima. Ini adalah opsi untuk mengisi halaman dengan gambar. Selain angka, Anda dapat memasukkan dua parameter: “contain” – mengisi halaman dengan gambar sepanjang sisi panjangnya dan “cover” – mengisi halaman dengan gambar sepanjang lebarnya.

Setelah Anda mengetahui dasar-dasar mengisi halaman dengan latar belakang HTML, Anda siap membuat situs web pertama Anda.

Banyak desainer tata letak pemula, yang baru mempelajari esensi pembuatan situs web, sering bertanya-tanya bagaimana cara membuat latar belakang gambar dalam html. Dan meskipun beberapa orang dapat mengatasi tugas ini, masalah masih muncul saat merentangkan gambar ke seluruh lebar monitor. Pada saat yang sama, saya ingin situs tersebut ditampilkan secara merata di semua browser, sehingga persyaratan lintas browser harus dipenuhi. Anda dapat mengatur latar belakang dengan dua cara: menggunakan gaya CSS. Setiap orang memilih opsi yang paling optimal untuk dirinya sendiri. Tentu saja, gaya CSS jauh lebih nyaman, karena kodenya disimpan dalam file terpisah dan tidak menggunakan kolom tambahan di tag utama situs, tetapi pertama-tama, mari kita lihat metode sederhana untuk menyetel gambar ke latar belakang situs.

Tag HTML dasar untuk membuat latar belakang

Jadi, mari kita beralih ke pertanyaan, latar belakang dalam html di seluruh layar. Agar situs terlihat indah, Anda perlu memahami satu detail yang cukup penting: cukup membuat latar belakang gradien atau mengecatnya dengan warna solid, tetapi jika Anda perlu memasukkan gambar ke latar belakang, itu tidak akan meregang. di seluruh lebar monitor. Awalnya, Anda perlu memilih gambar atau membuat desain sendiri dengan ekstensi di mana halaman situs Anda akan ditampilkan. Baru setelah gambar latar belakang siap, pindahkan ke folder bernama “Gambar”. Di dalamnya kita akan menyimpan semua gambar, animasi dan file grafik lainnya yang kita gunakan. Folder ini harus berada di direktori root semua file html Anda. Sekarang Anda dapat melanjutkan ke kodenya. Ada beberapa pilihan penulisan kode yang akan mengubah background menjadi gambar.

1. Tulis atribut tag.
2. Melalui gaya CSS dalam kode HTML.
3. Tulis gaya CSS dalam file terpisah.

Cara membuat latar belakang gambar dalam HTML terserah Anda, tetapi saya ingin menyampaikan beberapa patah kata tentang cara yang paling optimal. Cara pertama, menggunakan penulisan melalui atribut tag, sudah lama ketinggalan jaman. Opsi kedua digunakan dalam kasus yang sangat jarang, hanya karena banyak kode yang sama diperoleh. Dan opsi ketiga adalah yang paling umum dan efektif. Berikut adalah contoh tag HTML:

1. Cara penulisannya yang pertama adalah melalui atribut tag (body) pada file index.htm. Ditulis dalam bentuk berikut: (body background= "Nama_Folder/Nama_Gambar.ekstensi")(/body). Artinya, jika kita memiliki gambar dengan nama “Gambar” dan berekstensi JPG, dan kita menamai folder tersebut “Gambar”, maka entri kode HTML akan terlihat seperti ini: (body background="Images/Picture.jpg") … (/tubuh) .
2. Metode perekaman kedua mempengaruhi gaya CSS, tetapi ditulis dalam file yang sama bernama index.htm. (body style="latar belakang: url("../Images/Picture.jpg")").
3. Dan cara perekaman yang ketiga dibuat dalam dua file. Dalam dokumen bernama index.htm, baris berikut ditulis: (head)(link rel="stylesheet" type="text/css" href="Path_to_CSS_file")(/head). Dan di file style bernama style.css kita sudah menulis: body (background: url(Images/Picture.jpg")).

Kami telah membahas cara membuat gambar latar belakang dalam HTML. Sekarang Anda perlu memahami cara meregangkan gambar melintasi lebar seluruh layar.

Cara meregangkan gambar latar belakang ke lebar jendela

Bayangkan layar kita dalam bentuk persentase. Ternyata seluruh lebar dan panjang layar akan menjadi 100% x 100%. Kita perlu meregangkan gambar hingga lebar ini. Mari tambahkan baris ke entri gambar di file style.css, yang akan meregangkan gambar ke seluruh lebar dan panjang monitor. Bagaimana ini ditulis dalam gaya CSS? Sederhana saja!

latar belakang: url(Gambar/Gambar.jpg")

ukuran latar belakang: 100%; /* entri ini cocok untuk sebagian besar browser modern */

Jadi kami menemukan cara menjadikan gambar sebagai latar belakang dalam html untuk memenuhi seluruh layar. Ada juga cara untuk menulis di file index.htm. Meskipun cara ini sudah ketinggalan jaman, namun para pemula perlu mengetahui dan memahaminya. Dalam tag div (head)(style) ( background-size: cover; ) (/style) (/head), entri ini berarti kita memilih blok khusus untuk latar belakang, yang akan diposisikan di seluruh lebar jendela. Kami melihat 2 cara untuk membuat latar belakang situs web menjadi gambar HTML sehingga gambar tersebut membentang di seluruh lebar layar di browser modern mana pun.

Cara membuat latar belakang tetap

Jika Anda memutuskan untuk menggunakan gambar sebagai latar belakang sumber daya web masa depan, maka Anda hanya perlu mencari tahu cara membuatnya tidak bergerak agar tidak memanjang dan merusak tampilan estetika. Cukup mudah untuk menulis tambahan kecil ini dengan bantuan. Anda perlu menambahkan satu frasa di file style.css setelah background: url(Images/Picture.jpg") fixed; atau sebagai gantinya menambahkan baris terpisah setelah titik koma - position: fixed. Dengan demikian, gambar latar belakang Anda akan menjadi tidak bergerak. Selama Saat menelusuri konten di situs, Anda akan melihat bahwa baris teks bergerak, tetapi latar belakang tetap di tempatnya. Jadi, Anda telah mempelajari cara membuat latar belakang gambar dalam html dengan beberapa cara.

Bekerja dengan tabel dalam HTML

Banyak web developer yang belum berpengalaman, ketika dihadapkan pada tabel dan blok, seringkali tidak memahami cara menjadikan gambar sebagai background tabel di HTML. Seperti semua gaya CSS, bahasa pemrograman web ini cukup sederhana. Dan solusi untuk masalah ini adalah dengan menulis beberapa baris kode. Anda pasti sudah tahu bahwa penulisan baris dan kolom tabel masing-masing disebut dengan tag (tr) dan (td). Untuk membuat latar belakang tabel dalam bentuk gambar, Anda perlu menambahkan frasa sederhana ke tag (tabel), (tr) atau (td) yang menunjukkan tautan ke gambar: background = URL gambar. Untuk lebih jelasnya, mari kita berikan beberapa contoh.

Tabel dengan gambar dan bukan latar belakang: contoh HTML

Mari menggambar tabel 2x3 dan menjadikan latar belakangnya sebagai gambar yang disimpan di folder “Gambar”: (latar belakang tabel = “Gambar/Gambar.jpg”) (tr) (td)1(/td) (td)2(/td) (td) 3)(/td)(/tr) (tr)(td)4(/td) (td)5(/td) (td)6(/td)(/tr) (/tabel). Dengan cara ini meja kita akan dicat menjadi latar belakang gambar.

Sekarang mari kita menggambar piring yang sama dengan dimensi 2x3, tetapi menyisipkan gambar ke dalam kolom bernomor 1, 4, 5 dan 6. (tabel)(tr)(td background = “Gambar/Gambar.jpg”)1(/td) (td )2 (/td) (td)3(/td)(/tr) (tr)(td background = “Gambar/Gambar.jpg”)4(/td) (td background = “Gambar/Gambar.jpg”) 5( /td) (td latar belakang = “Gambar/Gambar.jpg”)6(/td) (/tr) (/tabel). Setelah dilihat, kita melihat bahwa latar belakang hanya muncul di sel tempat kita mendaftar, dan tidak di seluruh tabel.

Kompatibilitas situs lintas browser

Ada juga yang namanya kompatibilitas lintas-browser dari sumber daya web. Artinya, halaman situs akan ditampilkan dengan benar di berbagai jenis dan versi browser. Dalam hal ini, Anda perlu menyesuaikan kode HTML dan gaya CSS dengan kebutuhan browser. Selain itu, di era modern perkembangan ponsel pintar, banyak pengembang web yang mencoba membuat situs yang disesuaikan baik untuk versi seluler maupun tampilan komputer.

Halo semuanya! Pelayan Anda yang rendah hati menghubungi Anda dengan sebagian materi yang berguna dan praktis tentang topik cara mengatur latar belakang untuk sebuah situs web. Ini adalah permulaan tata letak html dan di sini saya akan menunjukkan dengan jelas dengan contoh bagaimana Anda dapat membuat latar belakang yang indah untuk sebuah situs yang pasti akan menarik pengguna Internet dan menambah orisinalitas.

Jika Anda perhatikan, sebagian besar pebisnis online menggunakan latar belakang unik pada halaman penjualan dan langganan mereka. Hari ini kita akan menganalisis komponen teknis dari proses ini.

Jadi, pertama-tama kita perlu, tentu saja, sebuah gambar. Ada satu situs yang sangat bagus di Internet asing tempat Anda dapat mengunduh berbagai macam gambar untuk latar belakang situs web. Jumlah mereka sangat banyak di sana. Situs tersebut bernama Pola Halus.

Ini muncul pertama kali dalam daftar mesin pencari Google, jadi saya merekomendasikannya untuk bekerja. Anda juga dapat menemukan sejumlah besar situs lain jika Anda mengetik di mesin pencari sesuatu seperti “pola gambar latar belakang”, “unduh gambar latar belakang untuk situs” dan sebagainya.

Jika Anda tidak memiliki masalah dengan bahasa Inggris, Anda akan memahaminya tanpa kesulitan.

Pada artikel ini saya telah memilih topik dan disebut tweed. Anda dapat mengunduhnya.

Ini adalah tampilannya dalam versi kecil di situs web

Pertama, buat dokumen baru di program

Dan sebelum mengeditnya, pastikan untuk menyimpannya dengan nama, misalnya indeks.html dan membuat folder di komputer, misalnya Anda dapat membuat folder “Situs saya” dan meletakkan file indeks kita (index.html) di dalamnya. Sebaiknya buat folder dalam bahasa Inggris agar browser tidak bingung dan menampilkan situs secara tidak benar.

Selain itu, di folder utama "situs saya" Anda perlu membuat dua subfolder lagi, di satu folder kami akan menempatkan semua gambar kami dan itu akan disebut "gambar", dan yang lainnya kami akan memberi nama "CSS" (gaya berjenjang lembar) dan letakkan file di sana gaya.css

Sekarang kita dapat mengerjakan dokumen kita. Langkah selanjutnya adalah memasukkan kode HTML kosong, yang disebut kerangka utama tempat semuanya dimulai. Anda dapat mendownloadnya secara langsung. Selanjutnya, kami akan menyalin semuanya dari file ini dan mentransfernya ke file program kami. Hasil akhirnya akan seperti berikut

Di sebelah nama file Anda akan melihat floppy disk berwarna merah. Jadi jika berwarna merah berarti file belum disimpan, pastikan untuk mengklik tombol simpan agar disket berubah menjadi biru.

Pada tag judul Anda dapat mengubah judul dokumen, misalnya Anda dapat menjadikannya “Halaman web pertama saya”. Dan pastikan halaman Anda disimpan dalam pengkodean UTF-8

Sebaliknya, jika ada pengkodean yang berbeda, misalnya windows-1251, maka teks dokumen di browser akan ditampilkan dalam hieroglif. Anda dapat mengubah pengkodean di bagian “Encodings – Encode in Utf-8 (tanpa BOM)” pada toolbar program.

Dan jangan lupa untuk menyimpan setiap tindakan yang kita lakukan.

Sekarang mari kita mulai membuat latar belakang di dokumen kita. Saya akan segera mengatakan bahwa semua tindakan kita pada desain halaman web akan dilakukan menggunakan cascading style sheet yang disebut CSS, yaitu, kita akan membuat bingkai dalam html, dan kita akan membawanya ke gaya dan tampilan yang indah menggunakan CSS.

Dengan cara ini Anda akan membiasakan diri dengan urutan tindakan yang benar. Anda tidak boleh menangani gaya secara langsung di dokumen html; lebih baik meletakkannya di dokumen terpisah.

Untuk melakukan ini, di program Notepad++ kami, kami akan membuat file lain dan menamainya Style.css dan menyimpannya di folder css baru, yang akan ditempatkan di folder bersama “Situs saya”

Besar! Agar browser kita dapat menampilkan halaman dengan benar, kita perlu menghubungkan style sheet ke dokumen html kita. Begini cara melakukannya

Kita langsung masuk ke seluruh baris di atas. Dengan garis ini kita menghubungkan style sheet kita.
Sekarang kita akan menentukan gambar latar belakang untuk tag tubuh kita melalui style sheet. Untuk melakukan ini, kita membuat struktur berikut di dokumen style.css (ambil saja dan tulis di kode program)

Mari saya jelaskan sedikit di sini. Atribut background memiliki banyak nilai, salah satunya adalah background-repeat, yang bertanggung jawab untuk meregangkan gambar latar belakang kita untuk dokumen web.

LATAR BELAKANG-ULANG:

REPEAT //(meregangkan secara horizontal dan vertikal) REPEAT-X // (meregangkan secara horizontal saja) REPEAT-Y //(meregangkan secara vertikal saja) NO-REPEAT //(jangan mengulang gambar latar belakang)

Dalam kasus kami, kami mereplikasi gambar kecil kami secara vertikal dan horizontal. Hasilnya, seluruh halaman terisi dengan gambar kita. Ini tampilannya di browser:

Saya juga telah membuat pilihan situs khusus untuk Anda di mana Anda dapat mengunduh latar belakang yang indah untuk situs tersebut

Dalam html, latar belakang situs tidak ditentukan; ini ditulis menggunakan gaya CSS, tetapi ini hanya formalitas teoretis. Sekarang mari kita cari tahu cara menentukan latar belakang ini.

Latar belakang untuk situs web atau blok terpisah

Karena kita memerlukan file css untuk mencapai tujuan ini, kita perlu membuatnya dan menghubungkannya ke html. Ini tertulis di. Setelah ini Anda bisa mulai bekerja. Pertama, Anda perlu memutuskan ingin mengatur latar belakang apa. Jika seluruh halaman secara keseluruhan, maka Anda dapat melakukannya seperti ini:

Tubuh (warna latar: putih; )

Artinya, kita mengakses tag body, yang mewakili keseluruhan halaman kita. Untuk mengatur warna latar belakang, gunakan properti background-color. Namun bagaimana jika Anda perlu mengatur latar belakang ke dalam pola, bukan warna solid? Maka Anda harus menulisnya seperti ini:

Isi( gambar latar: url(jalur ke gambar. ekstensi gambar) )

Untuk kejelasan, saya mengusulkan untuk mempertimbangkan semuanya secara lebih rinci menggunakan sebuah contoh. Untuk ini saya akan menggunakan gambar ini:

Misalnya, gambar latar: url(comp.png) . Dalam contoh ini, kami telah menetapkan gambar latar belakang bernama comp (begitulah saya menyebutnya) dalam format png, yang terletak di folder yang sama dengan file css.
Dalam html saya akan membuat blok khusus dengan dimensi tertentu untuk mendemonstrasikan pengoperasian properti CSS.

Dan inilah gaya untuk itu:

#ct( gambar latar: url(comp.png); lebar: 600px; tinggi: 400px; )

Inilah yang kami dapatkan:

Mengapa demikian? Faktanya adalah bahwa secara default browser mengulangi gambar tersebut berkali-kali hingga blok terisi penuh. Terkadang hal ini diperlukan, misalnya saat menggunakan pola mulus, namun dalam kasus kita harus ada satu gambar. Untungnya, hal ini dapat dikelola dengan sangat mudah.

Ulangi latar belakang

Jika Anda memiliki gambar sebagai latar belakang, maka secara default gambar tersebut akan diulang secara horizontal dan vertikal untuk memenuhi seluruh ruang halaman. Untuk menghapusnya, gunakan properti background-repeat dan nilai no-repeatnya. Ada juga nilai-nilai berikut:

• Ulangi-x – ulangi hanya secara horizontal
• Ulangi-y – hanya vertikal

Mari tambahkan properti latar belakang grafis kita:

Pengulangan latar belakang: tidak ada pengulangan;

Posisi

Properti background-position menentukan lokasi dimana gambar akan ditempatkan. Dua nilai ditentukan di sini – secara horizontal dan vertikal. Contoh: posisi latar belakang: kanan bawah – posisi di sudut kanan bawah, kiri atas – di sudut atas bawah (dan seterusnya secara default), 250px 500px – offset dari sudut kiri atas ke kanan sebesar 250 piksel dan turun sebesar 500.

Mari kita lihat contohnya dengan lebih baik:

Posisi latar belakang: kanan atas;

Gambar akan berpindah ke tepi kanan atas. Saya juga memberi blok itu latar belakang kuning sehingga ujung-ujungnya bisa terlihat.

posisi latar belakang: 50% 50%;

Gambar itu tampak persis di tengah bloknya. Ya, ya, hal ini juga dimungkinkan berkat pencatatan persentase posisi.

posisi latar belakang: 70% 20%;

Latar belakang digeser sebesar 70% secara horizontal dan 20% secara vertikal.

Juga diperbolehkan untuk menentukan nilai posisi negatif dalam piksel. Hal ini dapat dilakukan, misalnya, ketika Anda menggunakan gambar sprite besar dan Anda perlu memasukkan bagian sprite yang diperlukan ke dalam blok.

Kunci latar belakang

Saya juga sangat menyukai satu properti bernama background-attachment . Ini hanya memiliki dua nilai dan yang pertama adalah default (gulir). Artinya saat Anda menggulir halaman, latar belakang juga akan bergulir, dan jika Anda menggunakan gambar tanpa pengulangan, pada akhirnya gambar tersebut akan habis dan hanya menjadi warna solid.

Untuk mencegah hal ini terjadi, background-attachment: fixed telah ditentukan dan sekarang latar belakang kita telah diperbaiki dengan aman di tempatnya. Hal ini dapat dibandingkan dengan cara menentukan posisi tetap untuk sebuah blok agar tidak hilang dari halaman saat digulir.

Versi singkat dari semua kebaikan ini

Kami telah membahas banyak properti yang memungkinkan Anda membuat latar belakang, tetapi jika Anda menerapkan semuanya, Anda akan mendapatkan rekaman yang rumit. Ada solusi yang sangat elegan. Properti background memungkinkan Anda menulis pengaturan yang diperlukan dengan dipisahkan oleh spasi dalam urutan berikut:
Latar Belakang: posisi pin ulangi gambar berwarna;
Dan sekarang semuanya bisa ditulis seperti ini:

Latar Belakang: url kuning(comp.png) tanpa pengulangan 20% 100px;

Jika beberapa properti tidak perlu didefinisikan, maka properti tersebut dihilangkan begitu saja (dalam kasus kami, kami tidak menulis lampiran latar belakang).

Banyak latar belakang

Bagaimana jika Anda memerlukan beberapa gambar latar belakang? Itu terjadi, apa yang dapat Anda lakukan? Saat ini CSS mendukung fitur ini. Mari kita mencobanya juga. Mari kita ambil ikon ini

Saya menyebutnya laptop.

Dan berikut kode untuk memasukkan multiphone:

Latar Belakang: url(comp.png) tanpa pengulangan 20% 100px, url(laptop.png) tanpa pengulangan 50% 50%; warna latar: kuning;

Seperti yang Anda lihat, Anda hanya perlu memberi koma setelah gambar pertama dan memasukkan pengaturan untuk gambar kedua. Dalam hal ini, lebih baik mengatur warna solid secara terpisah.

Dengan cara yang sama, Anda dapat merekam gambar sebanyak yang Anda suka, namun jangan berlebihan - terlalu banyak gambar tidak terlalu bagus.

Di sinilah saya ingin mengakhiri artikel ini. Anda dapat melakukan banyak hal menarik lainnya dengan latar belakang, saya akan mencoba menulisnya di masa depan (dan saya sudah menulis sesuatu - misalnya).