Immagini di sfondo CSS reattive

Ho un sito Web (g-floors.eu) e voglio rendere lo sfondo (in CSS ho definito un'immagine bg per il contenuto) anche reattivo. Sfortunatamente non ho davvero idea di come farlo, tranne per una cosa che mi viene in mente ma è piuttosto una soluzione alternativa. Creare più immagini e quindi utilizzare le dimensioni dello schermo css per modificare le immagini, ma voglio sapere se esiste un modo più pratico per raggiungere questo obiettivo.

Fondamentalmente quello che voglio ottenere è che l'immagine (con la filigrana 'G') si ridimensiona automaticamente senza visualizzare meno dell'immagine. Se è possibile, ovviamente

link: g-floors.eu

Codice che ho finora (parte del contenuto)

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

Se si desidera ridimensionare la stessa immagine in base alle dimensioni della finestra del browser:

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

Non impostare larghezza, altezza o margini.

EDIT: la riga precedente su non impostare larghezza, altezza o margine si riferisce alla domanda originale di OP sul ridimensionamento con la dimensione della finestra. In altri casi d'uso, potresti voler impostare larghezza / altezza / margini, se necessario.

con questo codice la tua immagine di sfondo diventa centrale e aggiusta la dimensione qualunque sia la tua dimensione div

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

Prova questo :

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

CSS:

background-size: 100%;

Questo dovrebbe fare il trucco! :)

Ecco un mix sass per un'immagine di sfondo reattiva che uso. Funziona con qualsiasi blockelemento. Ovviamente lo stesso può funzionare in CSS semplice, dovrai solo calcolare paddingmanualmente.

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

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

Questo è facile =)

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

Dai un'occhiata alla demo di jsFiddle

Ecco il modo migliore che ho ottenuto.

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

Controlla su w3schools

Altre opzioni disponibili

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

ero solito

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

che ha funzionato davvero bene.

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

Sito Web reattivo aggiungendo l'imbottitura in altezza / larghezza dell'immagine in basso x 100 = padding-bottom%:

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

Metodo più complicato:

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

Prova a ridimensionare lo sfondo eq Firefox Ctrl + M per vedere un bel copione magico penso che sia il migliore:

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

Puoi usare questo. Ho testato e funziona correttamente al 100%:

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

Puoi testare il tuo sito Web in modo reattivo con questo simulatore delle dimensioni dello schermo: http://www.infobyip.com/testwebsiteresolution.php

Svuota la cache ogni volta che apporti modifiche e preferirei utilizzare Firefox per testarlo.

Se si desidera utilizzare un'immagine da un altro sito / URL e non come: background-image:url('../images/bg.png'); // Questa struttura consente di utilizzare l'immagine dal proprio server ospitato. Quindi utilizzare in questo modo: background-image: url(http://173.254.28.15/~brettedm/wp-content/uploads/Brett-Edmonds-Photography-14.jpg) ;

Godere :)

Se si desidera mostrare l'intera immagine indipendentemente dalle proporzioni, provare questo:

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

Questo mostrerà l'intera immagine indipendentemente dalle dimensioni dello schermo.

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

Funziona solo con due righe di codice.

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

Adattivo per rapporto quadrato 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");
    }

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

o

background-size:100%;

Penso che il modo migliore per farlo sia questo:

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

In questo modo non è necessario fare altro ed è abbastanza semplice.

Almeno, funziona per me.

Spero possa essere d'aiuto.

Prova ad usare background-sizema usando DUE ARGOMENTI uno per la larghezza e l'altro per l'altezza

background-image:url('../images/bg.png'); 
background-repeat:no-repeat;
background-size: 100% 100%; // Here the first argument will be the width 
// and the second will be the height.
background-position:center;

background: url(/static/media/group3x.6bb50026.jpg);
background-size: contain;
background-repeat: no-repeat;
background-position: top;

la proprietà position può essere utilizzata per allineare il fondo e il centro in base alle proprie esigenze e la dimensione dello sfondo può essere utilizzata per il ritaglio centrale (copertina) o l'immagine completa (contenere o 100%)