Mam problem ze stronami one-page. Strona główna (krótka, sam wstęp i spis) zawiera podstrony uzupełniane o nowe treści, które robią się coraz dłuższe. Na razie chciałbym zostawić taką architekturę. Natomiast problem jest z tłem. Tło się automatycznie skaluje i im dłuższa strona tym bardziej jest rozmazane i bez sensu. Tło jest zdjęciem, nie teksturą. Mam więc przygotowane różnej szerokości tła (po prostu wycięte wąskie paski z głównego tła) jako osobne pliki. Mogę je podstawiać w zależności od rozmiaru ekranu oglądającego za pomocą przykładowego @media only screen and (min-width: 301px) and (max-width: 480px) ale to nie rozwiązuje problemu bo podstrony są różnej długości (np. od 3 wysokości przeglądarki do 30 wysokości).
Pytanie - czy można jakoś zmierzyć "wysokość" generowanej strony i na tej podstawie podstawić węższe lub jeszcze węższe tło?
I drugie pytanie - jeśli pierwsze jest niemożliwe to jak można inaczej z tego wybrnąć? Chodzi o to aby tło nie straszyło pikselizacją przy tak dużym przeskalowaniu jak jest obecnie.
background
Tygrys Biały napisał(a):
Mam problem ze stronami one-page. Strona główna (krótka, sam wstęp i spis) zawiera podstrony uzupełniane o nowe treści, które robią się coraz dłuższe. Na razie chciałbym zostawić taką architekturę. Natomiast problem jest z tłem. Tło się automatycznie skaluje i im dłuższa strona tym bardziej jest rozmazane i bez sensu.
a próbowałeś background-size? https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
Tło jest zdjęciem, nie teksturą. Mam więc przygotowane różnej szerokości tła (po prostu wycięte wąskie paski z głównego tła) jako osobne pliki. Mogę je podstawiać w zależności od rozmiaru ekranu oglądającego za pomocą przykładowego
@media only screen and (min-width: 301px) and (max-width: 480px)ale to nie rozwiązuje problemu bo podstrony są różnej długości (np. od 3 wysokości przeglądarki do 30 wysokości).
Swoją drogą po co się tak męczysz w 2024 roku? To już nie te czasy, żeby każda strona miała kolorowe tło. Chyba, że chcesz się wyróżnić i zrobić stronę w retro stylistyce przełomu wieków.
Ew. jeśli to tło faktycznie robiłoby dobry efekt i dobrze pasowałoby do strony. Ale patrząc na tego screena raczej widzę coś wrzuconego na siłę.
a może tło niech stoi w miejscu, wtedy długość strony nie ma wielkiego znaczenia, wizualnie to też może być całkiem spoko, a tło będzie ciągle takiego samego rozmiaru
Wszystko można, ale w końcu przerost będzie kodu nad tym co ma i jak działać.
Wybierz obrazek taki z 100x100 z fasadowym wzorem czy czymś i stosuj.
Kiedyś na takim typie strony co masz zrobiłem znowu grafikę w gimp 1px na 3500px (lekka bo wąska) z gradientem. Obecnie wszystkie tła już dawno stosuję jako css - tam nie ma grafik. A gradient może być też wywołany przez css.
Także zalecam porzucenie o ile to możliwe grafik na rozwiązania w css bez obrazków. To lżejsze, szybsze i mniej problematyczne.