Responsive CSS-Hintergrundbilder

195

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;
}
jochemke
quelle
7
Schauen Sie sich diesen Link an, könnte es das sein, wonach Sie suchen? css-tricks.com/perfect-full-page-background-image
Christofer Vilander
Ich denke, diese Lösung, die Christofer Vilander veröffentlicht hat, ist eine bessere Lösung als die gewählte Antwort.
CU3ED
Sie fragen sich nur, warum die Website diese von Ihnen angefragte Größenänderungsfunktion ab Februar 2015 nicht implementiert? Gab es ein Problem damit?
LegendLength

Antworten:

366

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.

Andrei Volgin
quelle
3
Ist es auch möglich, die Breite automatisch zu ändern und die Höhe festzulegen?
Jochemke
3
Ja, Sie können die Höhe des Bildes in Pixel und die Breite in Prozent festlegen, aber das Bild wird verzerrt. Es wird nicht schön aussehen.
Andrei Volgin
2
Sie können ein viel kleineres Bild verwenden, wenn Sie ein Vektorformat verwenden: en.m.wikipedia.org/wiki/Scalable_Vector_Graphics
Andrei Volgin
9
Was? Wenn Sie die Breite und Höhe des Containers nicht einstellen, wird das Bild überhaupt nicht angezeigt.
Schnee
3
(1) Die ursprüngliche Frage betraf die Skalierung basierend auf der Größe eines Browserfensters. (2) Elemente wie diverhalten ihre eigene Höhe aus ihrem eigenen Inhalt oder nehmen verfügbaren Platz in einem Flexbox-Modell ein. Zu sagen, dass der Container ohne explizite Breite / Höhe überhaupt nicht angezeigt wird, ist falsch. Wenn Sie ein leeres Div mit einem Hintergrundbild anzeigen möchten, müssen Sie natürlich die Höhe und möglicherweise die Breite festlegen. Dann wird jedoch nur ein Teil eines Bildes angezeigt, es sei denn, das Seitenverhältnis ist genau das gleiche wie ab das Bild selbst.
Andrei Volgin
69

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;
Pnsadeghy
quelle
Bei einer Bildschirmgröße von 800 x 1280 Pixel wird das Bild auf der rechten Seite von der Box abgeschnitten. Alle anderen Größen scheinen in Ordnung zu sein.
Mugé
52

Versuche dies :

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

CSS:

background-size: 100%;

Das sollte den Trick machen! :) :)

Timothy Miller
quelle
27
Dadurch wird das Bild basierend auf dem Seitenverhältnis des Browserfensters vollständig verzerrt. Mache das niemals.
Andrei Volgin
8
Nur zum späteren Nachschlagen wird es auf diese Weise tatsächlich nicht schlecht aussehen. Hintergrundgröße: 100% 100% würde, aber wenn Sie nur das x als 100% deklarieren, sieht es nicht schrecklich aus. Testfall: codepen.io/howlermiller/pen/syduB
Timothy Miller
1
es wird nicht "verzerrt" aussehen, aber es wird das Bild über seine beabsichtigten Proportionen hinaus strecken, wenn es kleiner als der Container ist ...
Code Novitiate
1
So wird die akzeptierte Antwort. Das OP fragte nicht nach diesem Problem, nur ob es möglich war, die Größe zu ändern.
Timothy Miller
1
Diese Lösung hat mein Problem behoben. +1
JPeG
22

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/

Lanan
quelle
Der Code in der Geige (verwendet ein Framework) unterscheidet sich vom Code in der Antwort.
Schnee
14

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

Omar
quelle
13

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;
Piyush
quelle
9

ich benutzte

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

das hat wirklich gut funktioniert.

Stechpalme
quelle
Das ist der Code, den ich brauchte! Danke :)) Ich versuche Parallaxe auf 100% des Bildschirms, aber 200px Höhe zu machen und ich brauche nur den oberen Teil des Hintergrunds, aber die Proportionen des gesamten Bildes beizubehalten.
thinklinux
8
#container {
    background-image: url("../images/layout/bg.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 100vh;
    margin: 3px auto 0;
    position: relative;
}
amit bende
quelle
6

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

user956584
quelle
4

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

Jack Sparrow
quelle
4

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.

Mubashar Abbas
quelle
3
    <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>
Indranil
quelle
3

Nur zwei Codezeilen, es funktioniert.

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

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");
    }
OVNI
quelle
2
background:url("img/content-bg.jpg") no-repeat;
background-position:center; 
background-size:cover;

oder

background-size:100%;
bsngr
quelle
0

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.

user3487225
quelle
0

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;
Runsis
quelle
0
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.

44kksharma
quelle