Cara membuat latar belakang gambar dalam HTML dan CSS. 3 cara sederhana

Menetapkan warna rencana belakang dari palet. Warna pewaris selalu bertepatan dengan warna elemen leluhur.
Salam pembuka. Dalam artikel ini, saya ingin menceritakan tentang tiga cara untuk menempatkan gambar sebagai latar belakang seluruh halaman hanya menggunakan HTML + CSS (tanpa menggunakan JS).

Salam pembuka. Dalam artikel ini, saya ingin menceritakan tentang tiga cara untuk menempatkan gambar sebagai latar belakang seluruh halaman hanya menggunakan HTML + CSS (tanpa menggunakan JS).

Jadi, persyaratan untuk gambar latar belakang kita adalah sebagai berikut:

  • Lebar 100% dan halaman tinggi tertutup
  • Timbangan latar belakang jika perlu (latar belakang diregangkan atau dikompresi tergantung pada ukuran layar)
  • Rekatkan proporsi gambar (rasio aspek)
  • Gambar terpusat pada halaman
  • Latar belakang tidak menyebabkan gulungan
  • Solusinya maksimal CrossBrawser
  • Tidak ada teknologi lain yang digunakan kecuali CSS

Menetapkan warna rencana belakang dari palet. Warna pewaris selalu bertepatan dengan warna elemen leluhur.

Metode 1.

Menurut pendapat saya, ini adalah cara terbaik, karena itu adalah yang paling mudah, ringkas dan modern. Ini menggunakan properti CSS3 Ukuran latar belakang. yang kami lamar ke tag Html. . Persis Html. , tapi tidak Tubuh. karena Tingginya lebih besar atau sama dengan ketinggian jendela browser.

Pasang latar belakang yang tetap dan terpusat, lalu sesuaikan ukurannya menggunakan Ukuran Latar Belakang: Penutup .

Html { 

Latar Belakang-Gambar: URL (Gambar / Background.jpg);

Latar Belakang-REATER: Tidak berulang;

Posisi Latar Belakang: Pusat Pusat;

Latar belakang-lampiran: tetap;

-WebKit-Background-size: cover;

-Moz-Background-size: Tutup;

-O-latar belakang ukuran: penutup;

Ukuran latar belakang: penutup; 
} 

Demo

Metode ini bekerja di

  • Chrome (versi apa saja)
  • Opera 10+.

Firefox 3.6+.

Safari 3+.

Yaitu 9+.

Agar gambar memuat dengan cepat, letakkan situs Anda hanya dari penyedia hosting yang terbukti, misalnya, beget.com 
Pengguna dan mesin pencari menyukai situs cepat. 

Latar Belakang-Gambar: URL (Gambar / Background.jpg);

Metode 2.

Metode ini menyediakan penggunaan elemen IMG, ukurannya akan bervariasi tergantung pada ukuran jendela browser. Untuk meregangkan gambar ke layar penuh, perlu diatur min-tinggi dan lebar dengan nilai 100%. Dan agar gambar tidak dikompres ke ukuran yang lebih kecil dari yang asli, instal lebar min dengan nilai lebar gambar yang sama.

Jika lebar jendela kurang dari lebar gambar, kueri media akan digunakan untuk menyelaraskan latar belakang di tengah.

mewarisi.

<img src = "/ images / latar belakang.jpg" kelas = "latar belakang" />

img.background { Min-Tinggi: 100%; Min-Width: 640px; Lebar: 100%; Tinggi: otomatis;

Posisi: Tetap; TOP: 0; Kiri: 0;

/ * Tergantung pada ukuran gambar * /

Layar @Media dan (lebar maks: 640px) { img.bg { и Kiri: 50%; Margin-Left: -320px; } } } Demo

Mewarisi semua karakteristik elemen induk

Metode ini bekerja di:

Setiap versi browser yang baik (Chrome, Opera, Firefox, Safari) Yaitu 9+. и Metode 3. . Cara lain adalah sebagai berikut: Perbaiki gambar <img /> ke sudut kiri atas halaman dan peregangan menggunakan properti mini-lebar dan min-tinggi 100%, sambil mempertahankan rasio aspek. Benar, dengan pendekatan ini, gambar itu tidak terpusat. Tetapi masalah ini diselesaikan dengan membungkus gambar di <DIV />, yang kami hasilkan 2 kali ukuran jendela. Dan gambar itu sendiri kita meregangkan dan dimasukkan ke tengah. <Div Class = "Latar Belakang"> <img src = "/ images / latar belakang.jpg" />

