Arka planda bir CSS görüntüsünü genişletme ve ölçeklendirme - yalnızca CSS ile

853

Tarayıcı görüntü alanı boyutuna bağlı olarak arka plan resmimin uzamasını ve ölçeklenmesini istiyorum.

Stack Overflow ile işi yapan örneğin Stretch ve scale CSS arka planı gibi bazı sorular gördüm . İyi çalışıyor, ancak backgroundbir imgetiketle değil , görüntüyü kullanarak yerleştirmek istiyorum .

Bu imgetikete bir etiket yerleştirilir ve sonra CSS ile imgetikete haraç ederiz .

width:100%; height:100%;

Çalışıyor, ancak bu soru biraz eski ve CSS 3'te bir arka plan resmini yeniden boyutlandırmanın oldukça iyi çalışacağını söylüyor. İlk önce bu örneği denedim , ama benim için işe yaramadı.

background-imageBeyanname ile bunu yapmak için iyi bir yöntem var mı ?

css  background 
— Fábio Antunes
kaynak
113
arka plan boyutu:% 100% 100;
— Andreas L.
5
Belki bu demo yararlı olabilir: w3schools.com/cssref/…
— Davide
1
— Alex Angas
@AlexAngas Sorunun yaşı bir faktör olmamalı mı? Bu soru 6 yıl önce soruldu ve belirttiğiniz soru 4 yıl önce soruldu.
— Fábio Antunes
@ FábioAntunes IMHO, soruyu en iyi cevaplarla kapatmak istemiyor ve bunun yerine kopyaları bağlantıya teşvik ediyoruz. Eminim bu Meta üzerinde tartışılmış olurdu ama şimdi bulamıyorum ...
— Alex Angas

Yanıtlar:

1047

CSS3 adında güzel bir özellik var background-size:cover.

Bu, görüntüyü, en boy oranını korurken arka plan alanının tamamen arka plan görüntüsüyle kaplanmasını sağlayacak şekilde ölçeklendirir. Tüm alan kaplanacaktır. Ancak, yeniden boyutlandırılan görüntünün genişliği / yüksekliği çok büyükse görüntünün bir kısmı görünmeyebilir.

— Vashishtha Jogi
kaynak
11
En boy oranı eşleşmiyorsa kapak görüntüyü kırpar, bu nedenle iyi bir genel çözüm değildir.
— mahemoff
1
IE tarayıcılarında çalışmasını istiyorsanız - github.com/louisremi/background-size-polyfill
— Wreeecks
4
Firefox'ta çalışmıyor gibi görünüyor. Ancak, background-size: 100vw 100vh;hile güzel.
— Yannick Mauray
5
@YannickMauray deneyin: background-size: cover; -ms-background-size: cover; -o-background-size: cover; -moz-background-size: cover; -webkit-background-size: cover;
— Amit Kumar Khare
2
Bunu istiyorsanız, ancak yalnızca yatay eksen için, şunu kullanın: background-size: 100% auto; stackoverflow.com/questions/41025630/…
— antoineMoPa
470

Bunu oldukça güzel yapmak için CSS3 özelliğini kullanabilirsiniz. Orana göre yeniden boyutlandırılır, böylece görüntüde bozulma olmaz (küçük görüntülerde artış olmasına rağmen). Sadece tüm tarayıcılarda uygulanmadığını unutmayın.

background-size: 100%;
— Matt Burgess
kaynak
19
@nXqd Tam olarak bu tam kod! A ile bir kap oluşturun background-imageve yukarıdaki özelliği ekleyin. Belirtildiği gibi, tarayıcı desteği henüz iyi değil ve bunun tarayıcıya özel sürümleri var. -webkit-background-sizevb. Bkz. W3C CSS3 Modülü: arka plan boyutu ve css3.info: arka plan boyutu
— MrWhite
15
Görüntünün en boy oranını korumak için "background-size: cover;" veya "arka plan boyutu: içerir;". Bir polyfill inşa ettik uygular IE8'de bu değerler: github.com/louisremi/background-size-polyfill
— Louis-Rémi
4
En / autoboy oranını korumak için eklenmesi de önerilir .
— Chibueze Opata
186

Kullanmak Bahsettiğim kodu ...

