CSS kullanarak bir arka plan resmini ortalamak

152

Bir arka plan resmini ortalamak istiyorum. Kullanılmış div yok, bu CSS stili:

body{
    background-position:center;
    background-image:url(../images/images2.jpg) no-repeat;
}

Yukarıdaki CSS her yerde döşenir ve ortalanır, ancak görüntünün yarısı görünmez, sadece bir tür yukarı hareket eder. Yapmak istediğim şey, görüntüyü ortalamak. Görüntüyü 21 "ekranda bile görüntülemek için kullanabilir miyim?

css

— X10nD
kaynak

1

Şimdi bu, görüntünün boyutuna ve tarayıcının boyutuna bağlı değil mi?

— nikc.org

@nikc +1, farkındayım, ancak etrafta bir çalışma olup olmadığını bilmem gerekiyor

— X10nD

313

background-image: url(path-to-file/img.jpg);
background-repeat:no-repeat;
background-position: center center;

Bu çalışmalı.

Değilse, neden divresimle bir z-indexyapıp arka plan yapmak için kullanmayasınız ? Bunu ortalamak, vücuttaki bir arka plan görüntüsünden çok daha kolay olurdu.

Bunun dışında deneyin:

background-position: 0 100px;/*use a pixel value that will center it*/Veya bedeninizi min-height% 100'e ayarladıysanız% 50 kullanabileceğinizi düşünüyorum .

body{

    background-repeat:no-repeat;
    background-position: center center;
    background-image:url(../images/images2.jpg);
    color:#FFF;
    font-family:Arial, Helvetica, sans-serif;
    min-height:100%;
}

— Kyle
kaynak

Merkezileştiriyor, ancak ekranın yalnızca yarısını görüntülüyor, keşke stackoverflow'un ekran görüntüsü ekleme seçeneği olsaydı

— X10nD

Bir ekran görüntüsü alıp sunucunuza veya photobucket.com gibi ücretsiz bir resim barındırma sitesine yükleyebilir veya www.jsfiddle.net'te geçici bir örnek oluşturabilir ve bizim için bir bağlantı gönderebilirsiniz. Söylediklerinize göre, görüntü 1600x1200 ve çoğu ekran çözünürlüğü o kadar yüksek olmaz, görüntünüzü sığacak şekilde yeniden boyutlandırmayı deneyin. Örneğin 1440x900 geniş ekran monitör kullanıyorum.

— Kyle

ekran görüntüsü - imagevat.com/picview.php?ig=6179 Sana orada bana yardım edebilir eğer jsfiddle resim yüklemek için nasıl emin değilim jsfiddle.net/yWrQP

— X10nD

Jsfiddle'a bir resim eklemek için, tam http yolunu EX kullanın: background-image:url(http://www.myurl.com/images/image.jpg);bunu CSS'ye koyun.

— Kyle

Bunu yapacak sunucuya sahip değilim, ancak bir görüntü barındırma sitesi kullandım, ancak yine de kontrol edin

— X10nD

21

Bu kodu kullanıyorum, güzel çalışıyor

html, body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  background: black url(back2.png) center center no-repeat;;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

— Victor Martinez
kaynak

Teşekkürler! Webkit vb. İçin farklı beyanlar olduğunu bile bilmiyordum ...

— Mike Rapadas

Hey Victor, kodunu çok kullandım ama görünüşe göre şimdi çalışmıyor. Arka plan eki ekledim: düzeltildi; ancak iPad tarayıcımda çalışmıyor ...

— Vadim

-webkit-background-sizeYine de sadece özel bildirimlerden var.

— BigBang1112

16

Bence bu istediğini budur:

body
{
    background-image:url('smiley.gif');
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:center;
}

— Yengeç
kaynak

6

background-attachment sorunu benim için çözdü;)

— kdoteu

7

Deneyin

background-position: center center;

— Pekka
kaynak

Çift merkez merkez nasıl çalışır? Her neyse sorunu çözmüyor, hala aynı