</ div> Div.Background { <Div Class = "Latar Belakang"> Posisi: Tetap;

TOP: -50%;

Kiri: -50%; } Lebar: 200%; Tinggi: 200%; }

img { Posisi: absolut; TOP: 0;

Kiri: 0; Kanan: 0; :

Bawah: 0;

MARGIN: AUTO; Lebar min: 50%; Min-Tinggi: 50%; } .

Metode ini bekerja di browser yang baik dan IE 8+.

Saya harap informasi ini akan bermanfaat bagi Anda. Secara pribadi, saya sering menggunakan metode ini, terutama yang pertama. Tentunya ada cara lain untuk menempatkan gambar di latar belakang belakang dengan CSS. Jika Anda tahu tentang mereka, bagikan, silakan komentar. Setel warna latar belakang dan / atau gambar untuk halaman atau item terpisah cukup sederhana. Yang utama adalah mengetahui di mana dan bagaimana hal itu dapat dilakukan, serta memiliki kode warna dan / atau gambar latar belakang. Ada kemungkinan bahwa dari artikel ini Anda akan belajar banyak hal baru, tetapi saya membuatnya khusus untuk pemula. Karena itu, semuanya akan sesingkat mungkin dan secara detail secara bersamaan. Yang utama adalah Anda tidak akan menerima tidak hanya presentasi keseluruhan dan contoh-contoh siap pakai, tetapi juga memahami cara membuat latar belakang dalam HTML. Untuk mengatur latar belakang dalam HTML, gunakan doctype perantara Dan saya akan mulai dengan fakta itu Html5. Tidak ada kemungkinan untuk mengatur latar belakang untuk situs. Fitur ini diputuskan untuk bertahan di CSS. Oleh karena itu, jika Anda berencana untuk menggunakan di bawah ini, dan Anda ingin mendapatkan yang valid » (benar) Kode, Anda harus tetap pada jenis transisi dokumen. Untuk melakukan ini, halaman web Anda harus dimulai dengan baris berikut: <! DOCTYPE HTML PUBLIK "- // W3C // DTD HTML 4.01 » Transisional // id "" http://www.w3.org/tr/html4/loose.dtd ">

Waktu untuk kelas praktis

Bagaimana latar belakang di halaman web? (#)Jika Anda mengetahuinya, mari kita mengerti bagaimana latar belakang dibuat. Dan hal pertama di sini harus dicatat - ini adalah perbedaan antara

Warna latar belakang

Latar belakang gambar

. Pada awalnya berjalan

Warna latar belakang Kiri: 50%; yang membanjiri semua ruang halaman yang tersedia atau elemennya. Diulang di atasnya latar belakang gambar. }

. Secara visual, ini dapat digambarkan sebagai berikut: Posisi: absolut; TOP: 0;

Latar belakang dokumen HTML dan elemen-elemennya

Setelah mengecewakan elemen utama dari kontrol latar belakang, serta atribut mereka, lanjutkan langsung ke analisis contoh tertentu. Dalam kode program yang ditunjukkan di bawah ini, saya mencoba mengaktifkan semua elemen yang dijelaskan.

Hal kedua yang perlu Anda ketahui adalah perbedaan antara

tubuh dokumen Kanan: 0; :

elemen dokumen

Tubuh dokumen

ditunjukkan dalam kode HTML dari tag halaman web

Tubuh. yang mencakup semua konten halaman web. Jelas, latar belakang dokumen dokumen tidak dapat transparan. Jika latar belakang tubuh dokumen tidak ditentukan, nilai default yang ditentukan dalam pengaturan browser digunakan. Elemen Halaman ada di dalam tag }

. Perlu dicatat bahwa Anda dapat mengatur gambar warna dan / atau latar belakang menggunakan HTML ke semua elemen dokumen. Misalnya, gambar latar belakang hanya dapat ditentukan untuk tabel. Secara default, mereka biasanya memiliki latar belakang transparan. Posisi: absolut; TOP: 0;

Atribut BGColor untuk membuat warna latar belakang

Untuk bertanya

