Saya ingat mengobrak-abrik banyak informasi dan mencoba beberapa metode hingga saya menemukan solusi tepat yang diperlukan saat itu.

Di bawah ini saya akan menunjukkan 3 metode untuk meregangkan latar belakang hingga lebar penuh layar.

Metode pertama menggunakan CSS3 murni. Semuanya berfungsi berkat properti background-size. Dalam kasus saya, saya akan meregangkan gambar ke seluruh lebar layar, yaitu, saya akan menetapkan properti ke tag body. Anda dapat menerapkannya pada blok sesuai kebutuhan, misalnya.

Kami akan merentangkan gambar ini dengan seorang gadis cantik untuk memenuhi seluruh layar :)

Secara umum, kita mendefinisikan sebuah blok yang kita tetapkan gayanya dan menambahkan kode berikut ke file gaya untuk blok ini:

Isi( latar belakang: url(gambar/bg.jpg) bagian tengah atas tanpa pengulangan diperbaiki; -ukuran latar belakang webkit: penutup; -ukuran latar belakang moz: penutup; -o-ukuran latar belakang: penutup; ukuran latar belakang: menutupi)

Seperti yang Anda lihat, di parameter latar belakang kami menambahkan jalur ke gambar dan mengatur posisi gambar relatif terhadap layar. Dalam kasus kami ini adalah pusat dan atas. Artinya gambar akan berada di tengah layar dan bagian atasnya akan menempel di bagian atas layar. Hal ini bertujuan agar wajah gadis itu selalu terlihat. Jika, misalnya, Anda memiliki latar belakang atau alam abstrak, di mana Anda dapat melihat langit, bidang, cakrawala, maka Anda dapat mengatur nilai center dan center. Secara umum, jika Anda sudah familiar dengan CSS, saya rasa Anda akan mengerti. Ini juga disetel ke fixed , yang membekukan gambar.

Caranya sangat sederhana, saya selalu menggunakannya dan 100% cocok untuk saya. Hanya ada satu hal. Browser lama tidak mengenal CSS3, sehingga mereka yang menggunakan versi kuno tidak akan melihat hasil yang diinginkan.

Metode ini menggunakan CSS biasa. Intinya juga sederhana. Kami menampilkan gambar di badan situs dengan menetapkan id - bg :

Dan kami menulis gayanya:

#bg ( posisi:tetap; indeks-z: -1; atas:0; kiri:0; lebar minimum:100%; tinggi minimum:100%; )

Penentuan posisinya tetap dan membentang di seluruh layar. Sesederhana itu :).

jQuery digunakan di sini. Oleh karena itu, Anda harus menghubungkan perpustakaan terlebih dahulu jika belum terhubung sebelumnya.

Setelah perpustakaan, kami menghubungkan skrip, yang akan menskalakan latar belakang kami

$(jendela).beban(fungsi() ( var theWindow = $(jendela), $bg = $("#bg"), aspekRatio = $bg.width() / $bg.height(); fungsi resizeBg() ( jika ((jendela.lebar() / jendela.tinggi())< aspectRatio) { $bg .removeClass() .addClass("bgheight"); } else { $bg .removeClass() .addClass("bgwidth"); } } theWindow.resize(function() { resizeBg(); }).trigger("resize"); });

Dan pada akhirnya kami menambahkan gaya untuk membuat semuanya berfungsi. Buka file gaya dan tambahkan kode berikut ke dalamnya:

#bg ( posisi: tetap; atas: 0; kiri: 0; indeks-z: -1; ) .bgwidth ( lebar: 100%; ) .bgheight ( tinggi: 100%; )

Anda dapat melihat dari gaya yang telah kami tambahkan positioningnya. Dalam hal ini sudah diperbaiki. Gambar akan tetap menjadi latar belakang tetap saat digulir, tetapi jika Anda mengubah posisinya menjadi absolute , latar belakang dapat digulir. Omong-omong, hal yang sama bisa dilakukan dengan dua metode pertama.

