Responsywne obrazy tła css

195

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;
}
jochemke
źródło
7
Spójrz na ten link, może to jest to, czego szukasz? css-tricks.com/perfect-full-page-background-image
Christofer Vilander
Wydaje mi się, że to rozwiązanie, które opublikował Christofer Vilander, jest lepszym rozwiązaniem niż wybrana odpowiedź.
CU3ED
Zastanawiasz się tylko, dlaczego witryna nie implementuje tej funkcji zmiany rozmiaru, o którą pytałeś, od lutego 2015 r.? Czy był z tym jakiś problem?
LegendLength

Odpowiedzi:

368

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.

Andrei Volgin
źródło
3
Czy można również automatycznie zmienić szerokość i pozwolić na ustalenie wysokości?
jochemke
3
Tak, możesz ustawić wysokość obrazu w pikselach i szerokość w procentach, ale obraz zostanie zniekształcony. To nie będzie ładnie wyglądać.
Andrei Volgin
2
Możesz użyć znacznie mniejszego obrazu, jeśli używasz formatu wektorowego: en.m.wikipedia.org/wiki/Scalable_Vector_Graphics
Andrei
9
Co? Nie ustawiając szerokości, wysokość do kontenera w ogóle nie wyświetli obrazu.
śnieg
3
(1) Pierwotne pytanie dotyczyło skalowania na podstawie rozmiaru okna przeglądarki. (2) Elementy takie jak divuzyskają własną wysokość z własnej zawartości lub zajmują dostępną przestrzeń w modelu Flexbox. Mówienie, że bez wyraźnej szerokości / wysokości kontener w ogóle się nie pokaże, jest niepoprawne. Oczywiście, jeśli chcesz wyświetlić pusty div z obrazem tła, będziesz musiał ustawić wysokość i ewentualnie szerokość, ale wtedy zobaczysz tylko część obrazu, chyba że proporcje są dokładnie takie same jak sam obraz.
Andrei Volgin
69

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;
Pnsadeghy
źródło
Przy rozmiarze ekranu 800x1280px obraz jest obcinany po prawej stronie przy pudełku. Wszystkie pozostałe rozmiary wydają się w porządku.
Mugé
52

Spróbuj tego :

background-image: url(_images/bg.png);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
Ashok Dey
źródło
33

CSS:

background-size: 100%;

To powinno wystarczyć! :)

Timothy Miller
źródło
27
To całkowicie zniekształci obraz na podstawie współczynnika kształtu okna przeglądarki. Nigdy tego nie rób.
Andrei Volgin,
8
Tylko na przyszłość, tak naprawdę nie będzie wyglądać źle. rozmiar tła: 100% 100%, ale zadeklarowanie tylko x jako 100% powstrzymuje go od okropnego wyglądu. Przypadek testowy: codepen.io/howlermiller/pen/syduB
Timothy Miller
1
nie będzie wyglądał na „zniekształcony”, ale rozciągnie obraz poza zamierzone proporcje, jeśli jest mniejszy niż pojemnik ...
Code Novitiate
1
Tak samo będzie z przyjętą odpowiedzią. OP nie zapytał o ten problem, tylko czy można go ładnie zmienić.
Timothy Miller
1
To rozwiązanie naprawiło mój problem. +1
JPeG
22

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/

lanan
źródło
kod w skrzypcach (używa frameworka) jest inny niż kod w odpowiedzi.
śnieg
14

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

Omar
źródło
13

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;
Piyush
źródło
9

użyłem

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

co działało naprawdę dobrze.

Ostrokrzew
źródło
To jest kod, którego potrzebowałem! Dzięki :)) Próbuję zrobić paralaksę na 100% ekranu, ale o wysokości 200 pikseli i potrzebuję tylko górnej części tła, ale zachowując proporcje całego obrazu.
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
źródło
6

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

użytkownik956584
źródło
4

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

Jack Sparrow
źródło
4

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.

Mubashar Abbas
źródło
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
źródło
3

Tylko dwa wiersze kodu, to działa.

#content {
  background-image: url('../images/bg.png');
  background-size: cover;
}
Rajkumar Bansal
źródło
2

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

lub

background-size:100%;
bsngr
źródło
0

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.

użytkownik3487225
źródło
0

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;
Runisis
źródło
0
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%)

44kksharma
źródło