Dokumen atau elemen-elemennya digunakan atribut Tinggi: 200%; и latar belakang gambar. BGCOLOR. , misalnya: <Body bgcolor = "# ec008c">

<! - Tubuh dokumen ->

</ Body>

Dalam hal ini, kami mengatur warna latar belakang untuk halaman secara keseluruhan. Tetapi contoh bagaimana mengatur warna latar belakang untuk tabel, di tag Meja <Table bgcolor = "# ec008c"> <tr> <td> teks dengan latar belakang </ td> </ tr> </ table>

Perlu dicatat bahwa warna latar belakang dalam tabel juga dapat ditentukan untuk baris dalam tag

Tr. Dan untuk sel mereka di tag TD.

Bagaimana cara mengetahui kode warna? Anda mungkin telah memperhatikan bahwa warna dalam HTML diatur ke spesial kode Html. , misalnya:

# Ec008c.

  • . Untuk mengetahui kode yang Anda butuhkan warna, Anda dapat menggunakan salah satu editor grafis. Misalnya, di Photoshop yang dapat Anda gunakan "
  • Alat pipet.
  • (Pipet)

Untuk mendapatkan warna dari titik pada gambar. Kemudian, Anda perlu mengklik warna yang dihasilkan pada bilah alat dan di jendela yang terbuka "

Pemilih warna. (Pemilihan warna) Salin kode warna. Saya menarik perhatian Anda pada kenyataan bahwa kode ini akan tanpa tanda kisi Pada awalnya, tanda ini perlu ditambahkan secara manual.

Anda juga dapat menggunakan banyak layanan online, misalnya: 
Prinsip kerja mereka bahkan lebih mudah - klik warna yang diinginkan dan dapatkan kode. Atribut latar belakang untuk membuat gambar latar belakang Serta dalam kasus warna latar belakang dan dalam kasus
Anda perlu menggunakan atribut khusus, yaitu 
Latar Belakang. 
<body latar belakang = "/ 2014/06 / bg.jpg">

В Html. Dalam hal ini, kami menanyakan gambar latar belakang untuk halaman secara keseluruhan. Perlu dicatat bahwa karena keterbatasan ukuran gambar, itu akan diulang, misalnya: Seperti yang Anda lihat, ketika pengulangan, transisi antara gambar terlihat. Oleh karena itu, gambar-gambar khusus sering digunakan, di mana momen ini diperhitungkan. Tetapi contoh cara mengatur gambar latar belakang untuk meja, dalam tag

<Table Background = "/ 2014/06 / BG.jpg"> <tr> <td> teks dengan latar belakang </ td> </ tr> </ table> Html. Perlu dicatat bahwa gambar latar belakang hanya dapat diatur untuk tabel secara keseluruhan dan / atau sel terpisah. Untuk string itu tidak akan berfungsi. Atribut latar belakang untuk membuat gambar latar belakang .

Jalur absolut dan relatif ke gambar latar belakang (Pemilihan warna) Secara terpisah layak memperhatikan Alamat latar belakang gambar . Dalam hal ini, jalur relatif ke gambar digunakan, I.E. Alamat ini ditunjukkan pada lokasi file gambar ke file halaman web. Opsi ini tidak dapat disebut sangat sukses. Yang terbaik adalah menggunakan jalur absolut ke gambar, I.E.

URL penuhnya <body latar belakang = "/ images / bg.jpg"> .

Dalam hal ini, Anda tidak akan memiliki masalah bersamaan. Untuk lebih lanjut tentang itu, Anda dapat membaca di sini.

Mari kita ringkas 
Menggunakan atribut Secara moral usang, karena untuk validitas kode HTML Anda harus menggunakan transisi DOCTYPE.

. Untuk mengatur warna latar belakang dalam HTML, menggunakan kode khusus yang dapat Anda temukan di editor grafis atau menggunakan layanan online khusus. Gambar latar belakang digandakan di ekor area yang dialokasikan dan terletak di atas warna latar belakang. Untuk menentukan gambar latar belakang, lebih baik menggunakan URL penuhnya. Saya memiliki segalanya tentang ini. Terima kasih atas perhatiannya. Semoga berhasil!