Parameternya juga ditentukan - indeks-z: -1, sehingga gambar berada di belakang teks. Jika Anda tidak memiliki teks yang seharusnya berada di depan, Anda dapat menghapus opsi ini.

Metode mana yang akan digunakan terserah Anda. Seperti yang saya tulis di atas, cara pertama lebih dekat dengan saya. Ini adalah yang paling sederhana dan tidak lebih buruk dari yang lain.

Itu saja, terima kasih atas perhatiannya. 🙂

Teknologi web, seperti berbagai macam tren dalam desain, tidak tinggal diam, sehingga setiap kali muncul beberapa fitur dan nuansa orisinal untuk situs web. Salah satu “arah” tersebut adalah penggunaan latar belakang (backgorund), yang membentang di seluruh layar dalam lebar dan tinggi. Sekitar setahun atau lebih yang lalu saya katakan - gambar ditempatkan di header blog dan dengan lancar "ditransisikan" ke warna latar belakang utama halaman web. Jika mau, Anda bahkan dapat menambahkan .

Menempatkan gambar berskala besar sebagai latar belakang adalah sesuatu yang baru dan lebih kompleks, solusinya saya temukan di artikel ini.

Tujuan dari pelajaran ini adalah untuk menempatkan gambar latar belakang di situs yang akan selalu menutupi seluruh latar belakang jendela browser. Apa sebenarnya yang perlu dilakukan:

• isi seluruh halaman dengan satu gambar tanpa spasi;
• mengubah ukuran gambar jika perlu (memperkecil jendela browser);
• menjaga proporsi gambar;
• memposisikan gambar di tengah halaman;
• kurangnya bilah gulir pada halaman;
• solusi lintas-browser yang cocok untuk browser yang berbeda;
• implementasi tanpa teknologi pihak ketiga seperti flash.

Jadi, ada beberapa solusi yang cocok untuk latar belakang situs web layar penuh.

Untuk menyelesaikan tugas ini, kita dapat menggunakan properti background-size di CSS3. Kami akan menggunakan elemen html yang lebih baik dari body. Mari atur latar belakang menjadi tetap dan terpusat, lalu gunakan nilai cover pada ukuran latar belakang.

html ( latar belakang: url(gambar/bg.jpg) pusat pusat tanpa pengulangan diperbaiki; -ukuran latar belakang webkit: sampul; -ukuran latar belakang-moz: sampul; -o-ukuran latar belakang: sampul; ukuran latar belakang: menutupi)

Solusinya didukung oleh hampir semua solusi populer di Internet:

• Firefox 3.6+ (Firefox 4 mendukung versi awalan non-vendor)
• Opera 10+ (Opera 9.5 mendukung ukuran latar belakang tetapi tanpa nilai sampul)
• Chrome Apapun+
• yaitu 9+
• Safari 3+

Goltzman tertentu menemukan solusi yang memungkinkan peretasan berfungsi di IE

-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src="myBackground.jpg", sizingMethod="scale")" ;

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=".myBackground.jpg", sizingMethod="scale"); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src="myBackground.jpg", sizingMethod="scale"");

Peretasan CSS nomor 1 Versi alternatif disajikan oleh Doug Neiner. Dalam hal ini, elemen yang tertanam di halaman digunakan

img.bg ( /* Tetapkan aturan untuk mengisi latar belakang */ tinggi minimum: 100%; lebar minimum: 1024 piksel; /* Atur penskalaan proporsional */ lebar: 100%; tinggi: otomatis; /* Atur posisi */ posisi: tetap atas: 0; kiri: 0; ) @media screen dan (lebar maksimal: 1024px) ( /* Khusus untuk gambar khusus ini */ img.bg ( kiri: 50%; margin-kiri: -512px; / *50% */ ) )

Berfungsi di semua versi browser berkualitas tinggi - Safari/Opera/Firefox dan Chrome. Seperti biasa, IE memiliki nuansa tersendiri:

