Temat: Tło strony zależne od rozdzielczości

Witajcie,

mam pewien problem z tłem na stronie http://luxdonice.home.pl/bolek/

Tło jest białe, a w górnym lewym rogu tła strony widnieje słońce. Problem w tym, że kiedy zmniejszamy rozmiar okna przeglądarki, na której wyświetlona jest strona, to owe słońce z tła wchodzi na tekst zamiast pozostać w swojej pozycji - ta sama rzecz się ma w przypadku różnych rozdzielczości ekranów - na jednych wszystko jest ok, na innych - tekst "wchodzi" na słońce...

czy znacie może skuteczne rozwiązanie css'owe? proszę o pomoc/sugestieMagdalena Buraczewska-Świątek edytował(a) ten post dnia 22.02.13 o godzinie 11:33

Temat: Tło strony zależne od rozdzielczości

Jest kilka sposobów. W CCS3 możesz skalować grafikę tła.

Możesz też DIVa ze słońcem absolutnie pozycjonować do ramki tekstowej, wtedy będzie w stałej odległości i najwyżej wyjedzie poza margines.

Możesz też pod tekstem dać białe (a nie przezroczyste) tło i wtedy nawet jak słońce się przemieści to tekst będzie widoczny.

Kwestia co chcesz osiągnąć.

BTW. Słońce cały czas jest na swojej pozycji, jest pozycjonowane względem ekranu, to tekst wjeżdża na słońce przy skalowaniu okna przeglądarki :)

Temat: Tło strony zależne od rozdzielczości

1. wytnij samo słonice, bez białego tła (tak żeby te tło było mniejsze)
2. css

background: url("http://luxdonice.home.pl/bolek/wp-content/uploads/2013/02/tlo17.jpg") #fff no-repeat top;

Temat: Tło strony zależne od rozdzielczości

Ja bym nic nie zmieniał z tym obrazkiem, tylko zmienił jedną linijkę CSS

.bg-white {

    background: url("http://luxdonice.home.pl/bolek/wp-content/uploads/2013/02/tlo17.jpg") no-repeat center center;

......

Konrad K. edytował(a) ten post dnia 22.02.13 o godzinie 11:54

Temat: Tło strony zależne od rozdzielczości

Konrad K.:
Ja bym nic nie zmieniał z tym obrazkiem, tylko zmienił jedną linijkę CSS

.bg-white {

    background: url("http://luxdonice.home.pl/bolek/wp-content/uploads/2013/02/tlo17.jpg") no-repeat center center;

......

tak też zrobiłam:

background-image: url("http://luxdonice.home.pl/bolek/wp-content/uploads/2013/02/tlo17.jpg");

 background-repeat: no-repeat;

 background-position:center; 

dziękuję pięknie za szybką pomoc - udało się

Temat: Tło strony zależne od rozdzielczości

Magdalena Buraczewska-Świątek:

Konrad K.:
Ja bym nic nie zmieniał z tym obrazkiem, tylko zmienił jedną linijkę CSS

.bg-white {

    background: url("http://luxdonice.home.pl/bolek/wp-content/uploads/2013/02/tlo17.jpg") no-repeat center center;

......

tak też zrobiłam:

background-image: url("http://luxdonice.home.pl/bolek/wp-content/uploads/2013/02/tlo17.jpg");

 background-repeat: no-repeat;

 background-position:center; 

dziękuję pięknie za szybką pomoc - udało się

tylko teraz, kurczę - słońce (podczas zmniejszania okna przeglądarki) "chowa się" hmm na to też jest jakiś sposób?

Temat: Tło strony zależne od rozdzielczości

Zrób tak, jak mówi Andrzej - wytnij samo słońce i wtedy nie będzie problemu. ;)Wojciech Kopycki edytował(a) ten post dnia 22.02.13 o godzinie 12:59

Temat: Tło strony zależne od rozdzielczości

Wojciech Kopycki:
Zrób tak, jak mówi Andrzej - wytnij samo słońce i wtedy nie będzie problemu. ;)

niestety to daje efekt początkowy - czyli tekst "wchodzi" (w pewnym momencie) na małe tło - słońce

Temat: Tło strony zależne od rozdzielczości

Magdalena Buraczewska-Świątek:

Wojciech Kopycki:
Zrób tak, jak mówi Andrzej - wytnij samo słońce i wtedy nie będzie problemu. ;)

Magda nie ma innego sposobu jak dopasowania słońca względem tekstu. Słonce musi byc jako oddzielny obrazek i ten obrazek musisz dopasować-ustawić w odpowiedniej odległości do tekstu. Nie możesz mieć słoneczka jako elementu tła bo ciagle będzie sie skalować to słonce razem z tłem!
http://www.youtube.com/watch?v=QM6i5WglYbsAgnieszka Anna Janus edytował(a) ten post dnia 22.02.13 o godzinie 13:49

Temat: Tło strony zależne od rozdzielczości

Agnieszka Anna Janus:

Magdalena Buraczewska-Świątek:

Wojciech Kopycki:
Zrób tak, jak mówi Andrzej - wytnij samo słońce i wtedy nie będzie problemu. ;)

Magda nie ma innego sposobu jak dopasowania słońca względem tekstu. Słonce musi byc jako oddzielny obrazek i ten obrazek musisz dopasować-ustawić w odpowiedniej odległości do tekstu. Nie możesz mieć słoneczka jako elementu tła bo ciagle będzie sie skalować to słonce razem z tłem!