Tautan singkat: http://goo.gl/03tsnz Bagaimana cara membuat latar belakang untuk situs ini? Setiap kamar akan terlihat jauh lebih baik jika lantai naik karpet Persia yang terhormat. Jadi, semakin buruk situs Anda? Mungkin sudah waktunya dan lantainya " set
  • »Istana buatan tangan elegan mahal. Kami akan memahami lebih lanjut tentang cara membuat latar belakang untuk situs ini:
  • Kebetulan desain lama situs sudah datang. Dan saya ingin sesuatu yang baru dan lezat. Dan desain baru akan seperti itu jika Anda memasaknya dengan tangan Anda sendiri.
  • Tetapi untuk mengubah sepenuhnya semua desain sumber daya sendiri - benda itu tidak berterima kasih. Ya, dan tidak semua orang memiliki hal tentang ini. "
  • dipertajam

" tangan. Oleh karena itu, paling mudah untuk menyegarkan templat lama, mengubah warna latar belakang sumber daya atau gambar latar belakangnya.

Ada beberapa cara untuk mengubah latar belakang di situs. Ini menggunakan peluang. 
CSS. atau . Tetapi banyak dari sifat-sifat untuk bekerja dengan latar belakang memiliki nama dan metodologi aplikasi yang sama dalam teknologi web ini.
  • Sebagai latar belakang, Anda dapat menggunakan beberapa item: Warna; ;
  • Gambar latar belakang;
  • Gambar tekstur. Kami akan menangani masing-masing dari mereka secara lebih rinci. Untuk mengatur warna latar belakang belakang untuk situs, properti ini digunakan.

warna latar belakang.

Atribut gaya 

Gaya. . Artinya, untuk mengatur warna dasar untuk halaman web, Anda perlu mendaftarkannya di dalam tag <body>. Sebagai contoh: <Body style = "latar belakang-warna: # 55d52b"> <p> latar belakang situs # 55D52B </ p> </ body>

Selain kode warna heksadesimal, nilainya didukung dalam format kata kunci atau

RGB. 

. Contoh:

<Body style = "latar belakang-warna: RGB (51.255.153)"> <p> latar belakang situs web RGB (23.113,44) </ p> </ body> <Body style = "latar belakang-warna: hijau"> <p> latar belakang situs hijau </ p> </ body> Mengatur warna latar belakang menggunakan kata kunci memiliki sejumlah pembatasan dibandingkan dengan dua cara yang tersisa.

Total 16 kata kunci didukung untuk pengaturan warna. Ini beberapa dari mereka:

Putih, Merah, Biru, Hitam, Kuning lain. Karena itu, untuk mengatur latar belakang situs

Lebih baik menggunakan format heksadesimal atau 

Selain memilih warna, pengaturan lain tersedia. Jika properti. Atur nilai Transparent.

Latar belakang halaman akan menjadi transparan. Nilai ini ditugaskan ke properti ini secara default. Sekarang pertimbangkan kemungkinan bahasa hypertext untuk menginstal pola latar belakang untuk situs tersebut. Dimungkinkan untuk membuatnya menggunakan properti. gambar latar belakang.

Contoh: 

<Body Style = "Background-image: URL (IMG_1809.jpg)"> </ body>

Seperti yang dapat dilihat dari kode, pengikatan gambar terjadi melalui jalur

URL

Diposting dalam tanda kurung. Tetapi tidak semua gambar menjadi begitu besar untuk mengisi seluruh area layar dengan ukurannya. Mari kita lihat bagaimana angka yang lebih kecil akan ditampilkan.

Misalkan kami sedang mengembangkan situs tentang puisi, dan sebagai substrat, Anda perlu menggunakan gambar Pegasus. Kuda bersayap akan mempersamai kebebasan memikirkan penyair yang kreatif!

Kita perlu bahwa gambar ditampilkan di tengah layar sekali. Tapi, sayangnya, browser tidak mengerti keinginan luhur kami. Dan menampilkan gambar yang lebih kecil untuk latar belakang situs sebanyak mungkin area layar dapat mengakomodasi:

Mungkin empat kuda tersenyum dengan sayap penyair akan terlalu banyak untuk inspirasi. Karena itu, melarang kloning Pegasus kita. Lakukan dengan menggunakan properti

Ulangi latar belakang. . Nilai yang mungkin: Ulangi-X - pengulangan gambar latar belakang secara horizontal;

