toda - insertar imagen css

Imágenes de fondo css receptivas

Question

Tengo un sitio web (g-floors.eu) y quiero hacer que el fondo (en css he definido una imagen-bg para el contenido) también responda. Desafortunadamente, realmente no tengo ni idea de cómo hacer esto, excepto por una cosa que se me ocurre, pero es una buena solución. Creando múltiples imágenes y luego usando el tamaño de la pantalla CSS para cambiar las imágenes, pero quiero saber si hay una forma más práctica para lograr esto.

Básicamente, lo que quiero lograr es que la imagen (con la marca de agua ''G'') cambie de tamaño automáticamente sin mostrar menos de la imagen. Si es posible, por supuesto

enlace: g-floors.eu

Código que tengo hasta ahora (parte de contenido)

#content   
{       
    background-image: url(''../images/bg.png'');        
    background-repeat: no-repeat;        
    position: relative;        
    width: 85%;            
    height: 610px;       
    margin-left: auto;      
    margin-right: auto;       
}   

Answer 1

Este es uno fácil =)

body {
    background-image: url(http://domains.com/photo.jpeg);
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

Eche un vistazo a la demo de jsFiddle

Answer 2

Adaptable para la relación cuadrada con jQuery

var Height = $(window).height();
var Width = $(window).width();
var HW = Width/Height;

if(HW<1){
      $(".background").css("background-size","auto 100%");
    }
    else if(HW>1){
      $(".background").css("background-size","100% auto");
    }

Answer 3

Aquí está la mejor manera que tengo.

#content   {
    background-image:url(''smiley.gif'');
    background-repeat:no-repeat;
    background-size:cover;
}

Compruebe en las w3schools

Más opciones disponibles

background-size: auto|length|cover|contain|initial|inherit;

Answer 4

Aquí está sass mixin para la imagen de fondo sensible que uso. Funciona para cualquier elemento de block . Por supuesto, lo mismo puede funcionar en CSS simple, solo tendrá que calcular el padding manualmente.

@mixin responsive-bg-image($image-width, $image-height) {
  background-size: 100%;
  height: 0;
  padding-bottom: percentage($image-height / $image-width);
  display: block;
}


.my-element {
  background: url("images/my-image.png") no-repeat;

  // substitute for your image dimensions
  @include responsive-bg-image(204, 81);
}

Ejemplo http://jsfiddle.net/XbEdW/1/

Answer 5

CSS:

background-size: 100%;

¡Eso debería hacer el truco! :)

Answer 6

Creo que la mejor manera de hacerlo es esta:

body {
    font-family: Arial,Verdana,sans-serif;
    background:url("/images/image.jpg") no-repeat fixed bottom right transparent;
}

De esta manera, no hay necesidad de hacer nada más y es bastante simple.

Al menos, funciona para mí.

Espero que ayude.

Answer 7

Prueba esto :

background-image: url(_images/bg.png);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;

Answer 8

Puedes usar esto He probado y funciona correctamente al 100%:

background-image:url(''../images/bg.png''); 
background-repeat:no-repeat;
background-size:100%;
background-position:center;

Puede probar su sitio web con capacidad de respuesta en este simulador de tamaño de pantalla: http://www.infobyip.com/testwebsiteresolution.php

Borre su caché cada vez que realice cambios y preferiría usar Firefox para probarlo.

Si desea utilizar un formulario de imagen de otro sitio / URL y no como: background-image:url(''../images/bg.png''); // Esta estructura es para usar la imagen de su propio servidor alojado. Luego use esto: background-image: url(http://173.254.28.15/~brettedm/wp-content/uploads/Brett-Edmonds-Photography-14.jpg) ;

Disfruta :)

Answer 9

Si desea que la imagen completa se muestre independientemente de la relación de aspecto, intente esto:

background-image:url(''../images/bg.png'');
background-repeat:no-repeat;
background-size:100% 100%;
background-position:center;

Esto mostrará la imagen completa sin importar el tamaño de la pantalla.

Answer 10

Si desea que la misma imagen se escale según el tamaño de la ventana del navegador:

background-image:url(''../images/bg.png'');
background-repeat:no-repeat;
background-size:contain;
background-position:center;

No establezca ancho, alto o márgenes.

Answer 11

Sitio web receptivo al agregar relleno en la altura / ancho de la imagen inferior x 100 = relleno% inferior:

http://www.outsidethebracket.com/responsive-web-design-fluid-background-images/

Método más complicado:

http://voormedia.com/blog/2012/11/responsive-background-images-with-fixed-or-fluid-aspect-ratios

Intenta redimensionar el fondo eq Firefox Ctrl + M para ver el script mágico, creo que es el mejor:

http://www.minimit.com/demos/fullscreen-backgrounds-with-centered-content

Answer 12

Solo dos líneas de código, funciona.

#content {
  background-image: url(''../images/bg.png'');
  background-size: cover;
}

Answer 13

con este código, su imagen de fondo se centra y la repara según el tamaño de su div. cambia, es bueno para tamaños pequeños, grandes y normales, lo mejor para todos, lo uso para mis proyectos donde el tamaño de fondo o el tamaño de div pueden cambiar

background-repeat:no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
background-position:center;

Answer 14

solía

#content {
  width: 100%;
  height: 500px;
  background-size: cover;
  background-position: center top;
}

que funcionó muy bien

Answer 15

    <style> 
         * {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

#res_img {
  background: url("https://s15.postimg.org/ve2qzi01n/image_slider_1.jpg");
  width: 100%;
  height: 500px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  border: 1px solid red;
}

@media screen and (min-width:300px) and (max-width:500px) {
  #res_img {
    width: 100%;
    height: 200px;
  }
}

    </style>

<div id="res_img">
</div>

Answer 16

#container {
    background-image: url("../images/layout/bg.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 100vh;
    margin: 3px auto 0;
    position: relative;
}

Answer 17

background:url("img/content-bg.jpg") no-repeat;
background-position:center; 
background-size:cover;

o

background-size:100%;