+- 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: Jak rozciągnąc obrazek tła na całe okno? [css] (/thread-jak-rozciagnac-obrazek-tla-na-cale-okno-css)
Jak rozciągnąc obrazek tła na całe okno? [css] - grevious - 16-11-2009
Witam!
Mam spory problem, jak rozciągnąć obrazek ta przy pomocy CSS?
RE: Jak rozciągnąc obrazek tła na całe okno? [css] - virus4 - 16-11-2009
Może więcej szczegółów. Domyślam się, że chodzi Ci o coś takiego:
Kod:
<div id="obrazek">
<img src="ścieżka do obrazka" alt="opis obrazka gdy się nie wyświetli"/>
</div>Kod:
#obrazek {
width: szerokość w %;
height: wysokość w %;
}Tylko wtedy to ten obrazek straci na jakości.
RE: Jak rozciągnąc obrazek tła na całe okno? [css] - grevious - 16-11-2009
wiesz, mam tło gradientowe z generatora http://tools.dynamicdrive.com/gradient/, i chce to jakoś dobrze rozciągnąc ale tak, żeby na monitorach różnej rozdzielczości wygłądało dobrze, spróbuję tego co mi pokazałeś
Nie wiem co robie źle?
Kod:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=windows-1250" />
<title>Konkurs plastyczny</title>
<link rel="stylesheet" type="text/css" href="style3.css" />
<link rel="Shortcut icon" href="ikonka.bmp" />
</head>
<body>
<div id="obrazek">
<img src="gradient.php.jpg" alt="opis obrazka gdy się nie wyświetli"/>
</div>
</body>Kod:
#obrazek {
width: 100%;
height: 100%;
}RE: Jak rozciągnąc obrazek tła na całe okno? [css] - virus4 - 16-11-2009
Od kiedy obrazki mają najpierw rozszerzenie PHP a potem JPG? Po drugie po co korzystasz z jakichś głupich internetowych edytorów? Nie lepiej ściągnąć GIMP'a i w nim zrobić obrazek przy użyciu narzędzia "Gradient"?
Po za tym przyszedł mi do głowy inny sposób (tylko wtedy kiedy obrazek może się powtarzać tzn. nie ma na sobie jakichś głupich wzorków itd.) Możesz zrobić coś takiego tylko przy użyciu CSS.
Kod:
<div id="obrazek">
jakiś tekst, który ma się znaleźć w tym divie
</div>Kod:
#obrazek {
background: url(ścieżka do obrazka, który ma być tłem) rodzaj powtarzania;
}a) repeat-x (powtarzanie w poziomie)
b) repeat-y (powtarzanie w pionie)
c) repeat (powtarzanie i w poziomie i w pionie)
Można jeszcze zrobić tak, że robisz obrazek o średniej wysokości Twojej strony (załóżmy 1000px) i dajesz w CSS
Kod:
#obrazek {
background: ostatni kolor z gradientu url(ściezka do obrazka gradientu) repeat-x;RE: Jak rozciągnąc obrazek tła na całe okno? [css] - grevious - 16-11-2009
Tak, tylko że on ma miec wzorek, na to to ja już dawno wpadłem.
RE: Jak rozciągnąc obrazek tła na całe okno? [css] - virus4 - 16-11-2009
No to zamiast "gradient.php.jpg" powinny być "gradient.jpg" co nie?
RE: Jak rozciągnąc obrazek tła na całe okno? [css] - grevious - 16-11-2009
zmieniłem to ale nie to sprawiło że jest OK, wydłużyłem cienki kawałek grafiki i powtórzyłem w poziomie
zawsze jest jakieś wyjście, trzeba tylko je znaleźć// rodi
Ehhh... Ludzie... Najpierw zainwestujcie w słowniki!