+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: Początkujący webmaster (https://www.webmastertalk.pl/forum-poczatkujacy-webmaster)
+--- Wątek: Gradient na całą stronę (/thread-gradient-na-cala-strone)
Gradient na całą stronę - fearnot - 07-09-2010
Witam serdecznie
Mam takie pytanko. Jak zrobić by gradient stworzony za pomocą CSS3 rozciągał się-niezależnie od zawartości-od początku do końca ekranu? W tej chwili, gdy ustawię odpowiedni gradient, ten kończy się na ostatnim divie i zaczyna od nowa pod spodem i powtarza do samego końca ekranu.
Przykład;
Kod:
body {
background:#11314d;
background:-moz-linear-gradient(top, #144470 0%, #1c4c78 25%, #11314d 60%);
}Pozdrawiam
Krzysiek
RE: Gradient na całą stronę - Dhofca - 07-09-2010
Zrób sobie diva na wysokość i szerokość całej strony i jemu nadaj gradient. Sprawdzałem, działa.
Kod:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<style>
body {
margin: 0;
padding:0;
}
#whole {
width: 100%;
height:100%;
background:#11314d;
background: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.54, rgb(50,82,58)),
color-stop(0.69, rgb(51,202,89)),
color-stop(0.91, rgb(77,243,116))
);
background: -moz-linear-gradient(
center bottom,
rgb(50,82,58) 54%,
rgb(51,202,89) 69%,
rgb(77,243,116) 91%
);
}
</style>
</head>
<body>
<div id="whole"></div>
</body>
</html>