Centrar una imagen de fondo, usando CSS

Question

Quiero centrar una imagen de fondo. No hay div utilizado, este es el estilo CSS:

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

Los azulejos CSS por encima de todo y hace que el centro, pero la mitad de la imagen no se ve, sólo tipo de se mueve hacia arriba. Lo que quiero hacer es centrar la imagen. Yo podría adoptar la imagen para ver incluso en una pantalla de 21" ?

Answer 1

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

Eso debería funcionar.

Si no es así, ¿por qué no hacer una div con la imagen y el uso z-index para que sea el fondo? Esto sería mucho más fácil de centrar que una imagen de fondo en el cuerpo.

Aparte de eso, pruebe:

background-position: 0 100px;/*use a pixel value that will center it*/ O creo que puede usar el 50% si configuró su cuerpo min-height al 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%; 
} 

Answer 2

Trate

background-position: center center; 

Answer 3

Hay un error en el código. Está utilizando una combinación de sintaxis completa y notación taquigráfica en la propiedad de la imagen de fondo. Esto hace que se ignore la no repetición, ya que no es un valor válido para la propiedad de la imagen de fondo.

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

se convierta en uno de los siguientes:

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

o

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

EDIT: Para su imagen 'ampliación' problema, es posible que desee ver en this question's answer.

Answer 4

utilizo este código, funciona agradable

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

Answer 5

probar este background-position: center top;

Esto va a hacer el truco para ti.

Answer 6

creo this es lo que se quiere:

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

Answer 7

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

no se centra verticalmente la imagen de fondo cuando se utiliza un tipo de documento HTML 4.01 'estricto'.

Adición:

background-attachment: fixed; 

debería solucionar el problema

(Así Alexander es la derecha)

Answer 8

si su no está satisfecho con las respuestas anteriores a continuación, utilizar este

* {margin: 0;padding: 0;} 

    html 
    { 
     height: 100%; 
    } 

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

Answer 9

El Lo único que funcionó para mí es ...

margin: 0 auto 

Answer 10

Tenía el mismo problema. Usó las propiedades de visualización y margen y funcionó.

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

Answer 11

simplemente reemplazar

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

con

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