Jadi, kami memfasilitasi tugas untuk mengatur latar belakang belakang dari dua gambar: animasi dan gambar biasa. Dalam hal ini, animasi GIF akan diperbaiki, dan gambar digulir bersama dengan isi halaman.

Ulangi-y - secara vertikal;

Ulangi - pada kedua sumbu;

Tidak berulang - pengulangan dilarang.

Di antara opsi yang tercantum, kami tertarik pada yang terakhir. Sebelum mengubah latar belakang situs, kami menggunakannya dalam kode Anda:

<Body style = "Background-image: URL (3.jpg); Latar Belakang-REATER: tidak-ulangi"> </ body>

Tapi, tentu saja, lebih baik jika Letow kami terletak di tengah layar. Properti

Posisi latar belakang Hanya dimaksudkan untuk memposisikan pola latar belakang pada halaman. Tetapkan koordinat lokasi dengan beberapa cara:
. Artinya, untuk mengatur warna dasar untuk halaman web, Anda perlu mendaftarkannya di dalam tag <body>. Sebagai contoh: Kata kunci (
<body latar belakang = "/ images / bg.jpg"> Atas, bawah, tengah, kiri, kanan)
atau Persentase - hitungan mundur dimulai dari sudut kiri atas;
Setiap kamar akan terlihat jauh lebih baik jika lantai naik karpet Persia yang terhormat. Jadi, semakin buruk situs Anda? Mungkin sudah waktunya dan lantainya " Dalam satuan ukuran (
(Pemilihan warna) Piksel.
). Kami menggunakan opsi termudah untuk memusatkan:

<Body style = "Background-image: URL (3.jpg); Latar Belakang-REATER: Tidak-mengulang; posisi latar belakang: Top pusat"> </ body>

Kebetulan Anda perlu memperbaiki posisi gambar saat bergulir. Karena itu, sebelum membuat gambaran situs, gunakan properti khusus.

latar belakang-lampiran.

. Nilai yang valid: <ul> <li> gulir; </ li> <li> diperbaiki. </ Li> </ ul>

Kami membutuhkan makna terakhir. Sekarang kode contoh kami akan terlihat seperti ini: [/ html] 
<body style = "Background-image: URL (3.jpg); Latar Belakang-REATER: tidak berulang; posisi latar: pusat atas; latar belakang-lampiran: Tetap"> </ body> 

Pada contoh pertama, untuk latar belakang, kami menggunakan lanskap gurun yang besar dan indah. Tetapi untuk keindahan seperti itu Anda harus membayar penuh. Berat gambar yang dilakukan dalam kualitas tinggi dapat mencapai beberapa megabyte.

Volume ini tidak mempengaruhi kecepatan unduhan halaman browser dengan koneksi berkecepatan tinggi dengan Internet. Tetapi bagaimana dengan internet seluler, ketika menggunakan unduhan beberapa "

meter.

"Akan butuh banyak waktu?

"Akan butuh banyak waktu? Semua masalah ini diselesaikan dengan menggunakan latar belakang tekstur. Ini menggunakan gambar kecil sebagai pola tekstur. Bahkan di bawah kondisi ganda pengulangannya, pola dimuat hanya sekali.

Untuk membuat latar belakang gelap untuk situs pergi ke Tubuh. Photoshop. Tubuh. , Buat gambar dalam bentuk strip 1200 piksel panjang, dan lebar 15 piksel. Kemudian kami menggunakan gradien hitam dan putih sederhana dan menghubungkan tekstur yang dihasilkan ke halaman situs:

<Body style = "latar belakang-gambar: URL (1.png); warna: RGB (0,51,204)"> </ body>