• YAITU 9 - berfungsi;
• IE 7/8 - paling sering berfungsi dengan benar, tetapi tidak memusatkan gambar yang lebih kecil dari jendela browser;
• IE 6 - dapat dikustomisasi, tetapi siapa yang membutuhkan browser ini.

Pilihan lain untuk menyelesaikan masalah menggunakan gaya CSS adalah dengan menempatkan gambar yang disematkan pada halaman dengan posisi tetap di sudut kiri atas, lalu mengatur lebar minimum dan tinggi minimum menjadi 100% dengan tetap menjaga proporsinya.

#bg ( posisi:tetap; atas:-50%; kiri:-50%; lebar:200%; tinggi:200%; ) #bg img ( posisi:absolute; atas:0; kiri:0; kanan:0; bawah:0; margin:otomatis; lebar minimum:50%; tinggi minimum:50% )

Peretasan berfungsi di:

• Safari / Chrome / Firefox (versi awal tidak diuji, tetapi berfungsi dengan baik di versi terbaru)
• yaitu 8+
• Opera (versi apa pun) dan bersama-sama dengan IE keduanya bermasalah dengan cara yang sama dengan kesalahan pemosisian.

Opsi ini jauh lebih mudah (dari sudut pandang CSS) jika kita mengetahui bahwa rasio aspek gambar (img yang digunakan sebagai latar belakang) lebih besar atau lebih kecil daripada rasio aspek jendela browser saat ini. Jika lebih kecil, maka kita hanya dapat menggunakan lebar = 100% dan jendela akan terisi lebar dan tinggi secara merata. Jika lebih, Anda hanya dapat menentukan tinggi = 100% untuk mengisi seluruh jendela.

Semua data diakses melalui JavaScript, kode yang digunakan adalah sebagai berikut:

#bg ( posisi: tetap; atas: 0; kiri: 0; ) .bgwidth ( lebar: 100%; ) .bgheight ( tinggi: 100%; )

$(jendela).beban(fungsi() ( var theWindow = $(jendela), $bg = $("#bg"), aspekRatio = $bg.width() / $bg.height(); fungsi resizeBg() ( jika ((jendela.lebar() / jendela.tinggi())< aspectRatio) { $bg .removeClass() .addClass("bgheight"); } else { $bg .removeClass() .addClass("bgwidth"); } } theWindow.resize(function() { resizeBg(); }).trigger("resize"); });

Menurut saya, centering tidak dilakukan dalam kasus ini (sejauh yang saya mengerti), tapi bisa dilakukan. Sebagian besar browser desktop didukung, termasuk IE7+. Terakhir, penulis artikel tentang peretasan telah menyiapkan sekumpulan file contoh di mana semua ini diterapkan - Anda dapat mendownloadnya. Komentar pada artikel asli juga berisi beberapa informasi dan diskusi, meskipun penulis menambahkan sebagian besar detail penting dalam bentuk hak ke postingan dan saya juga telah menerjemahkan dan menunjukkannya. Tentu saja, contoh akan membantu Anda memahami semua ini. Secara umum, jika bukan karena “lelucon” terus-menerus dari IE7, semua peretasan yang disebutkan akan ideal.

P.S. Ingin membeli buku? - Anda tidak perlu pergi ke toko karena kini toko buku online memungkinkan Anda melakukan segalanya secara online - memilih, membayar, dan mengatur pengiriman ke rumah.

Selamat Datang di blog saya. Mari terus mempelajari dasar-dasar html. Tutorial ini akan sangat sederhana dan menarik sehingga saya harap Anda ingin mempelajari lebih lanjut tentang bahasa pemrograman. Hanya dalam beberapa menit Anda akan belajar cara menjadikan gambar sebagai latar belakang dalam HTML dan mencapai hasil yang luar biasa.

Saya juga akan membicarakan beberapa nuansa yang akan membuat latar belakang lebih rata dan indah. Baiklah, bisakah kita mulai?