HTML

<div id="background">
    <img src="img.jpg" class="stretch" alt="" />
</div>

CSS

#background {
    width: 100%; 
    height: 100%; 
    position: fixed; 
    left: 0px; 
    top: 0px; 
    z-index: -1; /* Ensure div tag stays behind content; -999 might work, too. */
}

.stretch {
    width:100%;
    height:100%;
}

Bu istenen efekti üretir: arka plan değil, yalnızca içerik kaydırılır.

Arka plan görüntüsü, herhangi bir ekran boyutu için tarayıcı görünüm alanına yeniden boyutlandırılır. İçerik tarayıcı görünüm penceresine uymadığında ve kullanıcının sayfayı kaydırması gerektiğinde, içerik kaydırılırken arka plan görüntüsü görünüm penceresinde sabit kalır.

CSS 3 ile bu çok daha kolay olacak gibi görünüyor.

— Fábio Antunes
kaynak
12
Ama bu arka plan görüntüsü değil. Bunu yalnızca bir bloğa yapabilirsiniz, ancak input [type = text] gibi satır içi bir öğe yapamazsınız. Yoksa yanılıyor muyum?
— deerchao
11
"= streç" sınıfına gerek yok, css'de tanımlayıcı olarak #background img {} kullanın
— BerggreenDK
z-endeksi: -1; görüntünüzü arka planda tutar. Resminizi ön planda göstermek istiyorsanız, z-endeksi değerini artırabilir veya bu dizini kaldırabilirsiniz.
— gokhanakkurt
Sahip olduğum sorun IE8 ile. Bir DIV'nin arka plan görüntüsü tam olarak uzanır, ancak IE8'de görüntüler DIV'nin dışına gider, bu nedenle tam görüntüyü göremez. Kırpılıyor. İşte sorum: stackoverflow.com/questions/22331179/…
— Si8
1
İnsanların yaptığı açık hata, arka plan görüntüsünü css'e (yani, background : url("example.png");) koymak ve daha sonra background-size:100%;görüntüyü ekran genişliğine ölçeklemek için altındaki css niteliğini kullanmaktır . Bu işe yaramayacak, değil mi? Gövde için bir arka plan resmi koymak istiyorsanız, gövde etiketine benzer bir resim özelliği eklenmelidir <body background="example.png">. Ardından background-size:100%;ölçeklemek için css kullanın.
— sjsam
166

CSS:

