Responsywne obrazy tła css

Mam stronę internetową (g-floors.eu) i chcę, aby tło (w css zdefiniowałem obraz bg dla treści) również było responsywne. Niestety tak naprawdę nie mam pojęcia, jak to zrobić, z wyjątkiem jednej rzeczy, o której mogę myśleć, ale jest to całkiem obejście. Tworzenie wielu obrazów, a następnie używanie rozmiaru ekranu css do zmiany obrazów, ale chcę wiedzieć, czy istnieje bardziej praktyczny sposób, aby to osiągnąć.

Zasadniczo chcę osiągnąć to, aby obraz (ze znakiem wodnym „G”) automatycznie zmieniał rozmiar bez wyświetlania mniejszej ilości obrazu. Jeśli to możliwe, oczywiście

link: g-floors.eu

Kod, który mam do tej pory (część zawartości)

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

Jeśli chcesz skalować ten sam obraz na podstawie rozmiaru okna przeglądarki:

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

Nie ustawiaj szerokości, wysokości ani marginesów.

EDYCJA: Poprzedni wiersz o braku ustawiania szerokości, wysokości lub marginesu odnosi się do pierwotnego pytania OP dotyczącego skalowania z rozmiarem okna. W innych przypadkach użytkowania możesz w razie potrzeby ustawić szerokość / wysokość / marginesy.

za pomocą tego kodu obraz tła przechodzi do środka i naprawia rozmiar niezależnie od zmiany rozmiaru div, dobry dla małych, dużych, normalnych rozmiarów, najlepszy dla wszystkich, używam go do moich projektów, w których mój rozmiar tła lub rozmiar div może się zmienić

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

Spróbuj tego :

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

CSS:

background-size: 100%;

To powinno wystarczyć! :)

Oto sass mixin dla responsywnego obrazu tła, którego używam. Działa dla każdego blockelementu. Oczywiście to samo może działać w zwykłym CSS, wystarczy obliczyć paddingręcznie.

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

Przykład http://jsfiddle.net/XbEdW/1/

To jest łatwe =)

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

Spójrz na demo jsFiddle

Oto najlepszy sposób, jaki mam.

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

Sprawdź w w3schools

Więcej dostępnych opcji

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

użyłem

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

co działało naprawdę dobrze.

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

Responsywna strona internetowa, dodając dopełnienie do dolnej krawędzi obrazu wysokość / szerokość x 100 = dopełnienie-dół%:

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

Bardziej skomplikowana metoda:

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

Spróbuj zmienić rozmiar tła eq Firefox Ctrl + M, aby zobaczyć magiczny fajny skrypt, moim zdaniem najlepszy:

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

Możesz tego użyć. Przetestowałem i działa w 100% poprawnie:

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

Możesz przetestować swoją stronę internetową z responsywnością w tym Symulatorze rozmiaru ekranu: http://www.infobyip.com/testwebsiteresolution.php

Wyczyść pamięć podręczną za każdym razem, gdy wprowadzasz zmiany, a ja wolę używać Firefoxa do jej testowania.

Jeśli chcesz użyć obrazu z innej witryny / adresu URL, a nie jak: background-image:url('../images/bg.png'); // Ta struktura służy do korzystania z obrazu z własnego hostowanego serwera. Następnie użyj takiego: background-image: url(http://173.254.28.15/~brettedm/wp-content/uploads/Brett-Edmonds-Photography-14.jpg) ;

Cieszyć się :)

Jeśli chcesz, aby cały obraz wyświetlał się niezależnie od proporcji, spróbuj tego:

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

Spowoduje to wyświetlenie całego obrazu bez względu na rozmiar ekranu.

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

Tylko dwa wiersze kodu, to działa.

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

Dostosowujący się do stosunku kwadratowego z 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;

lub

background-size:100%;

Myślę, że najlepszym sposobem na to jest:

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

W ten sposób nie trzeba nic więcej robić i jest to dość proste.

Przynajmniej działa dla mnie.

Mam nadzieję, że to pomoże.

Spróbuj użyć, background-sizeale używając DWÓCH ARGUMENTÓW. Jeden dla szerokości, a drugi dla wysokości

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;

Właściwość position może być używana do wyrównywania górnego dołu i środka zgodnie z potrzebami, a tła można używać do przycinania środka (okładki) lub pełnego obrazu (zawierającego lub 100%)