Saya ingin memulai dengan memilih gambar. Sehingga tampilan halaman Anda lebih rata dan cantik, serta tidak perlu repot dengan ukuran dan perataannya. Saya sarankan segera mencari tekstur yang mulus. Apa itu?

Sayangnya, tidak mungkin meregangkan gambar dalam html untuk memenuhi seluruh layar. Foto digunakan dalam ukuran sebenarnya. Jika gambarnya kecil, maka akan menutupi seluruh area, seperti pada gambar di bawah. Untuk meregangkan gambar, Anda harus membuat dokumen CSS tambahan, tanpanya gambar tidak akan berfungsi.

Meskipun demikian, Anda memiliki kesempatan untuk melewati sistem. Untuk melakukan ini, gunakan Photoshop dan gambar hingga lebar layar (1280x720). Meskipun dalam hal ini, ketika digulir ke bawah, gambar akan menggantikan gambar lain.

Pilihan yang jauh lebih baik jika Anda tidak ingin menggunakan css adalah menggunakan tekstur yang mulus. Mereka tidak memiliki sambungan yang terlihat. Mereka seperti wallpaper atau ubin modern dalam desain. Yang satu menggantikan yang lain dan tidak ada sambungan yang terlihat.

Jika Anda tertarik dengan tidak adanya konsekuensi hukum atas penggunaannya, maka saya sarankan mencari di situs web Pixabay.com.

Sekarang mari kita bekerja dengan kodenya. Saya harus segera mencatat bahwa kami sekarang bekerja dengan html, yaitu, kami mengubah gambar bukan untuk keseluruhan situs, tetapi hanya untuk satu halaman tertentu tempat kode tersebut ditulis. Jika Anda tertarik untuk mengubah seluruh sumber daya, maka Anda perlu membuat kode menggunakan css, tetapi akan dibahas lebih lanjut nanti.

Jadi, Anda bisa bekerja di notepad, saya lebih suka NotePad++. Jauh lebih nyaman untuk bekerja di dalamnya: kode telah selesai untuk Anda, tag disorot. Program ini gratis dan beratnya sekitar 3 MB. Saya sangat merekomendasikannya, terutama jika Anda seorang pemula.

Jadi, untuk tagnya tubuh Anda perlu menambahkan atribut latar belakang dan tunjukkan tautan ke gambar dari mana gambar itu akan diambil. Ini adalah apa yang tampak dalam program ini.

Anda cukup membuka notepad dan menyalin kode ini. Dalam tanda kutip, beri tautan ke gambar yang Anda suka.

Gambar latar belakang

Saya ingin mencatat untuk pemula, inilah intinya. Jika Anda mengambil gambar dari Pixabay, maka Anda perlu menempelkan tautannya bukan pada halaman dengan gambar tersebut, tetapi buka gambar tersebut di tab berikutnya.

Salin URL persis ini.

Simpan dokumennya. Jangan lupa jika Anda menggunakan notepad, Anda harus menggunakan file . html. Beri nama saja dokumennya, misalnya, kembali.html. Jika tidak, itu akan disimpan sebagai dokumen teks dan browser tidak akan mengerti apa yang perlu dilakukan.

Selesai, halaman diisi dengan warna berbeda.

Jika Anda ingin mempelajari lebih lanjut tentang html, saya sarankan Anda mengunduh kursus gratis oleh Evgeniy Popov. Dari sini Anda akan mempelajari lebih banyak tag, kemampuan bahasa, mencoba beberapa teknik baru, dan mengetahui lebih banyak.

Saya tidak akan mengatakan bahwa kursus Evgeniy Popov sangat populer. Banyak ahli yang memarahinya, dan jika Anda pernah menemukan pernyataan seperti itu, inilah pendapat saya. Pelajaran-pelajaran ini diberikan secara gratis dan meskipun demikian, mereka melakukan tugas utama mereka dengan sangat baik - untuk menunjukkan dasar-dasar kepada pemula dan memberinya informasi terkini.

