css streç arka plan resmi. CSS ile arka planı tam genişliğe uzatın. CSS arka plan uzatma çözümünün işe yarayacağı yer

Bu öğreticiyi bir youtube kanalında buldum. Bence bir web tasarımcısı için çok faydalı bir özellik.

Bazen orijinal görüntünün genişliği herhangi bir tasarım fikri için yeterli değildir ve onu genişlikte germek istenen nesneleri bozar. Bir görüntünün arka planını gererken bu nesneleri sağlam tutmak için PhotoShop bize belirli araçlar sağlar. Ve sonunda, orijinal görüntüden elde ettik:

Şu şekilde ortaya çıkmalı:

Başlayalım. Resmimizi PhotoShop'ta açın ve ihtiyacımız olan nesneyi seçin:

Ardından, sekmeye gidin Seçim >> Seçimi Kaydet

Ve bu seçim için rastgele bir isim belirledik:

Böylece daha sonra değişikliklerden korunacak bir alan oluşturduk. Bir sonraki adım gitmek için Düzenleme >> İçeriğe Duyarlı Ölçek:

Ve korunan nesneyi belirttiğinizden emin olun:

Herşey. Yalnızca standart araçları kullanarak görüntünün genişliğini değiştirmek için kalır (ya üst panelde genişlik yüzdesini değiştirerek veya yalnızca görüntüyü sürükleyerek). Önemli bundan önce (veya en ilk aşamada) tuvali yeniden boyutlandırın, böylece görüntünün sınırları, kapsamının ötesine geçmez.

Web teknolojileri ve çeşitli tasarım trendleri sabit durmaz, bu nedenle siteler için her zaman bazı orijinal özellikler ve nüanslar ortaya çıkar. Bu "yönlerden" biri, ekranı genişlik ve yükseklik olarak dolduracak şekilde uzanan bir arka planın (arka plan) kullanılmasıdır. Yaklaşık bir yıl kadar önce size söylemiştim - resim blog başlığına yerleştirildi ve sorunsuz bir şekilde web sayfasının ana arka plan rengine "geçiş yaptı". Hatta ekleyebilirsiniz.

Ölçeklenebilir büyük bir görüntüyü arka plan olarak yerleştirmek, çözümünü bu makalede bulduğum yeni ve daha zor bir şey.

Bu dersin amacı, siteye tarayıcı penceresinin tüm arka planını kalıcı olarak kaplayacak bir arka plan resmi yerleştirmektir. Tam olarak yapılması gerekenler:

• tüm sayfayı boşluksuz tek bir resimle doldurun;
• gerekirse görüntüyü yeniden boyutlandırma (tarayıcı penceresini küçültme);
• görüntü oranlarını korumak;
• resmin sayfanın ortasına yerleştirilmesi;
• sayfada kaydırma çubuklarının olmaması;
• farklı tarayıcılar için uygun çapraz tarayıcı çözümü;
• Flash gibi herhangi bir üçüncü taraf teknolojisi olmadan uygulama.

Bu nedenle, sitenin arka planı için aynı anda tam ekran olarak birkaç uygun çözüm vardır.

CSS3 ile harika, basit ve ilerici çözüm

Bu görevi gerçekleştirmek için CSS3'te background-size özelliğini kullanabiliriz. Gövdeden daha iyi bir html öğesi kullanacağız. Sabit ve ortalanmış bir arka plan belirleyelim, ardından arka plan boyutu değerini kullanacağız.

html ( arka plan: url(images/bg.jpg) tekrarsız merkez merkezi sabit; -webkit-background-size: kapak; -moz-background-size: kapak; -o-background-size: kapak; arka plan boyutu: örtmek;)

Çözüm, ağdaki hemen hemen tüm popülerler tarafından desteklenmektedir:

• Firefox 3.6+ (Firefox 4, satıcı olmayan önekli sürümü destekler)
• Opera 10+ (Opera 9.5, arka plan boyutunu destekler ancak kapak değeri yoktur)
• Chrome Ne olursa olsun+
• IE9+
• Safari 3+

Belli bir Goltzman, hack'in IE'de çalışmasına izin veren bir çözüm buldu

