Responsive CSS-Hintergrundbilder

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;

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

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

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

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

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.

Nur zwei Codezeilen, es funktioniert.

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

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

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