Centrar una imagen de fondo, usando CSS


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

Los azulejos CSS anteriores por todas partes y lo hace centro, pero la mitad de la imagen no se ve, simplemente tipo de se mueve hacia arriba. Lo que quiero hacer es centrar la imagen. ¿Podría adoptar la imagen para verla incluso en una pantalla de 21"?

 115
css
Author: Peter Mortensen, 2010-04-15

12 answers

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 hacerla el fondo? Esto sería mucho más fácil de centrar que una imagen de fondo en el cuerpo.

Aparte de ese intento:

background-position: 0 100px;/*use a pixel value that will center it*/ O creo que puedes usar el 50% si has establecido tu 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%;
}
 240
Author: Kyle,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-04-15 08:15:22

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;
}
 17
Author: victor Martinez,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-12-18 17:49:48

Creo que esto es lo que se quiere:

body
{
    background-image:url('smiley.gif');
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:center;
} 
 13
Author: Crab,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-02-12 06:33:08

Intenta

background-position: center center;
 6
Author: Pekka 웃,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-04-15 07:04:16

Hay un error en tu código. Está utilizando una mezcla de sintaxis completa y notación abreviada en la propiedad background-image.Esto está causando que no-repeat se ignore, ya que no es un valor válido para la propiedad background-image.

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

Debe 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 el problema de 'escalado' de la imagen, es posible que desee mirar la respuesta de esta pregunta.

 3
Author: Rob van Groenewoud,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 12:34:30

Prueba esto background-position: center top;

Esto hará el truco para usted.

 2
Author: Magnus,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-09-15 08:46:15
background-repeat:no-repeat;
background-position:center center;

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

Añadiendo:

background-attachment: fixed;

Debería solucionar el problema

(Así que Alexander tiene razón)

 2
Author: Stephan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-09-29 14:37:17

Así:

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;
}
 1
Author: Ron Royston,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-04-04 23:05:39

Si no está satisfecho con las respuestas anteriores, use esta

    * {margin: 0;padding: 0;}

    html
    {
        height: 100%;
    }

    body
    {
        background-image: url("background.png");
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 80%;
    }
 0
Author: Toye_Brainz,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-01-11 13:18:12

Tenía el mismo problema. Se utilizaron 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;
}
 0
Author: Robert Paul,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-07-22 21:11:25

Simplemente reemplace

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

Con

background:url(../images/images2.jpg)  center;
 0
Author: Praveen,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-04-05 15:59:23

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

margin: 0 auto
 -2
Author: plop,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-08-12 13:31:21