Responsive CSS-Hintergrundbilder

Ich habe eine Website (g-floors.eu) und möchte den Hintergrund (in CSS habe ich ein BG-Bild für den Inhalt definiert) auch reaktionsfähig machen. Leider habe ich wirklich keine Ahnung, wie ich das machen soll, außer einer Sache, die mir einfällt, aber es ist eine ziemliche Problemumgehung. Erstellen Sie mehrere Bilder und verwenden Sie dann die CSS-Bildschirmgröße, um die Bilder zu ändern. Ich möchte jedoch wissen, ob es einen praktischeren Weg gibt, um dies zu erreichen.

Grundsätzlich möchte ich erreichen, dass die Größe des Bilds (mit dem Wasserzeichen 'G') automatisch geändert wird, ohne dass weniger Bilder angezeigt werden. Wenn es natürlich möglich ist

Link: g-floors.eu

Code, den ich bisher habe (Inhaltsteil)

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

Wenn Sie möchten, dass dasselbe Bild basierend auf der Größe des Browserfensters skaliert wird:

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

Stellen Sie keine Breite, Höhe oder Ränder ein.

BEARBEITEN: Die vorherige Zeile zum Nichteinstellen von Breite, Höhe oder Rand bezieht sich auf die ursprüngliche Frage von OP zur Skalierung mit der Fenstergröße. In anderen Anwendungsfällen möchten Sie möglicherweise bei Bedarf Breite / Höhe / Ränder festlegen.

Durch diesen Code wird Ihr Hintergrundbild in die Mitte verschoben und die Größe unabhängig von der Änderung Ihrer Div-Größe festgelegt. Gut für kleine, große und normale Größen. Am besten für alle. Ich verwende es für meine Projekte, bei denen sich meine Hintergrundgröße oder Div-Größe ändern kann

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

Versuche dies :

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

CSS:

background-size: 100%;

Das sollte den Trick machen! :) :)

Hier ist ein Sass-Mixin für ein ansprechendes Hintergrundbild, das ich verwende. Es funktioniert für jedes blockElement. Natürlich kann das gleiche in einfachem CSS funktionieren, Sie müssen nur paddingmanuell berechnen .

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

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

Dies ist eine einfache =)

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

Schauen Sie sich die jsFiddle-Demo an

Hier ist der beste Weg, den ich bekommen habe.

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

Überprüfen Sie die w3schools

Weitere verfügbare Optionen

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

ich benutzte

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

das hat wirklich gut funktioniert.

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

Responsive Website durch Hinzufügen von Polsterung in Höhe / Breite des unteren Bilds x 100 = Polsterung unten%:

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

Kompliziertere Methode:

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

Versuchen Sie, die Größe des Hintergrunds von Firefox Ctrl + M zu ändern, um ein magisches Skript zu sehen, das ich für das beste halte:

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

Sie können dies verwenden. Ich habe getestet und es funktioniert 100% korrekt:

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

Sie können Ihre Website mit diesem Bildschirmgrößen-Simulator schnell reagieren: http://www.infobyip.com/testwebsiteresolution.php

Leeren Sie Ihren Cache jedes Mal, wenn Sie Änderungen vornehmen, und ich würde es vorziehen, Firefox zum Testen zu verwenden.

Wenn Sie ein Image von einer anderen Site / URL verwenden möchten und nicht mögen: background-image:url('../images/bg.png'); // Diese Struktur dient dazu, das Image von Ihrem eigenen gehosteten Server zu verwenden. Dann verwenden Sie wie folgt: background-image: url(http://173.254.28.15/~brettedm/wp-content/uploads/Brett-Edmonds-Photography-14.jpg) ;

Genießen :)

Wenn Sie möchten, dass das gesamte Bild unabhängig vom Seitenverhältnis angezeigt wird, versuchen Sie Folgendes:

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

Dies zeigt das gesamte Bild unabhängig von der Bildschirmgröße.

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

Nur zwei Codezeilen, es funktioniert.

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

Adaptiv für quadratisches Verhältnis mit 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;

oder

background-size:100%;

Ich denke, der beste Weg, dies zu tun, ist folgender:

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

Auf diese Weise müssen Sie nichts weiter tun und es ist ganz einfach.

Zumindest funktioniert es bei mir.

Ich hoffe, es hilft.

Versuchen Sie background-sizees mit ZWEI ARGUMENTEN, eines für die Breite und das andere für die Höhe

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;

Mit der Positionseigenschaft können Sie oben, unten und in der Mitte nach Bedarf ausrichten. Die Hintergrundgröße kann für den mittleren Zuschnitt (Cover) oder das Vollbild (enthalten oder 100%) verwendet werden.