html,body {
    background: url(images/bg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover; /* For WebKit*/
    -moz-background-size: cover;    /* Mozilla*/
    -o-background-size: cover;      /* Opera*/
    background-size: cover;         /* Generic*/
}
— Josh Crozier
kaynak
Ancak, bu IE8'de çalışmaz. Pencerenin üstünde ve altında bir kenar boşluğu oluşturur.
— erdomester
Android'de bunun html, body {...}yerine kullanırken işe yaradı body {...}.
— Edward
53 
background-size: 100% 100%;

her iki eksendeki tüm öğeyi doldurmak için arka planı genişletir.

— yeahdixon
kaynak
40

Aşağıdaki CSS kısmı görüntüyü tüm tarayıcılarla genişletmelidir.

Bunu her sayfa için dinamik olarak yapıyorum. Bu nedenle her sayfa için kendi HTML etiketini oluşturmak için PHP kullanıyorum. Tüm resimler 'image' klasöründedir ve 'Bg.jpg' ile biter.

<html style="
      background: url(images/'.$pic.'Bg.jpg) no-repeat center center fixed;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/'.$pic.'Bg.jpg\',     sizingMethod=\'scale\');
      -ms-filter: \"progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/'.$pic.'Bg.jpg\', sizingMethod=\'scale\')\
";>

Tüm sayfalar için yalnızca bir arka plan resminiz varsa, $picdeğişkeni kaldırabilir, kaçan ters eğik çizgileri kaldırabilir, yolları ayarlayabilir ve bu kodu CSS dosyanıza yerleştirebilirsiniz.

html{
    background: url(images/homeBg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/homeBg.jpg',     sizingMethod='scale');
    -ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/homeBg', sizingMethod='scale');
}

Bu, Internet Explorer 9, Chrome 21 ve Firefox 14 ile test edildi.

— Thorsten Niehues
kaynak
2
Örneğiniz geriye dönük uyumluluk anlamında işe yaramıyor çünkü satıcı öneklerinin önde gelen '-' larını unuttun. Olmalı -webkit-background-size, -moz-background-sizevb. Ayrıca bkz. Developer.mozilla.org/tr-TR/docs/CSS/… ya da geleceğe dönük olarakbackground: url(img/bg-home.jpg) no-repeat center center / cover fixed;
— Volker E.
Bu, IE9'da benim için çalışacak tek çözümdü. Teşekkürler.
— robnick
17

Aslında img etiketi ile arka plan görüntüsü ile aynı efekti elde edebilirsiniz. Z-endeksini her şeyden daha düşük bir değere ayarlamanız, pozisyon: mutlak ayarlamanız ve ön plandaki her kutu için saydam bir arka plan kullanmanız yeterlidir.

— Kim Stebel
kaynak
Diğerleri gördüm bu T sorular, ve çalışır, ama CSS3 çıktığı gibi, şimdi bunun için daha iyi bir yol olduğunu düşündüm.
— Fábio Antunes
3
Tarayıcı kullanımındaki gelişmeler olabilir ve dikkate alındığında, bunları yalnızca ticari olarak kullanabilirsiniz ... 10 yıl?
— Kim Stebel
CSS3 olarak, en modern tarayıcıların gördüğü bir özelliği kullanma ve desteklenmeyen tarayıcılara minimum standart verme konusunda yanlış bir şey yoktur. Burada, örneğin, IE8 için sıkıcı ama kabul edilebilir bir arka plan ve Firefox / Chrome / Safari / Opera için güzel bir resim kullanabilirsiniz. Ayrıca, eski tarayıcılarda CSS3 işlevselliğini JavaScript ile çoğaltmak için birçok çoklu dolgu vardır. Başka bir deyişle, her tarayıcının kullanmak için CSS3'ü desteklemesini beklemenize gerek yoktur.
— Dan
Yeni tescilli MS AlphaImageLoader'ın kullanımına atıfta bulunan diğer yazıyı buldum: stackoverflow.com/questions/2991623/…
— uglymunky
17

Bu CSS'yi kullanın:

background: url('img.png') no-repeat; 
background-size: 100%;
— RSH1
kaynak
15

CSS hileleri ile açıklanmıştır: Mükemmel Tam Sayfa Arka Plan Resmi

Demo: https://css-tricks.com/examples/FullPageBackgroundImage/progressive.php

Kod:

body {
  background: url(images/myBackground.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
— Aamer Shahzad
kaynak
Yukarıdaki cevaba dayanarak, arka plan eki düzeltmesinin mobil cihazlarda ve microsoft edge üzerinde çalışmadığını gördüm. Tüm cihazlarda ve tarayıcılarda arka plan uzatmak ve düzeltmek için mükemmel çözüm jquery-backstretch.com
— Aamer Shahzad
15

Bu sınıfı CSS dosyanıza ekleyebilirsiniz.

.stretch {
    background: url(images/bg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

Çalıştığı yer:

  • Safari 3 veya üstü
  • Chrome Whatever ya da later
  • Internet Explorer 9 veya üzeri
  • Opera 10 veya üstü (Opera 9.5 desteklenir background-size, ancak anahtar kelimeler desteklenmez )
  • Firefox 3.6 veya üzeri (Firefox 4, satıcı olmayan ön ekli sürümü destekler)
— Arunraj S
kaynak
Bu, çalışacak bir "uyum sağlamak için" cevaptır. Not: en boy oranı değişecektir.
— devdrc
10

Görüntülerinizi kap boyutuna göre uygun şekilde ölçeklemek için aşağıdakileri kullanın:

background-size: contain;
background-repeat: no-repeat;
— justinpees
kaynak
9

Bunu kullanıyorum ve tüm tarayıcılarda çalışıyor:

<html>
    <head>
        <title>Stretched Background Image</title>
        <style type="text/css">
            /* Remove margins from the 'html' and 'body' tags, and ensure the page takes up full screen height. */
            html, body {height:100%; margin:0; padding:0;}

            /* Set the position and dimensions of the background image. */
            #page-background {position:fixed; top:0; left:0; width:100%; height:100%;}

            /* Specify the position and layering for the content that needs to appear in front of the background image. Must have a higher z-index value than the background image. Also add some padding to compensate for removing the margin from the 'html' and 'body' tags. */
            #content {position:relative; z-index:1; padding:10px;}
        </style>
        <!-- The above code doesn't work in Internet Explorer 6. To address this, we use a conditional comment to specify an alternative style sheet for IE 6. -->
        <!--[if IE 6]>
        <style type="text/css">
            html {overflow-y:hidden;}
            body {overflow-y:auto;}
            #page-background {position:absolute; z-index:-1;}
            #content {position:static;padding:10px;}
        </style>
        <![endif]-->
    </head>
    <body>
        <div id="page-background"><img src="http://www.quackit.com/pix/milford_sound/milford_sound.jpg" width="100%" height="100%" alt="Smile"></div>
        <div id="content">
            <h2>Stretch that Background Image!</h2>
            <p>This text appears in front of the background image. This is because we've used CSS to layer the content in front of the background image. The background image will stretch to fit your browser window. You can see the image grow and shrink as you resize your browser.</p>
            <p>Go on, try it - resize your browser!</p>
        </div>
    </body>
</html>
— Mehdi Jokar
kaynak
9

Teşekkürler!

Ama sonra birileri bana neyin eksik olduğunu söyleyene kadar Google Chrome ve Safari tarayıcıları için çalışmıyor (germe çalıştı, ancak resimlerin yüksekliği sadece 2 mm idi!) :

Ayarlamaya çalışın height:auto;min-height:100%;

Bu yüzden height:100%;çizginiz için bunu değiştirin :

#### #background {
    width: 100%; 
    height: 100%; 
    position: fixed; 
    left: 0px; 
    top: 0px; 
    z-index: -1;
}

.stretch {
    width:100%;
    height:auto;
    min-height:100%;
}

Bu yeni eklenen kod hemen önce benim Drupal Tendu temaları var style.css:

html, gövde {yükseklik:% 100;}

#page {arka: #ffffff; yükseklik: otomatik! önemli; yükseklik:% 100; min-yükseklik:% 100; konum: göreceli;}

Sonra eklerken resim ile Drupal içinde yeni bir blok yapmak zorunda class=stretch:

<img alt = "" class = "streç" src = "pic.url" />

Drupal bloğunda editörle bir resim kopyalamak işe yaramıyor; editör biçimlendirilmemiş metne dönüştürülmelidir.

— cybr
kaynak
8

% 100 genişlik ve yükseklik ile mutlak div görüntüsüne katılıyorum. CSS'deki gövde için% 100 genişlik ve yükseklik ayarladığınızdan ve kenar boşluklarını ve dolguyu sıfıra ayarladığınızdan emin olun. Bu yöntemle bulacağınız başka bir sorun, metin seçerken, seçim alanının bazen tam sayfanın seçilen duruma sahip olmasının talihsiz etkisi olan arka plan görüntüsünü kapsayabileceğidir. Bunun user-select:nonegibi CSS kuralını kullanarak bunu başarabilirsiniz :

<html>
    <head>
        <style type="text/css">

            html,body {
                height: 100%;
                width: 100%
                margin: none;
                padding: none;
            }

            #background {
                width: 100%;
                height: 100%;
                position: fixed;
                left: 0px;
                top: 0px;
                z-index: -99999;
                -webkit-user-select: none;
                -khtml-user-select: none;
                -moz-user-select: none;
                -o-user-select: none;
                user-select: none;
            }

            #background img {
                width: 100%;
                height: 100%;
            }

            #main{ z-index:10;}
        </style>
    </head>
    <body>
        <div id="main">
            content here
        </div>
        <div id="background"><img src="bg.jpg"></div>
    </body>
</html>

Yine, Internet Explorer burada kötü adam, çünkü kullanıcı seçme seçeneğini tanımıyor - Internet Explorer 10 önizlemesi bile desteklemiyor, bu nedenle arka plan görüntüsü seçimini önlemek için JavaScript kullanma seçeneğiniz var (örneğin, http : //www.felgall.com/jstip35.htm ) veya CSS 3 kullanma arka plan germe yöntemini .

Ayrıca, SEO için arka plan görüntüsünü sayfanın altına koyarım, ancak arka plan görüntüsünün yüklenmesi çok uzun sürerse (yani başlangıçta beyaz bir arka planla), sayfanın üst kısmına taşıyabilirsiniz.

— Myke Black
kaynak
sonra seçilmemelidir bg ile img sadece bir div kullanmayın
— Jacek Pietal
7

Bir arka plan resmini tüm sayfaya genişletmeden ortalamak ve ölçeklemek istedim ve en boy oranının korunmasını istedim. Diğer cevaplarda önerilen varyasyonlar sayesinde bu benim için çalıştı:

INLINE GÖRÜNTÜ: ------------------------

<div id="background">
    <img src="img.jpg" class="stretch" alt="" />
</div>

CSS ----------------------------------

html {
    height:100%;
}

#background {
    text-align: center;
    width: 100%; 
    height: 100%; 
    position: fixed;
    left: 0px; 
    top: 0px; 
    z-index: -1;
}

.stretch {
    margin: auto;
    height:100%;
}
— AnnieDee
kaynak
5

İdeal ölçekleme arka plan görüntüsünü elde etmek için background-X CSS özelliklerinin bir kombinasyonunu kullandım.

background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;

Bu, arka planın her zaman tüm tarayıcı penceresini kaplamasını sağlar ve ölçekleme sırasında ortalanmış olarak kalır.

— Ryan Den-Kaat
kaynak
4

Backstretch eklentisini kullanın . Hatta birkaç resim slayt bile olabilir. Ayrıca konteyner içinde de çalışır. Bu şekilde, örneğin arka planın yalnızca bir kısmı bir arka plan görüntüsü ile kaplanmış olabilir.

Ben bile işe alabilir beri kullanımı kolay bir eklenti olduğunu kanıtlıyor :).

— Daniel
kaynak
3

İçeriğin yatay olarak ortalanmasını istiyorsanız, aşağıdaki gibi bir kombinasyon kullanın:

background-repeat: no-repeat;
background-size: cover;
background-position: center;

Bu güzel görünecek.

— Samuel Ramzan
kaynak
1

border-image : yourimageÖzelliği, görüntüyü kenarlığa kadar ölçeklendirmek için kullanabilirsiniz . Arka plan görüntüsünü verseniz bile, kenarlık görüntüsü üzerine çizilir.

border-imageÖzellik sizin stil sayfası Google Chrome veya Firefox kullanıyorsanız CSS 3. desteklemediği bir yere uygulanırsa çok yararlıdır, o zaman ben tavsiye background-size:coverözelliği kendisi.

— Natesh bhat
kaynak
0

Bunu tek bir görüntü kullanarak başarmak ister misiniz? Çünkü aslında iki görüntü kullanarak gerilmiş bir arka plana biraz benzeyebilirsiniz. Örneğin PNG görüntüleri.

Bunu daha önce yaptım ve o kadar da zor değil. Ayrıca, germenin sadece arka planın kalitesine zarar vereceğini düşünüyorum. Ve büyük bir görüntü eklerseniz, bilgisayarları ve tarayıcıları yavaşlatır.

— MarioRicalde
kaynak
İyi bir nokta. Ama arka plan görüntüsü için jpg kullanıyorum, shes 1500x1000 sadece 100kb'den biraz daha fazla sürüyor. Ama bunu nasıl yaptın?
— Fábio Antunes
1
Görüntüyü yatay olarak ortalamaya ve görüntü kenarlarını düz bir renk veya desenle yumuşatmaya ne dersiniz? Bu, kullanıcının görüntü çözünürlüğünden daha fazlasına sahip olması durumunda kesintisiz bir adaptasyona sahip olmanızı sağlar.
— MarioRicalde
Ama görüntünün arka planı doldurmasını istiyorum. Söylediğin, genellikle yaptığım şey bu.
— Fábio Antunes
0

Aşağıdakiler benim için çalıştı.

.back-ground {
   background-image: url("../assets/background.png");
   background-size: 100vw 100vh;
}

farklı boyutlarda tüm arka planı kaplamak için çalışan

— tony2tones
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.