Centrar una imagen de fondo, usando CSS

148

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 de arriba se repite 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 verla incluso en una pantalla de 21 "?

css

— X10nD
fuente

1

Ahora eso dependería del tamaño de la imagen y del tamaño del navegador, ¿no?

— nikc.org

@nikc +1, lo sé, pero necesito saber si hubo una

— solución

306

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 un a divcon la imagen y usarla z-indexcomo 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 puede usar el 50% si ha configurado su cuerpo min-heightal 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
fuente

Se centraliza, pero muestra solo la mitad de la pantalla, desearía que stackoverflow tuviera la opción de adjuntar capturas de pantalla

— X10nD

Puede hacer una captura de pantalla y subirla a su servidor o un sitio de alojamiento de imágenes gratuito como photobucket.com, o hacer un ejemplo temporal en www.jsfiddle.net y publicar un enlace para nosotros. Por lo que has dicho, la imagen es de 1600x1200 y la mayoría de las resoluciones de pantalla no van tan alto, intenta cambiar el tamaño de tu imagen para que se ajuste. Yo uso un monitor de pantalla panorámica a 1440x900 por ejemplo.

— Kyle

screenshot - imagevat.com/picview.php?ig=6179 No estoy seguro de cómo subir imágenes a jsfiddle, si me pueden ayudar jsfiddle.net/yWrQP

— X10nD

Para agregar una imagen a jsfiddle, solo use la ruta http completa EX: colóquela background-image:url(http://www.myurl.com/images/image.jpg);en el CSS.

— Kyle

No tengo el servidor para hacerlo, pero utilicé un sitio de alojamiento de imágenes, pero aún lo

— veo

20

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

— victor martinez
fuente

¡Gracias! Ni siquiera sabía que había diferentes declaraciones para webkit, etc ...

— Mike Rapadas

Hola Victor, usé mucho tu código, pero parece que no funciona ahora. Agregué el adjunto de fondo: arreglado; pero no funciona en el navegador de mi iPad ...

— Vadim

Sin -webkit-background-sizeembargo, solo existe a partir de las declaraciones especiales.

— BigBang1112

16

Creo que esto es lo que se quiere:

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

— Cangrejo
fuente

66

background-attachment ha solucionado el problema para mí;)

— kdoteu

7

Tratar

background-position: center center;

— Pekka
fuente

¿Cómo es que funciona el centro doble centro? De todos modos, no resuelve el problema, sigue siendo el mismo

— X10nD

1

@Jean: mira las especificaciones, la posición del fondo en realidad puede tomar 2 valores (horizontal y vertical). w3.org/TR/CSS2/colors.html#propdef-background-position

— Rob van Groenewoud

@rob no funciona, la imagen está en mosaico. La imagen es 1600x1200 y el tamaño de mi pantalla es 1280x800

— X10nD

2

@Jean, no puedes cambiar el tamaño de una imagen de fondo (todavía). Es posible en CSS 3, pero aún no es lo suficientemente compatible. center centerjunto con background-repeat: no-repeatdebería hacer lo que pides: centrar la imagen.

— Pekka

2

@ Jean ahh, ahora veo desde tu captura de pantalla. Debe dar el bodya min-heightde 100%modo que se extienda por toda la pantalla. Eso puede solucionarlo.

— Pekka

5

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

Expandir fragmento

— Ronnie Royston
fuente

3

Hay un error en tu código. Está utilizando una combinación de sintaxis completa y notación abreviada en la propiedad de imagen de fondo. Esto hace que se ignore la no repetición, ya que no es un valor válido para la propiedad de 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 .

— Rob van Groenewoud
fuente

'background: url (../ images / images2.jpg) center center no-repeat;' no funciona, ya que la sintaxis es incorrecta Y los demás tampoco funcionan

— X10nD

2

Prueba esto background-position: center top;

Esto hará el truco por ti.

— Magnus
fuente

2

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

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

Agregando:

background-attachment: fixed;

Debería solucionar el problema

(Entonces Alexander tiene razón)

— Stephan
fuente

1

simplemente reemplace

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

con

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

— Praveen
fuente

0

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

— Toye_Brainz
fuente

0

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

— Robert Paul
fuente

0

background-position: center center;

no funciona para mí sin ...

background-attachment: fixed;

usando ambos centrados mi imagen en los ejes xey

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

— greenbeen
fuente

-2

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

margin: 0 auto

— plaf
fuente