Advertisement
Dołącz do grupy

Stwórz profil

Musisz wpisać swoje imię
Musisz wpisać swoje nazwisko
Musisz wpisać poprawny e-mail
Musisz wpisać hasło (min. 8 znaków)
Musisz zaakceptować regulamin

Rafał Wilmanowicz webCzarodziej

Temat: "rozciągalne" zdjęcie w tle strony?

Witam,
jakiś czas temu realizowałem dość duży i niestandardowy projekt, w którym tłem strony było zdjęcie (dodam, że inne na każdej podstronie, bo tematyka każdej podstrony była inna, ale nie ważne...). Problem, jaki się pojawił to to, że strona ze zdjęciem w tle w rozdzielczości HD wyglądała super na monitorach HD, ale na mniejszych ekranach już robiła się "kiszka" bo widoczny był tylko fragment tego dużego tła. W drugą stronę - wrzucenie mniejszego tła wyglądało super na ekranach powiedzmy do ~1300 px szerokości max, a na ekranach HD było widoczne "malutkie" tło i kolor wypełnienia dookoła tego tła, które wyglądało w tym przypadku jak kiczowate zdjęcie. Opcja z "wygradientowaniem" krawędzi zdjęcia, by zlewała się z kolorem tła nie była też najlepszym wyjściem.

Dawno, dawno temu... kiedy jeszcze używało się tabelek jako konstrukcji szkieletu strony można było ustawić width i height na 100% + tło do tego.

Czy w CSS istnieje możliwość dopasowania tła do rozmiaru ekranu?
Wiem, że zawsze można wspomóc się innymi technologiami i wykryć sobie rozmiar oraz załadować odpowiednie tło, ale chodzi mi o rozwiązanie stricte CSS'owe; czy istnieje coś takiego?

22.07.2011, 14:29
Link do wypowiedziLink | Cytuj

Michał Wachowski Freelancer na
zakręcie i
bazodanowiec z
bożej łaski

Temat: "rozciągalne" zdjęcie w tle strony?



<!DOCTYPE html> 

<html>

<head>

<style>

	#bg { position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden; }

	#bg img { position: absolute; top: 0; left: 0; height: 100%; }



	#content { position: relative; width: 100px; height: 100px; margin: 100px; background: #f00; }

</style>

</head>

<body>



<div id="bg">

	<img src="obra.zek" >

</div>



<div id="content">

	aaaaaaaaa

</div>



</body>

</html>


Tylko skalowanie zdjęcia spada na przeglądarkę.
Idealną sytuacją by było, gdybyś serwował zdjęcie w zbliżonym rozmiarze do okna przeglądarki.Michał Wachowski edytował(a) ten post dnia 22.07.11 o godzinie 15:03
22.07.2011, 15:02
Link do wypowiedziLink | Cytuj

Tobiasz Glazar Front-End Developer

Temat: "rozciągalne" zdjęcie w tle strony?

Albo background-size z CSS3:
https://developer.mozilla.org/en/CSS/background-size

Działa we wszystkich normalnych przeglądarkach i od IE9+
http://caniuse.com/#search=background-size

A dla starszych IE możesz użyć filtra:

-ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='linkToImage.jpg', sizingMethod='scale')"; /*IE8+*/

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='linkToImage.jpg', sizingMethod='scale'); /*IE6-IE7*/
Tobiasz Glazar edytował(a) ten post dnia 22.07.11 o godzinie 15:32
22.07.2011, 15:22
Link do wypowiedziLink | Cytuj

Łukasz Stępa wszelakopojęty
html/css

Temat: "rozciągalne" zdjęcie w tle strony?

Albo responsive image. Poniżej przykład.

http://filamentgroup.com/examples/responsive-images/
22.07.2011, 15:53
Link do wypowiedziLink | Cytuj

Rafał Cegiełka Vince in bono
malum...

Temat: "rozciągalne" zdjęcie w tle strony?

polecam jquery i bgStretcher

efekt np taki : http://kasjopeja.pl
22.07.2011, 23:49
Link do wypowiedziLink | Cytuj

Rafał Wilmanowicz webCzarodziej

Temat: "rozciągalne" zdjęcie w tle strony?

Dzięki wszystkim za odpowiedzi i dobre rady.

@Rafał: genialne, o to mi chodziło :)
23.07.2011, 21:20
Link do wypowiedziLink | Cytuj

Marcin Sipowicz właściciel,
MultiBroker

Temat: "rozciągalne" zdjęcie w tle strony?

nie ma to jak wsparcie :)
27.07.2011, 22:14
Link do wypowiedziLink | Cytuj

Waldek Mazurek Front-end Developer

Temat: "rozciągalne" zdjęcie w tle strony?

Dobre zestawienie kilku technik - http://css-tricks.com/3458-perfect-full-page-backgroun...
28.07.2011, 09:15
Link do wypowiedziLink | Cytuj

Łukasz Stępa wszelakopojęty
html/css

Temat: "rozciągalne" zdjęcie w tle strony?

Jeszcze jedna technika chyba najłatwiejsza i cssowa:

zdjęcie jako <img src> np po znaczniku <body>, i dla niego ustawiamy:

img {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
min-height: 100%;
}

Mankamentem tej techniki jest to, że scrollowanie strony wygląda w IE i Operze dosyć mizernie.
1.09.2011, 14:11
Link do wypowiedziLink | Cytuj
« Wróć do tematów
Odpowiedz
Dołącz do grupy



Wyślij zaproszenie do

Anuluj