it-swarm.com.de

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 ansprechend gestalten. Leider habe ich wirklich keine Ahnung, wie ich das machen soll, abgesehen von einer Sache, die mir einfällt, aber es ist eine ziemliche Umgehung. Erstellen mehrerer Bilder und anschließende Verwendung der CSS-Bildschirmgröße zum Ändern der Bilder. Ich möchte jedoch wissen, ob es einen praktischeren Weg gibt, um dies zu erreichen.

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

link: g-floors.e

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;
}
181
jochemke

Wenn Sie dasselbe Bild basierend auf der Größe des Browserfensters skalieren möchten:

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 vorhergehende 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 ggf. Breite/Höhe/Ränder festlegen.

350
Andrei Volgin

durch diesen Code wird Ihr Hintergrundbild zentriert und fixiert die Größe unabhängig von der Änderung Ihrer Div-Größe. 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 die 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;
66
Pnsadeghy

Versuche dies :

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

CSS:

background-size: 100%;

Das sollte den Trick machen! :)

32
Timothy Miller

Hier ist sass mixin für ein ansprechendes Hintergrundbild, das ich verwende. Es funktioniert für jedes block Element. Natürlich funktioniert das auch mit einfachem CSS. Sie müssen padding nur manuell 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/

20
lanan

Das ist ganz einfach =)

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

14
Omar

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;
13
Piyush

Ich benutzte

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

das hat wirklich gut funktioniert.

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

Responsive Website durch Hinzufügen von Auffüllung in das untere Bild Höhe/Breite x 100 = Auffüllung-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 Hintergrundgröße von Firefox anzupassen Strg + M, um das magische, nette Skript zu sehen, das ich für das Beste halte:

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

5
user956584

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 dem folgenden Bildschirmgrößensimulator testen: http://www.infobyip.com/testwebsiteresolution.php

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

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

Genießen :)

4
JackSparrow

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;

Dadurch wird das gesamte Bild unabhängig von der Bildschirmgröße angezeigt.

4
Mubashar Abbas

Nur zwei Codezeilen, es funktioniert.

#content {
  background-image: url('../images/bg.png');
  background-size: cover;
}
3
Rajkumar Bansal
    <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>
3
Indranil

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

oder

background-size:100%;
1
bsngr

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

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.

0
user3487225