Ta strona używa ciasteczek (cookies), dzięki którym nasz serwis może działać lepiej. Dowiedz się więcej OK, rozumiem

Wyśrodkowanie tła obrazkowego zgodnie z rozdzielczością

Chcesz wiedzieć jak sterować wyglądem strony za pomocą styli? Tutaj dowiesz się jakie możliwości ma CSS i jak poprawnie go stosować, aby uzyskać zamierzone efekty. Dowiesz się jakie nowości udostępniono w CSS3 i jak z nich korzystać.

Wyśrodkowanie tła obrazkowego zgodnie z rozdzielczością

Post 02.10.2014, 22:19:17

Witam. Robię sobie stronę i chciałbym się zapytać o to, jak wyśrodkować obrazek w tle na div.

Chodzi mi o to.. że mam np. tło np. 3000px szerokości (tło znajduję się na środku tego obrazka a boki są kolorowe) i chce aby przeglądarka automatycznie dostosowywała się do tego obrazka..

Czyli ktoś kto ma większa rozdzielczość widzi więcej tego bocznego koloru, a ja np. gdy mam mała widzę tylko te logo w środku i trochę koloru z boku.

Logo znajduję się cały czas w tym samym miejscu, czyli środek strony a zmiana się tylko ilość pokazywania bocznego pasku - koloru.

Strona pisana będzie w div, nie będę tutaj pokazywał kodu bo w sumie nie jest to aż tak bardzo potrzebne..

Kiedyś coś o ty czytałem i udało mi się to nawet zrobić.. ale od kilku dobrych miesięcy nie robiłem żadnej strony a wszystkie informacje na ten temat (inne strony) mam w laptopie który jest po zalaniu w serwisie.

Pozdrawiam i czekam na szybką odpowiedz.!
awek520
Posty: 17
Dołączył(a): 17.04.2014

Re: Wyśrodkowanie tła obrazkowego zgodnie z rozdzielczością

Post 02.10.2014, 22:40:50

W sensie jedno tło główne po środku... no to tak.
http://jsfiddle.net/evrgq2sr/1/
Avatar użytkownikaJaason
Tomasz Waszkiewicz

capoeirista
capoeirista

Posty: 3511
Dołączył(a): 14.04.2002
Lokalizacja: Warszawa

Re: Wyśrodkowanie tła obrazkowego zgodnie z rozdzielczością

Post 03.10.2014, 11:22:28

Nieee nie działa to.

Oto kody:

PHP

[php]
Kod: Zaznacz cały
<html>
   <head>
   <title>STRONA DLA ASTRA CLUB</title>
   <link href="style/style.css" rel="stylesheet" type="text/css" />
   </head>

   <body>


<div id="top">
   <div id="NAGLOWEK">Nagłówek szablonu</div>
   <div id="TRESC">Treść strony</div>
   <div id="STOPKA">Stopka serwisu</div>
</div>

   </body>
</html>

[/php]

CSS

[php]
Kod: Zaznacz cały
html, body {
   margin: 0;
   padding: 0;
   text-align: center;
}

#top {
   width: 100%;
   text-align: center;
   margin:auto;
}


#NAGLOWEK {
   background-image:url('images/top.png');   
   width: auto;
   height: 740px;
}

#TRESC {
   width: auto;
   height: 447px;
   background-image:url('images/tresc.png');   
}

#STOPKA {
   clear: both;
   height: 324px;
   width: 100%;
   background-image:url('images/stopka.png');   
}

[/php]

Oto link do layout (w css podzielony na 3 czesci, menu, tresc, stopka)
http://i61.tinypic.com/s1l3lu.jpg

Chodzi o to.. żeby te menu tresc, stopka była zawsze na środku strony, a zmianiała się tylko cześć z lewej i prawej strony.. Im wieksza rozdzielczosc tym wieksza czesc pokazana.
awek520
Posty: 17
Dołączył(a): 17.04.2014

Re: Wyśrodkowanie tła obrazkowego zgodnie z rozdzielczością

Post 03.10.2014, 12:02:35

No i tak zrobione jest w moim przykładzie. Na całość do body wrzucony jest jeden obrazek, zaś html jest tak ustawiony że przykrywa tło i zawsze jest po środku content. I te fragmenty z lewej i prawej będą pokazywane różne w zależności od tego jaką kto ma rozdzielczość.
Pokaż mi tę stronę on-line, to może lepiej zrozumiem o co chodzi.
Avatar użytkownikaJaason
Tomasz Waszkiewicz

capoeirista
capoeirista

Posty: 3511
Dołączył(a): 14.04.2002
Lokalizacja: Warszawa

Re: Wyśrodkowanie tła obrazkowego zgodnie z rozdzielczością

Post 03.10.2014, 12:20:18

http://awek320.cba.pl/astra/

Wrzuciłem ją na swój serwer..

Widzisz strona pokazuje się cała, nieodpowiednio do rozdzielczosci
awek520
Posty: 17
Dołączył(a): 17.04.2014

Re: Wyśrodkowanie tła obrazkowego zgodnie z rozdzielczością

Post 03.10.2014, 12:27:38

Ok już widzę w czym problem.
To co musisz zrobić to zrobić tak jak w moim przykładzie.
Robisz jedno tło wspólne, bez tekstów i bajerów. Samo tło. Radziłbym połączyć te 3 tła w 1-ną całość.
Wstawiasz je do body jak na moim przykładzie.
Tworzysz następnie div-a którego wyśrodkowujesz tak jak na moim przykładzie i do niego wstawiasz teksty etc.
Jeżeli nie chcesz wstawiać tekstów a obrazki (co odradzam) to radzę przygotować odpowiednie przezroczyste PNG i w ten div je wrzucić. To co musisz zrobić to oddzielić tło właśnie od treści i to Ci zaproponowałem. W tej chwili jak tło wrzucasz 3 długie obrazki z treściami itp. To złe. Bardzo złe.
Avatar użytkownikaJaason
Tomasz Waszkiewicz

capoeirista
capoeirista

Posty: 3511
Dołączył(a): 14.04.2002
Lokalizacja: Warszawa

Re: Wyśrodkowanie tła obrazkowego zgodnie z rozdzielczością

Post 03.10.2014, 12:33:17

Ok zaraz się tym zajme.. zawsze robiłem każdą cześć osobno.. obrazki raczej jak już to w galerii, ale będą prostokątne.. A menu ogarnę jakoś..

Pozdrawiam, jeśli byłby jakiś problem od razu napiszę.

Dziękuje za pomoc!



_______________________________________


Edytowałem to tak jak Ty zaproponowaleś.. i chyba jest dobrze ;)
http://awek320.cba.pl/astra/
awek520
Posty: 17
Dołączył(a): 17.04.2014


Powrót do CSS


 


  • Podobne wątki
    Odpowiedzi
    Wyświetlone
    Ostatni post

Kto przegląda forum

Użytkownicy przeglądający ten dział: Brak zidentyfikowanych użytkowników i 3 gości

Hosting, Domeny, SSL

Subskrypcja

Mamy 50447 zarejestrowanych użytkowników.
Najnowszy użytkownik: Rustyaparl


Nasi użytkownicy napisali:

  • 935671 wiadomości
  • w 246584 tematach

Najnowsze wpisy na blogu

Najnowsze artykuły

Najaktywniejsi (ostatnie 30 dni)