toda - Centrar una imagen de fondo, usar CSS

imagen de fondo html5

Question

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

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

El CSS anterior muestra mosaicos y lo centra, pero la mitad de la imagen no se ve, simplemente se mueve hacia arriba. Lo que quiero hacer es centrar la imagen. ¿Podría adoptar la imagen para ver incluso en una pantalla de 21 "?

Answer 1

Creo que this es lo que se quiere:

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

Answer 2

Hay un error en tu 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;
}

Debería convertirse 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;
}

EDITAR: para su problema de ''escala'' de la imagen, es posible que desee ver la respuesta de esta pregunta .

Answer 3

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

margin: 0 auto

Answer 4

Me gusta esto:

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

Answer 5

Pruebe esta background-position: center top;

Esto hará el truco para ti.

Answer 6

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 7

Tratar

background-position: center center;

Answer 8

Yo uso este código, funciona bien

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 9

si no está satisfecho con las respuestas anteriores, use esto

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

simplemente reemplace

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

con

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

Answer 11

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

Eso debería funcionar.

Si no, ¿por qué no hacer un div con la imagen y usar 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, intente:

background-position: 0 100px;/*use a pixel value that will center it*/ O creo que puedes usar el 50% si has establecido tu cuerpo como 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 12

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

No centra verticalmente la imagen de fondo cuando se utiliza un tipo de documento html 4.01 ''STRICT''.

Agregar:

background-attachment: fixed;

Debería arreglar el problema

(Así que Alexander tiene razón)