Memusatkan gambar latar belakang, menggunakan CSS

148

Saya ingin memusatkan gambar latar belakang. Tidak ada div yang digunakan, ini adalah gaya CSS :

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

CSS di atas ubin seluruh dan tidak memusatkannya, tetapi setengah gambar tidak terlihat, itu hanya semacam bergerak ke atas. Yang ingin saya lakukan adalah memusatkan gambar. Bisakah saya mengadopsi gambar untuk dilihat bahkan pada layar 21 "?

css

— X10nD
sumber

1

Sekarang itu akan tergantung pada ukuran gambar dan ukuran browser, bukan?

— nikc.org

@nikc +1, saya sadar, tetapi perlu tahu apakah ada pekerjaan

— X10nD

306

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

Itu seharusnya bekerja.

Jika tidak, mengapa tidak membuat divdengan gambar dan gunakan z-indexuntuk menjadikannya latar belakang? Ini akan jauh lebih mudah untuk dipusatkan daripada gambar latar belakang pada tubuh.

Selain itu coba:

background-position: 0 100px;/*use a pixel value that will center it*/Atau saya pikir Anda dapat menggunakan 50% jika Anda telah mengatur tubuh Anda min-heightmenjadi 100%.

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
sumber

Itu terpusat, tetapi hanya menampilkan setengah layar, saya berharap stackoverflow memiliki opsi untuk melampirkan tangkapan layar

— X10nD

Anda dapat membuat tangkapan layar dan mengunggahnya ke server Anda atau situs hosting pic gratis seperti photobucket.com, atau membuat contoh sementara di www.jsfiddle.net dan memposting tautan untuk kami. Dari apa yang Anda katakan, gambar adalah 1600x1200 dan sebagian besar resolusi layar tidak setinggi itu, coba ubah ukuran gambar Anda agar sesuai. Saya menggunakan monitor layar lebar pada 1440x900 misalnya.

— Kyle

tangkapan layar - imagevat.com/picview.php?ig=6179 Saya tidak yakin cara mengunggah gambar ke jsfiddle, jika Anda dapat membantu saya di luar sana jsfiddle.net/yWrQP

— X10nD

Untuk menambahkan gambar ke jsfiddle, cukup gunakan jalur http lengkap EX: background-image:url(http://www.myurl.com/images/image.jpg);letakkan di CSS.

— Kyle

Saya tidak punya server untuk melakukannya, tetapi menggunakan situs imagehosting, tetapi masih memeriksanya sekarang

— X10nD

20

Saya menggunakan kode ini, ini berfungsi dengan baik

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;
}

— pemenang Martinez
sumber

Terima kasih! Saya bahkan tidak tahu bahwa ada deklarasi berbeda untuk webkit, dll ...

— Mike Rapadas

Hei Victor, saya banyak menggunakan kode Anda, tetapi tampaknya itu tidak berfungsi sekarang. Saya menambahkan lampiran latar belakang: tetap; tetapi tidak berfungsi di browser iPad saya ...

— Vadim

Hanya -webkit-background-sizeada dari deklarasi khusus.

— BigBang1112

16

Saya pikir inilah yang diinginkan:

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

— Kepiting
sumber

6

background-attachment memperbaiki masalah ini untuk saya;)

— kdoteu

7

Mencoba

background-position: center center;

— Pekka
sumber

Kenapa pusat kerja ganda bekerja? Pokoknya itu tidak menyelesaikan masalah, masih sama

— X10nD

1

@ Jean: lihat spesifikasi, latar belakang-posisi sebenarnya bisa mengambil 2 nilai (horizontal dan vertikal). w3.org/TR/CSS2/colors.html#propdef-background-position

— Rob van Groenewoud

@ Rb tidak berfungsi, gambar tersebut berubin. Gambar adalah 1600x1200 dan ukuran layar saya 1280x800

— X10nD

2

@Jean Anda belum dapat mengubah ukuran gambar latar belakang. Itu mungkin di CSS 3 tetapi itu belum didukung secara luas. center centerbersama background-repeat: no-repeatharus melakukan apa yang Anda minta - pusatkan gambar.

— Pekka

2

@Jean ahh, saya melihat sekarang dari tangkapan layar Anda. Anda perlu memberikan bodysuatu min-heightdari 100%sehingga meluas di layar penuh. Itu mungkin mengatasinya.

— Pekka

5

Seperti ini:

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;
}

Luaskan cuplikan

— Ronnie Royston
sumber

3

Ada kesalahan dalam kode Anda. Anda menggunakan campuran sintaksis lengkap dan notasi steno pada properti gambar latar. Hal ini menyebabkan no-repeat diabaikan, karena itu bukan nilai yang valid untuk properti gambar latar.

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

Harus menjadi salah satu dari yang berikut:

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

atau

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

EDIT: Untuk masalah 'penskalaan' gambar Anda, Anda mungkin ingin melihat jawaban pertanyaan ini .

— Rob van Groenewoud
sumber

'background: url (../ images / images2.jpg) pusat pusat tanpa pengulangan;' tidak bekerja, karena sintaksnya salah Dan yang lain tidak bekerja juga

— X10nD

2

Coba ini background-position: center top;

Ini akan melakukan trik untuk Anda.

— Magnus
sumber

2

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

Tidak memusatkan gambar latar belakang secara vertikal saat menggunakan html 4.01 'STRICT' doctype.

Menambahkan:

background-attachment: fixed;

Haruskah memperbaiki masalahnya

(Jadi Alexander benar)

— Stephan
sumber

1

cukup ganti

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

dengan

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

— Praveen
sumber

0

jika Anda tidak puas dengan jawaban di atas maka gunakan ini

    * {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
sumber

0

Punya masalah yang sama. Properti tampilan dan margin yang digunakan dan itu berhasil.

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

— Robert Paul
sumber

0

background-position: center center;

tidak bekerja untuk saya tanpa ...

background-attachment: fixed;

menggunakan kedua gambar saya di tengah sumbu x dan y

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

— greenbeen
sumber

-2

Satu-satunya hal yang bekerja untuk saya adalah ..

margin: 0 auto

— celepuk
sumber