Sama seperti setiap penulis memiliki pendapatnya sendiri tentang cara menulis, demikian pula programmer memiliki gayanya sendiri. Anda dapat menghabiskan seluruh hidup Anda untuk mempelajari cara membuat situs web, tetapi Anda harus memulainya dari suatu tempat. Dari buku? Bukan ini. Ya, mereka berisi informasi yang lebih andal, informasi terkini, tetapi sangat sulit untuk dikuasai.

Tidak setuju dengan saya? Saya bisa menawarkan alternatif. Buku oleh Elizabeth dan Erica Freeman Belajar HTML, XHTML dan CSS" Bukan buku terlaris yang terlalu membosankan dan dirilis belum lama ini, pada tahun 2016. Informasinya belum ketinggalan jaman.

Jika Anda ingin latar belakang diulang di semua halaman situs Anda, maka CSS adalah suatu keharusan. Tentu saja, Anda dapat menentukan jalurnya setiap saat, seperti pada bab sebelumnya. Namun bayangkan jika lama kelamaan Anda perlu menggantinya: tautannya menjadi usang atau Anda hanya ingin mengubah desainnya. Buka setiap halaman dan ubah kodenya? Ini tidak akan berhasil seperti itu.

CSS membantu memecahkan masalah ini. Anda perlu membuat file dengan ekstensi css dan memasukkan kode berikut:

isi ( latar belakang: url(jalur file); )

Mari kita bicara sedikit tentang kode itu sendiri. Dalam tanda kurung, setelahnya url Anda dapat memasukkan link ke gambar dari sumber pihak ketiga, atau cukup nama dokumen jika gambar tersebut berada di folder yang sama dengan file ini.

Dengan css Anda dapat melakukan peregangan gambar latar belakang, pastikan tidak terulang kembali, tambahkan animasi GIF dan masih banyak lagi.

Anda tidak bisa menulis semuanya dalam satu artikel. Dan saya tidak menetapkan tugas seperti itu untuk diri saya sendiri. Ada banyak seluk-beluknya, dan jika mereka berjanji untuk memberi tahu Anda semuanya dalam satu artikel, maka ini tidak lebih dari penipuan.

Apakah Anda ingin belajar cara menulis situs web dengan benar? Saya menyarankan Anda belajar bahasa pemrograman. Saya dapat merekomendasikan kursus Andrey Bernatsky “ HTML5 dan CSS3 dari Nol hingga Pro" Saya sangat menyukai penulis ini. Saya tidak mengambil kursus khusus ini; beberapa tahun yang lalu ada yang serupa, tetapi kurang modern.

Penulis berbicara dengan sangat baik, semuanya mudah dan dapat dimengerti. Puncak dari kursus ini adalah Anda tidak hanya belajar, Anda membuat situs web tertentu bersama dengan guru. Hasilnya, Anda akan mendapatkan kartu nama, blog bahkan toko online. Sangat keren. Anda dapat menyaksikan tiga pelajaran teori pertama tentang HTML5 dari kursus ini sekarang juga.

Omong-omong, bersama dengan kursus ini Anda mendapatkan 7 bonus: dasar-dasar html dan css oleh Andrei Bernatsky, tata letak untuk pemula, membuat halaman arahan di malam hari, dan banyak lagi. Sebelum Anda berkomitmen untuk pelatihan serius, cobalah kursus gratis " Berlatih HTML5 dan CSS3».

Yah, pada dasarnya itu saja. Berlangganan buletin untuk mempelajari lebih lanjut. Segera saya akan memberi tahu Anda lebih banyak tentang tata letak adaptif, meningkatkan penghasilan dari blog mana pun, dan memberikan banyak tips berguna untuk menyederhanakan pekerjaan Anda. Sampai jumpa lagi dan semoga sukses dalam usaha Anda.

Halo. Hari ini kita akan melihat bagaimana Anda dapat meregangkan latar belakang menggunakan alat CSS (tanpa campur tangan alat lain, seperti javascript dan sejenisnya).

