Cómo usar una imagen de fondo receptiva en css3 en bootstrap

3 minutos de lectura

avatar de usuario
Faizán

No quiero usar la etiqueta html. Este es mi CSS. Estoy usando bootstrap 3.0.

background:url('images/ip-box.png')no-repeat;
background-size:100%;
height: 140px;
display:block;
padding:0 !important;
margin:0;

Con un zoom del 100 %, está bien. pero cuando acerco el zoom al 180% aproximadamente, la imagen será corta de arriba a abajo, quiero algunos trucos de css.

  • ¿es esto lo que estás buscando? css-tricks.com/perfect-full-page-background-image

    – Jonas Grumann

    04/09/2013 a las 11:31

  • ¿Qué pasa con las consultas de medios?

    – Ritabrata Gautama

    4 sep 2013 a las 11:33

  • @RitabrataGautam, sí, ahora creo que las consultas de medios son mi última opción… en realidad no sé acerca de las consultas de medios, este es mi primer proyecto en bootstrap.

    – Faizán

    4 de septiembre de 2013 a las 12:04

Para ver el fondo de la imagen completa, verifique esto:

html { 
background: url(images/bg.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

  • es posible que deba restablecer el estilo de arranque predeterminado para eliminar el fondo blanco: cuerpo { color de fondo: transparente; }

    – Mateo Bloqueo

    28 de septiembre de 2015 a las 10:44

  • Funcionó perfectamente para mí.

    – Vahid Amiri

    7 oct 2016 a las 12:16

  • ¡Excelente! Funcionó para mí (bootstrap 4, Rails 5)

    – guero64

    23 de agosto de 2017 a las 15:25

necesitas usar background-size: 100% 100%;

Manifestación

demostración 2 (No se estirará, esto es lo que estás haciendo)

Explicación: Tienes que usar 100% 100% como se establece para X TANTO COMO Yestás configurando 100% solo por el X parámetro, por lo que el fondo no se estira verticalmente.


Aún así, la imagen se estirará, no responderá, si desea estirar el background proporcionalmente, puedes buscar background-size: cover; pero IE le creará problemas aquí ya que es propiedad de CSS3, pero sí, puede usar CSS3 Pie como un polyfill. Además, usando cover recortará su imagen.

  • No puedo usar el ancho porque mi diseño responde. Si uso el tamaño de fondo: 100% 100%; la imagen se estira verticalmente. Esto no es bueno. Hay alguna otra opción..??

    – Faizán

    4 sep 2013 a las 11:44

  • @Faizan que ir por jQuery

    – Sr. Alien

    4 de septiembre de 2013 a las 11:47

  • Realmente pensé que boostrap sería menos inútil, incapaz de hacer cosas básicas como esta y con tamaños restringidos, probablemente tendría más sentido y generaría menos trabajo para escribir CSS personalizado de calidad.

    – Dan

    23/04/2014 a las 23:37


  • tamaño de fondo: 100% 100%; esto funciona para mi Muchas gracias

    – Jagz W.

    15 de noviembre de 2015 a las 3:53

  • Lo que necesitaba era tamaño de fondo: 100% automático;

    – Separadora

    19 de enero de 2016 a las 15:27

avatar de usuario
raduken

Encontré esto:

Completo

Una plantilla de fondo de imagen de página completa fácil de usar para sitios web de Bootstrap 3

http://startbootstrap.com/template-overviews/full/

o

usando en su contenedor div principal:

html

<div class="container-fluid full">


</div>

CSS:

.full {
    background: url('http://placehold.it/1920x1080') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
    height:100%;
}

Mira esto,

body {
    background-color: black;
    background: url(img/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

La ruta del archivo 'images/ip-box.png' implica que el css expediente está al mismo nivel que las imágenes carpeta.

Probablemente sea más común tener las carpetas ‘images’ y ‘css’ al mismo nivel que el archivo ‘index.html’.

Si ese fuera el caso y el archivo css estuviera un nivel por debajo en su carpeta respectiva, entonces la ruta a ip-box.jpg como se especifica en el archivo css sería: '../images/ip-box.png'

Establecer un fondo receptivo y fácil de usar

<style>
body {
background: url(image.jpg);
background-size:100%;
background-repeat: no-repeat;
width: 100%;
}
</style>

avatar de usuario
RiggsFolly

Prueba esto:

body {
  background-image:url(img/background.jpg);
  background-repeat: no-repeat;
  min-height: 679px;
  background-size: cover;
}

¿Ha sido útil esta solución?