Untuk kejelasan, kami menambahkan teks dan mengaturnya menggunakan properti. Tubuh. Warna Tubuh. . Itulah yang terjadi:

  • Tinggi: 200%; Semua properti yang dijelaskan di atas juga berlaku untuk lembar gaya cascading. Buat latar belakang situs
  • latar belakang gambar. CSS.
  • Dengan menulis ulang kode salah satu dari contoh kami sebelumnya: <Head> <title> Dokumen Tanpa Judul </ title> <style Type = "Text / CSS"> Body {Background-Image: URL (3.jpg); Background-Reper: Posisi latar belakang: Top pusat; latar belakang-lampiran: tetap;} </ style> </ head> <body> </ body>
  • Hasilnya akan serupa. Nah, kami melihat semua opsi, cara mengubah latar belakang di situs. Sekarang tetap hanya untuk membuat gambar karpet masa depan dan menyebarkannya di halaman sumber daya Anda. Tapi ini tanganmu.
  • Hari baik untuk semua orang untuk belajar dan mempelajari sesuatu yang baru! Pernahkah Anda memperhatikan penampilan situs ketika mengembangkan pencipta telah malas untuk mengatur latar belakang halaman? Dan aku berbalik. Itu terlihat pembantaian. Seringkali, karena kurangnya pemisahan yang biasa antara berbagai jenis informasi, itu beragam dan menghilang keinginan untuk melihat lebih lanjut sumber daya web semacam itu. Sehingga masalah seperti itu terjadi pada proyek Anda, saya memutuskan untuk menulis artikel tentang topik: "Bagaimana cara membuat latar belakang halaman dalam HTML." Setelah membaca publikasi, Anda akan belajar, dengan alat apa yang dapat Anda atur desain latar belakang, cara membuat latar belakang tetap atau berubah dan banyak lagi, yang akan membantu membuat situs web Anda menarik. Sekarang mari kita mulai!
  • Alat dasar untuk mengatur halaman web latar belakang Untuk mengatur gambar latar belakang, pengembang berbahasa web telah menyediakan latar belakang atribut. Ini tersedia dalam HTML dan CSS.
  • Dalam bahasa markup, ini adalah atribut tag tubuh, dan di tabel gaya - properti universal yang memungkinkan Anda untuk mengatur hingga 5 karakteristik rencana belakang secara bersamaan. Latar belakang adalah elemen yang cukup fleksibel yang dapat digunakan untuk menugaskan latar belakang sebagai warna, gambar warna atau bahkan animasi. Jadi, untuk menginstal gambar latar belakang melalui unit html <body> itu cukup untuk menulis kode seperti itu:
  • <Body latar belakang = "alamat file"> ... </ body> Dan alih-alih kata "Alamat file" masukkan path ke gambar.
  • Namun, perhatikan! Jika dalam bentuk latar belakang Anda ingin melihat kanvas monochon yang ditentukan dari palet warna, maka ini dilakukan dengan menggunakan atribut BGColor. Misalnya, <body bgcolor = "# 000000"> ... </ body>, kami bertanya latar belakang hitam untuk situs kami.
  • Warna dalam CSS dan HTML diatur oleh kata bahasa Inggris (misalnya, merah), atau kode khusus yang terdiri dari tanda # dan enam karakter setelahnya (misalnya, # FFDAB9). Saat mengetikkan opsi kedua dalam produk perangkat lunak khusus untuk pengembang, palet akan secara otomatis muncul di depan Anda. Jika Anda baru mulai mempelajari bahasa web ini, maka kode warna dapat dikepakan di Internet.

Latar belakang sebagai properti di tabel gaya cascading Tinggi: 200%; :

Ini diatur atau dalam file terpisah dengan gaya CSS, atau dalam elemen <Style>. Dengan properti ini, Anda dapat menginstal pola atau warna latar belakang, tentukan lokasi awal pada halaman, atur gambar berulang dan tetap. Untuk kejelasan yang lebih besar, saya membuat definisi di tabel. 

Parameter Tujuan

Digunakan untuk memasang gambar tetap atau bergulir bersama dengan konten situs. Terjadi diperbaiki, gulir dan mewarisi

Setel gambar latar belakang. Ini dapat ditunjukkan secara bersamaan dengan warna. Kemudian yang terakhir akan ditampilkan sampai gambar sepenuhnya dimuat.

Tetapkan lokasi awal objek untuk parameter sebelumnya. Secara horizontal menunjukkan kanan, kiri dan tengah, dan vertikal - bawah, atas dan tengah. Selain itu, Anda dapat mewarisi posisi (mewarisi), diatur dalam persentase, piksel, dan dimensi lainnya 

Terapkan saat menggunakan atribut latar belakang-gambar. Mengatur bagaimana gambar akan diulang. Anda dapat menentukan 2 nilai: untuk horizontal dan vertikal. Ada karakteristik: tidak berulang, ulangi, ulangi-x, ulangi-y, mewarisi, ruang

Добавить комментарий