filtre: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=".myBackground.jpg", boyutlandırmaMethod="ölçek"); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src="myBackground.jpg", boyutlandırmaMethod="ölçek"";

Ama dikkat!!! bu, sayfadaki bağlantıların çalışmasında bazı sorunlara neden olabilir. Bu arada, biraz sonra Matt Litherland, kodun prensipte kullanılabileceğini, ancak bunun için html veya gövde öğelerini kullanamayacağınızı, ancak her şeyi %100 yükseklik ve genişlikte bir div aracılığıyla uygulamanız gerektiğini ekledi.

css- 1 numaralı hack

Alternatif bir versiyon Doug Neiner tarafından sunulmaktadır. Bu durumda, sayfaya gömülü olan öğe kullanılır. , herhangi bir tarayıcıda yeniden boyutlandırılabilir. Tarayıcı penceresini dikey olarak doldurmaya teşvik eden bir minimum yükseklik değeri ve sayfayı yatay olarak dolduracak şekilde genişliği %100 olarak ayarlayın. Ayrıca minimum genişliği, görüntünün asla gerçekte olduğundan daha küçük olmaması için ayarladık.

img.bg ( /* Arka planı doldurmak için kuralları ayarla */ min-height: %100; min-width: 1024px; /* Orantılı ölçeklemeyi ayarla */ width: 100%; height: auto; /* Konumlandırmayı ayarla */ konum: sabit; üst: 0; sol: 0; ) @medya ekranı ve (maksimum genişlik: 1024 piksel) ( /* Bu özel görüntüye özel */ img.bg ( sol: %50; kenar boşluğu: -512 piksel; /* %50 */ ) )

Yüksek kaliteli tarayıcıların herhangi bir sürümünde çalışır - Safari / Opera / Firefox ve Chrome. IE için her zaman olduğu gibi bazı nüanslar var:

• IE 9 - çalışır;
• IE 7/8 - çoğu zaman düzgün çalışır, ancak tarayıcı penceresinden daha küçük görüntüleri ortalamaz;
• IE 6 - özelleştirilebilir, ancak bu tarayıcıya kimin ihtiyacı var.

css- hack seçeneği 2

Sorunu CSS stillerini kullanarak çözmenin başka bir yolu, sayfaya sol üst köşede sabit bir konuma sahip satır içi bir görüntü yerleştirmek ve ardından oranları koruyarak minimum genişlik ve minimum yüksekliği %100'e ayarlamaktır.

#bg ( konum:sabit; üst: %50; sol: %50; genişlik: %200; yükseklik: %200; ) #bg img ( konum:mutlak; üst:0; sol:0; sağ:0; alt:0; kenar boşluğu:oto; min-genişlik:50%; min-yükseklik:50%; )

Hack şu durumlarda çalışır:

• Safari / Chrome / Firefox (çok eski sürümler test edilmedi, ancak son sürümlerde iyi çalışıyor)
• IE8+
• Opera (herhangi bir sürüm) ve IE ile birlikte her ikisi de aynı şekilde bir konumlandırma hatasıyla hatalıdır.

jQuery ile yöntem

Resmin en boy oranının (arka plan olarak img kullanılır) tarayıcı penceresinin mevcut en boy oranından daha büyük veya daha küçük olduğunu biliyorsak, bu seçenek (CSS açısından) çok daha kolaydır. Daha az ise, yalnızca genişlik = %100 kullanabiliriz ve aynı zamanda pencere genişlik ve yükseklik açısından eşit olarak doldurulur. Daha fazlaysa, tüm pencereyi doldurmak için yalnızca yükseklik = %100 belirtebilirsiniz.

Tüm verilere JavaScript üzerinden erişilir, kullanılan kodlar aşağıdaki gibidir:

#bg ( konum: sabit; üst: 0; sol: 0; ) .bgwidth ( genişlik: %100; ) .bghight ( yükseklik: %100; )

$(window).load(function() ( var theWindow = $(window), $bg = $("#bg"), enspectRatio = $bg.width() / $bg.height(); function resizeBg() ( if ((theWindow.width() / theWindow.height())< aspectRatio) { $bg .removeClass() .addClass("bgheight"); } else { $bg .removeClass() .addClass("bgwidth"); } } theWindow.resize(function() { resizeBg(); }).trigger("resize"); });