— X10nD

1

@Jean: Spesifikasyonlara bakın, arka plan konumu aslında 2 değer alabilir (yatay ve dikey). w3.org/TR/CSS2/colors.html#propdef-background-position

— Rob van Groenewoud

@rob çalışmıyor, görüntü döşeniyor. Görüntü 1600x1200 ve ekran

— boyutum

2

@Jean (henüz) bir arka plan resmini yeniden boyutlandıramazsınız. CSS 3'te mümkündür, ancak bu henüz yeterince yaygın olarak desteklenmemektedir. center centerile birlikte background-repeat: no-repeatistediğiniz şeyi yapmalısınız - görüntüyü ortalayın.

— Pekka

2

@ Jean ahh, şimdi ekran görüntüsünden anlıyorum. Sen vermek gerekir bodya min-heightait 100%tam ekran boyunca uzanır böylece. Bu onu sıralayabilir.

— Pekka

5

Bunun gibi:

background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Dore_woodcut_Divine_Comedy_01.jpg/481px-Dore_woodcut_Divine_Comedy_01.jpg);
background-repeat:no-repeat;
background-position: center;
background-size: cover;

html{
height:100%
}

body{
background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Dore_woodcut_Divine_Comedy_01.jpg/481px-Dore_woodcut_Divine_Comedy_01.jpg);
background-repeat:no-repeat;
background-position: center;
background-size: cover;
}

Snippet'i genişlet

— Ronnie Royston
kaynak

3

Kodunuzda bir hata var. Background-image özelliğinde tam sözdizimi ve steno gösteriminin bir karışımını kullanıyorsunuz. Bu, background-image özelliği için geçerli bir değer olmadığından yinelemesizin yok sayılmasına neden oluyor.

body{   
    background-position:center;
    background-image:url(../images/images2.jpg) no-repeat;
}

Aşağıdakilerden biri olmalıdır:

body{
    background:url(../images/images2.jpg) center center no-repeat;
}

veya

body
{
    background-image: url(path-to-file/img.jpg);
    background-repeat:no-repeat;
    background-position: center center;
}

DÜZENLEME: Görüntü 'ölçekleme' sorununuz için, bu sorunun cevabına bakmak isteyebilirsiniz .

— Rob van Groenewoud
kaynak

'arkaplan: url (../ images / images2.jpg) merkez merkez yineleme yok;' sözdizimi yanlış olduğu için çalışmıyor Ve diğerleri de çalışmıyor

— X10nD

2

Bunu dene background-position: center top;

Bu sizin için hile yapacak.

— Magnus
kaynak

2

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

Bir html 4.01 'STRICT' belge türü kullanılırken arka plan resmini dikey olarak ortalamaz.

Ekleme:

background-attachment: fixed;

Sorunu çözmeli

(Yani İskender haklı)

— Stephan
kaynak

1

basitçe değiştir

background-image:url(../images/images2.jpg) no-repeat;

ile

background:url(../images/images2.jpg)  center;

— Praveen
kaynak

0

Yukarıdaki cevaplardan memnun değilseniz, bunu kullanın

    * {margin: 0;padding: 0;}

    html
    {
        height: 100%;
    }

    body
    {
        background-image: url("background.png");
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 80%;
    }

— Toye_Brainz
kaynak

0

Aynı sorunu yaşadım. Ekran ve kenar boşluğu özellikleri kullanıldı ve işe yaradı.

.background-image {
  background: url('yourimage.jpg') no-repeat;
  display: block;
  margin-left: auto;
  margin-right: auto;
  height: whateveryouwantpx;
  width: whateveryouwantpx;
}

— Robert Paul
kaynak

0

background-position: center center;

benim için çalışmıyor ...

background-attachment: fixed;

resmimi hem x hem de y ekseninde ortaladı kullanarak

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

— Greenbeen
kaynak

-2

Benim için işe yarayan tek şey ...

margin: 0 auto

— plop
kaynak