najgorsze jest to, że przy różnych rozdzielczościach ekranu, ludzie będą mieli słońce w różnych pozycjach (na pewno zdarzy się i tak, że najedzie na tekst - a np. na moim ekranie (po ustaleniu w stylach konkretnego położenia) będzie wszystko w porządku)

mam rację?

Temat: Tło strony zależne od rozdzielczości

Magdalena Buraczewska-Świątek:

mam rację?

Nie;)

Jesli ustawisz samo słońce do tekstu nie będzie ono elementem tła! A więc będzie się skalowało razem z tekstem a tło pozostanie w miejscu

Temat: Tło strony zależne od rozdzielczości

Magdalena Buraczewska-Świątek:

najgorsze jest to, że przy różnych rozdzielczościach ekranu, ludzie będą mieli słońce w różnych pozycjach (na pewno zdarzy się i tak, że najedzie na tekst - a np. na moim ekranie (po ustaleniu w stylach konkretnego położenia) będzie wszystko w porządku)

mam rację?

Nie. Usuń background z .bg-white i dodaj jakiegoś div'a np. .sun-bg wewnątrz .wrapper. Do .sun-bg wrzuć swoje słoneczko jako img albo jak wolisz ustaw je w tle (nie zapomnij wtedy o nadaniu div'owi rozmiaru). Dla .wrapper'a ustawiasz position: relative a dla .sun-bg position: absolute, top: 0 i left: -(szerokość obrazka) i niezależnie od szerokości okna przeglądarki słoneczko będzie zawsze w identycznej pozycji względem teksu.

EDIT:
Zamiast ustawiać słoneczko względem .wrapper'a może je jeszcze ustawić względem body. Dajesz wewnątrz body div.sun-bg (taki sam jak opisie wyżej) i ustawiasz dla niego position: absolute, top: x, left: 50%, margin-left: -(połowa szerokości strony+szerokość obrazka) i gotowe.

EDIT 2:
Albo możesz też zostawić dużą grafikę (tą z białym tłem) i ustawić background-position: center 0; Wystarczy, że dodasz do body min-width: 980px i już przy zmniejszaniu okna słońce nie będzie Ci wjeżdżało pod teks (przy okazji przestanie Ci się rozsypywać strona po zmniejszeniu gdy pojawia się poziomy scroll)Marcin Gościcki edytował(a) ten post dnia 22.02.13 o godzinie 14:03

Temat: Tło strony zależne od rozdzielczości

Marcin Gościcki:

Magdalena Buraczewska-Świątek:

najgorsze jest to, że przy różnych rozdzielczościach ekranu, ludzie będą mieli słońce w różnych pozycjach (na pewno zdarzy się i tak, że najedzie na tekst - a np. na moim ekranie (po ustaleniu w stylach konkretnego położenia) będzie wszystko w porządku)

mam rację?

Nie. Usuń background z .bg-white i dodaj jakiegoś div'a np. .sun-bg wewnątrz .wrapper. Do .sun-bg wrzuć swoje słoneczko jako img albo jak wolisz ustaw je w tle (nie zapomnij wtedy o nadaniu div'owi rozmiaru). Dla .wrapper'a ustawiasz position: relative a dla .sun-bg position: absolute, top: 0 i left: -(szerokość obrazka) i niezależnie od szerokości okna przeglądarki słoneczko będzie zawsze w identycznej pozycji względem teksu.

EDIT:
Zamiast ustawiać słoneczko względem .wrapper'a może je jeszcze ustawić względem body. Dajesz wewnątrz body div.sun-bg (taki sam jak opisie wyżej) i ustawiasz dla niego position: absolute, top: x, left: 50%, margin-left: -(połowa szerokości strony+szerokość obrazka) i gotowe.

EDIT 2:
Albo możesz też zostawić dużą grafikę (tą z białym tłem) i ustawić background-position: center 0; Wystarczy, że dodasz do body min-width: 980px i już przy zmniejszaniu okna słońce nie będzie Ci wjeżdżało pod teks (przy okazji przestanie Ci się rozsypywać strona po zmniejszeniu gdy pojawia się poziomy scroll)

O rety - profesjonalizm w pełni. Dzięki wielkie. Wybrałam 2 opcję (wydaje się prostsza - nie jestem specjalistką od css'ów i niektóre "rzeczy" mnie przerastają). W tym rozwiązaniu rzeczywiście słońce nie wjeżdża na tekst (czy odwrotnie), ale za to, kiedy zmniejszam okno przeglądarki, tło (słońce) znika bez możliwości rolkowania) hmm...może ja coś źle robię...nie wiem

Temat: Tło strony zależne od rozdzielczości

Magdalena Buraczewska-Świątek:
O rety - profesjonalizm w pełni. Dzięki wielkie. Wybrałam 2 opcję (wydaje się prostsza - nie jestem specjalistką od css'ów i niektóre "rzeczy" mnie przerastają). W tym rozwiązaniu rzeczywiście słońce nie wjeżdża na tekst (czy odwrotnie), ale za to, kiedy zmniejszam okno przeglądarki, tło (słońce) znika bez możliwości rolkowania) hmm...może ja coś źle robię...nie wiem

Jest poza widocznym obszarem strony, ot co. Taka rola tła :) Słońce nie jest niezbędnym elementem na tej stronie, tylko dodatkiem. Gdyby przy wąskim oknie słoneczko było widoczne zmniejszyłabyś usability bo user by "dokopać się" do wartościowego tekstu musiałby najpierw przeskrolować do niego w bok.