Bence bu durumda merkezleme yapılmaz (anladığım kadarıyla) ama yapılabilir. IE7+ dahil çoğu masaüstü tarayıcı desteklenir. Son olarak, hack'lerle ilgili makalenin yazarı, tüm bunların uygulandığı bir dizi örnek dosya hazırladı - indirebilirsiniz. Orijinal makaleye yapılan yorumlar da bazı bilgiler ve tartışmalar içeriyor, ancak yazar önemli ayrıntıların çoğunu gönderiye güncellemeler şeklinde ekledi ve ben de tercüme ettirdim ve belirttim. Tabii ki, örnekler tüm bunları anlamaya yardımcı olacaktır. Genel olarak, IE7'deki sürekli "gaglar" olmasaydı, bahsedilen tüm hackler mükemmel olurdu.

not Kitap almak ister misin? - mağazaya gitmek gerekli değildir, çünkü artık çevrimiçi çevrimiçi kitapçı, ağ üzerinden her şeyi yapmanıza izin verir - eve teslimatı seçin, ödeyin ve düzenleyin.

Selamlar. Bu yazıda, sadece HTML + CSS kullanarak (JS olmadan) bir resmi tüm sayfanın arka planı olarak yerleştirmenin üç yolundan bahsetmek istiyorum.

Bu nedenle, arka plan resmi için aşağıdaki gereksinimlerimiz var:

• Sayfa genişliğinin ve yüksekliğinin %100'ünü kaplar
• Arka plan gerektiği gibi ölçeklenir (arka plan, ekran boyutuna göre uzar veya küçülür)
• Resmin oranları korunur (en boy oranı)
• Resim sayfada ortalanmış
• Arka plan kaymıyor
• Çözüm, maksimum düzeyde tarayıcılar arasıdır
• CSS dışında hiçbir teknoloji kullanılmaz

Yöntem 1

Bence en iyi yol bu, çünkü en basit, özlü ve modern. HTML etiketine uyguladığımız CSS3 background-size özelliğini kullanır. html , body değil , çünkü yüksekliği tarayıcı penceresinin yüksekliğinden büyük veya ona eşit.

Sabit ve ortalanmış bir arka plan ayarlayın, ardından arka plan boyutu: kapak kullanarak boyutunu ayarlayın.

Html ( arka plan resmi: url(images/background.jpg); arka plan tekrarı: tekrar yok; arka plan konumu: merkez merkez; arka plan eki: sabit; -webkit-background-size: kapak; -moz-background- boyut: kapak; -o-arka plan boyutu: kapak; arka plan boyutu: kapak; )

Bu yöntem çalışır

Chrome (herhangi bir sürüm) Opera 10+ Firefox 3.6+ Safari 3+ IE 9+

Görsellerin hızlı yüklenmesi için sitelerinizi yalnızca güvenilir barındırma sağlayıcılarıyla barındırın, örneğin Kullanıcılar ve arama motorları hızlı siteleri sever.

Yöntem 2

Pencere genişliği görüntü genişliğinden azsa, arka planı ortalamak için bir medya sorgusu kullanılır.

