Soy bastante nuevo en CSS, pero hice algo en Illustrator (web) y quería poner esto como imagen de fondo en CSS. Puse la imagen en <div> y CSS en solo puse background-image: url(berg.jpg), estoy seguro de que la URL es correcta, pero no muestra nada. Puse height: 100% en CSS después de eso y apareció, pero todo estaba ampliado y solo muestra una pequeña esquina de la imagen debido al zoom. ¿Cómo puedo mostrar esto correctamente? El tamaño de la imagen es ancho: 1366px; altura: 768px.

Lo siento si esto ya se preguntó, pero parece que no pude encontrarlo. Gracias de antemano.

-1
Lucas Verhoest 13 nov. 2017 a las 21:04

2 respuestas

La mejor respuesta

Su imagen se muestra a tamaño completo. Si agrega el atributo background-size a su css, puede definir el tamaño.

Vea este enlace para todas las opciones de background-size: https://www.w3schools.com/cssref/css3_pr_background-size.asp

También puede definir el background-position para centrar la imagen, etc. https://www.w3schools.com/cssref/pr_background-position.asp


Ejemplo de CSS

    #problem-image {
      height: 200px;
      width: 200px;
      background-image: url('https://images.unsplash.com/photo-1463852247062-1bbca38f7805?auto=format&fit=crop&w=2255&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D');
    }

    #correct-image {
      height: 200px;
      width: 200px;
      background-image: url('https://images.unsplash.com/photo-1463852247062-1bbca38f7805?auto=format&fit=crop&w=2255&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D');
      background-size: cover;
      background-position: center center;
    }

Vea jsfiddle para un ejemplo completo de trabajo: https://jsfiddle.net/3o8b2e4s/

0
Markie 13 nov. 2017 a las 18:11

Puedes intentar poner bakcground-size: cover; en tu código CSS y esto recuperará todo el fondo de tu div independientemente del ancho o alto.

0
Victor Lucas 13 nov. 2017 a las 18:07