Menjadi mungkin untuk meregangkan latar belakang CSS menggunakan cara CSS3, khususnya menggunakan properti background-size. Saya harus mengatakan bahwa properti ini bekerja jauh lebih baik daripada solusi serupa dalam Javascript (yang digunakan sebelum munculnya ukuran latar belakang), karena properti ini bereaksi lebih cepat dan lebih memadai terhadap perubahan ukuran browser, menghaluskan gambar yang diregangkan lebih cepat, dan, sebagai mereka suka mengatakan di awal tahun 2000an, x, - “Akan berfungsi bahkan dengan Javascript dinonaktifkan.”

Properti background-size dapat memiliki beberapa nilai.
1) ini bisa menjadi salah satu arahan: menutupi atau mengandung.

Ukuran latar belakang: berisi; /* Menskalakan gambar sambil mempertahankan proporsi sehingga seluruh gambar pas di dalam blok. */ ukuran latar belakang: sampul; /* Menskalakan gambar sambil mempertahankan rasio aspek sehingga lebar atau tingginya sama dengan lebar atau tinggi blok. */

2) bisa dalam persentase (100% atau 94% dari lebar wadah). Dalam hal ini, Anda dapat menggunakan 1 nilai persentase atau 2. Jika terdapat 2 nilai, maka tinggi dan lebar gambar akan diskalakan secara bersamaan, dan setiap nilai disesuaikan secara proporsional dengan persentase yang ditentukan dalam parameter).

Ukuran latar belakang: 100%; /*Setara dengan arahan sampul*/ ukuran latar belakang: 100% 50%; /*Lebarnya akan 100% dari lebar balok, tetapi tingginya hanya 50%, kemungkinan besar gambar akan berubah bentuk*/

3) nilai numerik langsung (dalam piskel, sentimeter, em, dll.). Bisa juga ada 2 (atau 1) parameter, seperti pada kasus sebelumnya.
4) nilai otomatis. Menandakan bahwa gambar tidak akan diregangkan, namun akan digunakan ukuran aslinya. Dalam hal ini, bisa juga terdapat 2 atau 1 parameter. Artinya, Anda dapat menentukan yang berikut ini:

Ukuran latar belakang: 60% otomatis; /*lebar gambar akan menjadi 60%, dan tingginya akan sebanding dengan ukuran gambar asli*/

Dilihat dari situs Can I Use, ini akan berfungsi di semua browser modern, termasuk IE versi minimal 9. Jadi, pada prinsipnya, tidak ada alasan untuk khawatir. Lihat tabel kompatibilitas:

Saya menemukan tutorial ini di saluran YouTube. Sebuah fitur yang sangat berguna bagi seorang web designer menurut saya.

Terkadang lebar gambar asli tidak cukup untuk ide desain apa pun, dan merentangkannya sepanjang lebar akan mendistorsi objek yang diinginkan. Untuk menjaga objek-objek ini tetap utuh sambil tetap merentangkan latar belakang gambar, PhotoShop memberi kita alat-alat tertentu. Jadi, pada akhirnya kita mendapatkan dari gambar aslinya:

Seharusnya terlihat seperti ini:

Mari kita mulai. Buka gambar kita di PhotoShop dan pilih objek yang kita butuhkan:

Selanjutnya, masuk ke tab Pilihan >> Simpan area yang dipilih

Dan tetapkan beberapa nama arbitrer untuk pilihan ini:

Oleh karena itu, kami telah menciptakan kawasan yang nantinya akan terlindungi dari perubahan. Langkah selanjutnya adalah pergi ke Edit >> Skala Berbasis Konten:

Dan pastikan untuk menunjukkan objek yang dilindungi:

Semua. Yang tersisa hanyalah mengubah lebar gambar menggunakan alat standar (baik di panel atas dengan mengubah persentase lebar, atau cukup menyeret gambar). Penting sebelum ini (atau pada tahap paling awal) untuk mengubah ukuran kanvas agar batas gambar tidak melampaui area visibilitasnya.