img.background ( min-yükseklik: %100; min-genişlik: 640 piksel; genişlik: %100; yükseklik: otomatik; konum: sabit; üst: 0; sol: 0; /* Görüntü boyutuna bağlıdır */ @medya ekranı ve (maksimum genişlik: 640 piksel)( img.bg ( sol: %50; kenar boşluğu: -320 piksel; ) )

Bu yöntem şurada çalışır:

• İyi tarayıcıların herhangi bir sürümü (Chrome, Opera, Firefox, Safari)
• IE9+

Yöntem 3

Başka bir yol da görüntüyü düzeltmektir. sayfanın sol üst köşesine getirin ve en boy oranını korurken min-width ve min-height 100% özelliklerini kullanarak uzatın.

Doğru, bu yaklaşımla resim ortalanmadı. Ancak bu sorun, görüntünün içine sarılmasıyla çözülür.

, pencerenin 2 katı büyüklüğünde yapıyoruz. Ve görüntünün kendisini uzatır ve merkeze yerleştiririz.

div.background ( konum: sabit; üst: -%50; sol: -%50; genişlik: %200; yükseklik: %200; ) img (konum: mutlak; üst: 0; sol: 0; sağ: 0; alt : 0; kenar boşluğu: otomatik; minimum genişlik: %50; minimum yükseklik: %50; )

Bu yöntem iyi tarayıcılarda ve IE 8+ ile çalışır.

Umarım bu bilgiler sizin için faydalı olacaktır. Şahsen ben bu yöntemleri, özellikle ilkini sıklıkla kullanırım. CSS kullanarak arka plana bir resim koymanın muhtemelen başka yolları da vardır. Onlar hakkında bilginiz varsa, lütfen yorumlarda paylaşın.

İyi günler, site kurma meraklıları ve web severler. Bugün sadece yeni başlayanlar tarafından değil, bazen geliştiriciler tarafından da sıkça sorulan bir soruya cevap vermek istiyorum: “Bir css görüntüsünü tam ekrana nasıl genişletebilirim?” Aslında bu tekniği uygulamak çok kolay ama burada mesele farklı.

Bugüne kadar, görüntünün tüm ekrana yerleştirilebileceği birçok yol ve programlama dili vardır. Bu nedenle, bu yazıda css, css3, jquery ve php kullanarak tam boyutlu bir arka plan görüntüsü oluşturmanın birkaç yolundan bahsedeceğim. Hadi işe başlayalım!

Yöntem 1. CSS araçlarını kullanarak uyarlanabilir arka plan görüntüsü

Bir arka plan görüntüsünü duyarlı hale getirmek için, Basamaklı Stil Sayfaları şu özelliği sağlar: arka fon-boyut. Açık sekmenin boyutlarına göre grafik dosyasının boyutunu ayarlamanıza olanak tanır.

Bunu yapmak için aşağıdaki satırı yazmanız yeterlidir:

arka fon-boyut: 100%Oto

İlk parametre, yani. % 100, görüntünün yatay olarak gerilmesinden sorumludur, ikinci parametre - dikey olarak. Şimdi bir örneğe geçelim.

Bu yöntem, Safari sürüm 10, sürüm 3, Firefox 3.6 ve IE sürüm 9 ile başlayan tarayıcılar tarafından desteklenir.

Yöntem 2. css3 ile kauçuk arka plan

Css3 spesifikasyonunun dünyaya yayılmasıyla birlikte, dile birçok kullanışlı araç eklendi. Bu nedenle, bir görüntü olarak uzatılmış bir arka plan oluşturmak için, önceki bölümdekiyle aynı özellik kullanılır, ancak görüntünün boyutu yüzdelere göre değil, özel kelime kapağına göre belirlenir: arka fon-boyut:örtmek. Çok uygun, değil mi?

Bu özelliğin nasıl çalıştığını görmek için, arka plan boyutunu %100 ve otomatik olarak değiştirerek önceki örneği çalıştırın. örtmek.

jQuery'nin kendisi çok kullanışlıdır. API ile çalışmak daha kolaydır, kodun çeşitli öğelerine erişmek daha kolaydır ve ayrıca bazı şeyleri uygulamak daha kolaydır.

Bu yöntemin örnekte çalışması için önce js betiğini şu satıra bağlamanız gerekir:

Aşağıda, içine zaten yerleştirilmiş jQuery uygulamasıyla örnek kodu ekledim.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56

Açık alanda planetaryum! Uzak yıldızları, gezegenleri ve ay kraterlerini keşfedin...

Açık alanda planetaryum!

Uzak yıldızları, gezegenleri ve ay kraterlerini keşfedin...

Bu yöntem evrenseldir ve css araçları çalışmadığında bile birçok tarayıcı tarafından desteklenir.

Yöntem 4. Tam ekrana uzatılmış bir görüntünün Php uygulaması

Dilin kendisi hakkında birkaç söz. Php genellikle bir betik dili olarak adlandırılır. Onun yardımıyla web uygulamalarının sunucu kısmını yani sunucu kısmını yazarlar. hizmeti veritabanına bağlama, istekleri işleme vb. Php kodunun kendisi html'ye gömülüdür ve onunla esnek bir şekilde etkileşime girer.

Bir kod parçası eklemek için metni şu parantezler içine yazmanız gerekir:

Şimdi, orijinal örnekte sadece birkaç satır eklemeniz gerekiyor:

1 2 3 4 5

Burada mümkün olduğunca ayrıntılı olarak analiz edeceğiz. tüm çalışma alanını kapsaması gereken İnternet kaynağının arka planını (arka planını) nasıl uygulayabilirim. Temelde her şey yapılır CSS3, jQuery ve hatta PHP'yi de dahil edebilirsiniz, ancak saf CSS'de olan bir seçeneği düşünün. İlk önce ne olması gerektiğini anlamanız veya belirlemeniz gerekir. Bu, elbette, boşluk olmaması için pencerenin bir arka plan veya görüntü ile tam teşekküllü bir şekilde doldurulmasıdır.

Resmi doğru görünecek şekilde uzatacağımız yer, çünkü arka plan bir renk gölgesinin altına girerse, onunla çalışmak daha kolaydır. Resmi oranlarıyla eşleştirmeyi unutmayın. Ve kesinlikle görüntünün merkezde olduğu ortaya çıkmalı. En önemlisi, her şey mümkün olduğunca çapraz tarayıcı olmalı ve elbette çeşitli sahtekarlıklar olmadan olmalıdır. flaş.

CSS3 arka plan yöntemi

Bu, arka planı temiz bir şekilde uzatabilen en yaygın yöntemdir. css ve hepsi adı verilen bir özellik sayesinde arka plan boyutu , yalnızca CSS3'te bulunacak.

Burada başlangıçta sabit bir arka plan oluşturacağız ve onu merkeze yerleştireceğiz, böylece geriye kalan tek şey onu germek, arka plan boyutu özelliklerini bağladığımız yerde, bunların hepsi arka plan bağlantısının altına giriyor.

Genel olarak, stilleri atadığımız blok tarafından yönlendiriliriz ve stil dosyasındaki bu bloğa aşağıdaki kodu ekleriz:

gövde(
arka plan: url(http://website/Aben/ABGDA/artunsa.png) tekrarsız merkez üst sabit;
-webkit-background-size: kapak;
-moz-back-size: kapak;
-o-arka plan boyutu: kapak;
arka plan boyutu: kapak;
}

Gördüğünüz gibi, parametre arka fon, burada başlangıçta resmin yolunu ekliyoruz, burada görüntünün konumu ekran penceresiyle eşleşecek şekilde ayarlanıyor. Demonte edilirse, değer merkez ve üst merkezden sorumludur ve boşluk kalmayacak şekilde her tarafa bastırır. Açık olmak gerekirse, anlamı sabit- Sabitleme işlevinden sorumludur.

Yöntem oldukça sıradan, her zaman kullandığım ve bana yüzde 100 uyuyor.

Diğer yol :

Bir başka yaygın yöntem, muhtemelen sayfaya bir resim eklemektir. Sabit bir konuma sahip olacak ve sol üst köşeye yerleştirilecektir. Ona minimum genişlik ve minimum yükseklik %100 vereceğiz. Tarafların orantılı olması amacıyla önceden bir resim hazırlamak da gereklidir.

#İnternet sitesi (
konum:sabit;
üst:0;
sol:0;
minimum genişlik: %100;
min-yükseklik: %100;
}

Burada gördüğünüz gibi bu kod arka plan görüntüsünü merkezlemiyor, her şeyi ihtiyacınız kadar hızlı bir şekilde yapabilirsiniz, daha doğrusu görüntüyü bir div içine alarak düzeltebilirsiniz.

.jpg" alt="">

css

#İnternet sitesi (
konum:sabit;
üst:-50%;
sol:-50%
genişlik: %200;
yükseklik: %200;
}
#site görseli (
konum:mutlak;
üst:0;
sol:0;
sağ:0;
alt:0;
kenar boşluğu:otomatik;
minimum genişlik: %50;
min-yükseklik: %50;
}

Hepsi bu, burada tüm yöntemler sunulmuyor, ancak daha fazla değişenler.

Ayrıca CSS kullanarak arka planın nasıl tam ekrana genişletileceğinin açık bir şekilde açıklandığı kısa bir video.

PS- Kendi geliştirmeleriniz varsa, burada her şey aynı olsa da. o zaman lütfen yorumlarda onlarla paylaşın.