GoldenLine
Zaloguj się

konto usunięte

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?

Link do wypowiedziLink

konto usunięte

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
Link do wypowiedziLink
Tobiasz Glazar

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
Link do wypowiedziLink
Łukasz Stępa

Łukasz Stępa Front-End developer

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

Albo responsive image. Poniżej przykład.

http://filamentgroup.com/examples/responsive-images/
Link do wypowiedziLink
Raphael Brick

Raphael Brick Vince in bono
malum...

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

polecam jquery i bgStretcher

efekt np taki : http://kasjopeja.pl
Link do wypowiedziLink

konto usunięte

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

Dzięki wszystkim za odpowiedzi i dobre rady.

@Rafał: genialne, o to mi chodziło :)
Link do wypowiedziLink

konto usunięte

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

nie ma to jak wsparcie :)
Link do wypowiedziLink

konto usunięte

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

Dobre zestawienie kilku technik - http://css-tricks.com/3458-perfect-full-page-backgroun...
Link do wypowiedziLink
Łukasz Stępa

Łukasz Stępa Front-End developer

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.
Link do wypowiedziLink
« Wróć do tematów
Odpowiedz

Podobne tematy





Wyślij zaproszenie do
Anuluj