11 odpowiedzi w tym temacie

[Tybusz]

Witam, chciałbym opisać tutaj jedną z najłatwiejszych i zarówno przydatnych rzeczy w CSS'ie. Jeśli więc twój obrazek nie jest duży i nie wypełnia całej strony mamy na to sposób. Wystarczy zastosować u siebie w pliku style.css takie oto coś:

body {
	background-attachment: fixed;
	background-color: 000000# ;
	background-image: url("image");
	background-position: center top;
	background-repeat: repeat;
}

Więc czas na legendę:

background-attachment: fixed; - Tego nie ruszamy.
background-color: #; - Jest to hex koloru uzupełniającego tło w przypadku za małego obrazka, kody można znaleźć na różnych stronach a nawet w programach graficznych.
background-image: url("image"); - Nasz obrazek, zamiast napisu image wklejamy link do naszego obrazka, przykładowo: background-image: url("http://cdn.windows7themes.net/wallpaper/battlefield-3-hd-wallpaper-1.jpg")
background-position: center top; - Jak sama nazwa mówi jest to pozycja obrazka, tego nie musimy ruszać jeżeli obrazek jest wypełniony na całą stronę( czyt. full hd ).
background-repeat: repeat; - By uzyskać efekt tego nie ruszamy.

Niestety nie mam jak pokazać wam efektu, ale ręczę, że powinno wszystko działać, pozdrawiam.

@down: Tak, ale to jakoś tak "ładniej" wygląda.

[Krzysztof Baraniak]

W sumie można to streścić w jednej linijce: background, ale ten sposób też jest dobry.

[ownede]

Użytkownik Tybusz dnia 10/12/2011 - 00:06 napisał

@down: Tak, ale to jakoś tak "ładniej" wygląda.

Przeglądarki to na pewno bardzo obchodzi
Optymalizuj CSS, co będzie jak będziesz miał ruch jak fejsbuk ?

[Krzysztof Baraniak]

Dokładnie tak, im mniej kodu tym mniej ładowania a im mniej ładowania tym mniejsze obciążenie serwera.

[Evil17]

Wszystko ok, ale nie polecam stosowania tapety jako tło strony, zazwyczaj długo się ono wczytuje i obciąża serwer co wiąże się z dodatkowymi kosztami w utrzymaniu. Jeżeli już tło graficzne to najczęściej jest ono rozciągnięte i jego wymiary to np. : "1px" x "500px".

[Krzysztof Baraniak]

Najlepszym rozwiązaniem jednak jest zwykły kolor RGB bo w ogóle nie obciąża serwera.

[Tybusz]

Użytkownik Evil17 dnia 10/12/2011 - 21:13 napisał

Wszystko ok, ale nie polecam stosowania tapety jako tło strony, zazwyczaj długo się ono wczytuje i obciąża serwer co wiąże się z dodatkowymi kosztami w utrzymaniu. Jeżeli już tło graficzne to najczęściej jest ono rozciągnięte i jego wymiary to np. : "1px" x "500px".

Nie każdy utrzymuje swoją stronę na darmowym hostingu rodem z cba, ja na przykład cieszę się średnim pakietem w ovh.

Użytkownik Krzysztof Baraniak dnia 10/12/2011 - 21:16 napisał

Najlepszym rozwiązaniem jednak jest zwykły kolor RGB bo w ogóle nie obciąża serwera.

Zgadzam się z tym, lecz zazwyczaj psuję on estetykę strony, jeżeli styl nie jest do tego koloru przystosowany( nie chodzi o kolorystykę ), lecz rozmawiamy tutaj właśnie o tle zamiast koloru. Mi tam nigdy strona się nie zawieszała, jak ktoś ma wolne łącze to niestety, ale to jego problem, może pora zablokować wczytywanie obrazków czy coś w tym stylu?

[Krzysztof Baraniak]

Miałem na myśli osoby które korzystają właśnie z wolnych hostingów. Gdybym w websitehelp.pl dał na tło jakąś wielką grafikę to serwer w ogóle by tego nie odczuł, gorzej z użytkownikami o słabym łączu.

[Tybusz]

Wtedy zaś istnieje wtyczka do różnych przeglądarek, która pierwotnie zwie się ADBlock + i pozwala zablokować te tło, gorzej z laikami, którzy nie wiedzą jak obsługiwać przeglądarkę.

[Krzysztof Baraniak]

Tylko po co utrudniać osobom z wolnym łączem korzystanie z internetu. Pozostaje więc opcja małych, powtarzających się grafik.

[Morales]

Użytkownik Evil17 dnia 10/12/2011 - 21:13 napisał

Wszystko ok, ale nie polecam stosowania tapety jako tło strony, zazwyczaj długo się ono wczytuje i obciąża serwer co wiąże się z dodatkowymi kosztami w utrzymaniu. Jeżeli już tło graficzne to najczęściej jest ono rozciągnięte i jego wymiary to np. : "1px" x "500px".

Jak się dobrze zomptymalizuje obrazek to jest ładnie. Wystarczy zrobić lekko gorszą jakość i zapisać w .jpg, a nie .png i będzie gites.

[Kamil Oniszczuk]

Cytat

background-image: url("image"); - Nasz obrazek, zamiast napisu image wklejamy link do naszego obrazka, przykładowo: background-image: url("http://cdn.windows7themes.net/wallpaper/battlefield-3-hd-wallpaper-1.jpg")

Zdanie to brzmi jakbyś twierdził iż jako tło nie można dać pliku graficznego na tym samym serwerze.