Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS]tło obrazkowe
Forum PHP.pl > Forum > Przedszkole
1oBuZ
Witam!



Jak za pomocą standardowego CSS lub jakiejkolwiek innej moteody (prócz CSS3) uzyskać tło z dwóch obrazków w przedstawiony poniżej sposób:



Jedyny pomysł jaki przychodzi mi na myśl to skorzystanie z div, byćmoże zna ktoś bardziej poprawny sposób smile.gif

Dziękuję i pozdrawiam



qqwwq
Jeżeli tło ma być samym kolorem, to chyba lepiej to bez obrazków zdefiniować jako background-color. Jeśli natomiast to jest tylko przykład, to faktycznie div'y są dobrym rozwiązaniem, tylko czy tekst albo inna zawartość strony ma być w takim wypadku rozdzielony na dwie kolumny, czy ma się wyświetlać na całości?
zegarek84
tekst nie będzie w 2 kolumnach jeśli skorzysta z pozycjonowania odpowiedniego warstw w css - czyli warstwę 3 na oba te divy - a w zasadzie żeby to się lepiej trzymało kupy i mniej inwencji wymagało to te trzy warstwy wewnątrz jakiegoś jeszcze innego "pudełka" (np. diva) - i ta trzecia warstwa jest na zawartość treści - no niestety też innego sposobu nie znam ;/
1oBuZ
Drodzy forumowicze chodzi tutaj o tło całej strony (bez żadnych divów, czy też tabel).

Po prostu mam dwa obrazki przykladowo: tlo1.jpg i tlo2.jpg i chciałbym ustawić je jako tło strony w w/w sposób

qba10
Nie znam odpowiedzi na twoje pytanie, ale może ci to pomoże:
https://developer.mozilla.org/pl/CSS/background-position
(jeżeli jest to możliwe to myśle że uda ci się to zrobić ustawiając 2 tła i do nich poszczególne pozycje)

Edit: zawsze możesz połączyć dwa tła i zrobić jedno
erix
Cytat
Jedyny pomysł jaki przychodzi mi na myśl to skorzystanie z div, byćmoże zna ktoś bardziej poprawny sposób

Jedyne wyjście, to wstawienie drugiego div z position absolute 50% od lewej. background nie może przyjmować kilku obrazków.
1oBuZ
Tak własnie myślałem, aczkolwiek w nowym css jest już taka możliwość, dziękuję za odpowiedź
qqwwq
Faktycznie, nie ustawisz na background kilku obrazków, ale można by pomyśleć aby zrobić coś takiego:

dla html ustawiasz background jako obrazek 1, dajesz mu left oraz no-repeat, a dla body ustawiasz obrazek 2 na right i no repeat. Oba obrazki powinny być dobrze przycięte aby to zadziałało - jednakże może być problem z wyglądem przy różnych rozdzielczościach strony ( nie pokazałeś konkretnych obrazków, więc nie wiadomo czy będzie z tym problem czy nie ).

Innym sposobem, może być takie potrójne pudełko, jakie chyba już ktoś wyżej proponował. Aby się nie rozpisywać, podam przykładowy kod:
  1. <div id="all">
  2. <div id="all2">
  3. <div id="content">
  4.  
  5.  
  6. </div>
  7. </div>
  8. </div>
  9.  
  10.  
  11. #all {
  12. width: 1020px;
  13. background: url('img/1.jpg') left no-repeat;
  14. margin: 0px auto;
  15. }
  16.  
  17. #all2 {
  18. width: 1020px;
  19. background: url('img/2.jpg') right no-repeat;
  20. }
  21.  
  22. #content {
  23. width: 1020px;
  24. }


Można i obrazki przerobić na całą szerokość - po jednej stronie będzie miał po prostu przezroczystość, a po drugiej właściwy obrazek ...
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.