Witam wszystkich,

Mam ciekawy projekt do zrobienia z jeszcze ciekawszą zagwozdką. Być może
mnie jakieś otumanienie ogarnęło - tego nie wykluczam. Otóż tło strony WWW
(przypisane np. do body) jest dużo szersze od samej strony (w sensie DIVa o
ustalonej szerokości zawierającego treść strony). Ma to wyglądać tak, że
prawy górny róg tego DIV'a będzie zawierał jakiś fragment rysunku
kontynuowego dalej w tle w kierunkach do prawej i do góry. Strona będzie
centrowana w poziomie. Jak dopasować bez użycia JS tło strony i to co do
piksela do górnego prawego rogu tego centrowanego DIV'a niezależnie od
szerokości okna przeglądarki? Dobrze byłoby uniknąć poziomego paska
przewijania.

Może to istotne: szerokość treści strony będzie wynosiła ok 900px natomiast
ta grafika tła będzie rozrastała się o jeszcze ze 300px w prawo. Na małych
monitorach będzie tło cięte w miejscu prawej krawędzi okna przeglądarki, a
na większych - ładnie zakończy się. Tak sobie powymyślali...

--
Pozdrawiam,
Marek

do góry

Marek pisze:
> Mam ciekawy projekt do zrobienia z jeszcze ciekawszą zagwozdką. Być może
> mnie jakieś otumanienie ogarnęło - tego nie wykluczam. Otóż tło strony
> WWW (przypisane np. do body) jest dużo szersze od samej strony (w sensie
> DIVa o ustalonej szerokości zawierającego treść strony). Ma to wyglądać
> tak, że prawy górny róg tego DIV'a będzie zawierał jakiś fragment
> rysunku kontynuowego dalej w tle w kierunkach do prawej i do góry.
> Strona będzie centrowana w poziomie. Jak dopasować bez użycia JS tło
> strony i to co do piksela do górnego prawego rogu tego centrowanego
> DIV'a niezależnie od szerokości okna przeglądarki? Dobrze byłoby uniknąć
> poziomego paska przewijania.

Wycinasz ten obrazek tak, żeby go wstawić w następujący sposób:
body { background:url(tenobrazek) no-repeat 50% 0; }
Tj. jeżeli ma Ci wystawać w prawo o 300px a główny kontener ma 900px, to
robisz grafę na szerokość 900px + 2x300px i motyw właściwy wrzucasz w
prawy róg.


--
message[autor="PablO"]::after {
content:"Pozdrawiam";
}

do góry

> Wycinasz ten obrazek tak, żeby go wstawić w następujący sposób:
> body { background:url(tenobrazek) no-repeat 50% 0; }
> Tj. jeżeli ma Ci wystawać w prawo o 300px a główny kontener ma 900px, to
> robisz grafę na szerokość 900px + 2x300px i motyw właściwy wrzucasz w
> prawy róg.

Czy to oznacza, że wycentrowany poziomo obraz w tle może mieć swój początek
poza ekranem?

do góry

Marek pisze:
>> Wycinasz ten obrazek tak, żeby go wstawić w następujący sposób:
>> body { background:url(tenobrazek) no-repeat 50% 0; }
>> Tj. jeżeli ma Ci wystawać w prawo o 300px a główny kontener ma 900px, to
>> robisz grafę na szerokość 900px + 2x300px i motyw właściwy wrzucasz w
>> prawy róg.
>
> Czy to oznacza, że wycentrowany poziomo obraz w tle może mieć swój
> początek poza ekranem?

Każdy obraz ustawiany jako tło może się zaczynać i kończyć poza
widocznym obszarem (background-position przyjmuje ujemne wartości),
zostanie on po prostu obcięty.


--
message[autor="PablO"]::after {
content:"Pozdrawiam";
}

do góry

> Każdy obraz ustawiany jako tło może się zaczynać i kończyć poza
> widocznym obszarem (background-position przyjmuje ujemne wartości),
> zostanie on po prostu obcięty.

Dziękuję za wyjaśnienie. Nie brałem tego pod uwagę.

do góry