Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS] Położenie obrazka na środku strony - height:100%;
Forum PHP.pl > Forum > Przedszkole
yurus1
Witam

Jest sobie strona. Jako tło ma być obrazek, który musi być wyśrodkowany na samym środku strony. Problem polega na tym że obrazek ma mieć zawsze 100% wysokości, więc cięzko określić jego szerokość.

W jaki najprostszy sposób można go wyśrodkować?

#background{position:fixed; z-index:-1; margin: 0 auto;
height:100%;
left: 6%;
}
Arcioch
Pokaż stronę albo trochę więcej kodu bo z tego co dałeś mało można wywnioskować wink.gif Ja bym to pewnie robił przez jquery i dostosowanie obrazka w zależności od szerokości okna przeglądarki i szerokości obrazka wink.gif Czyli wyłapać szerokość diva, szerokość strony i ustawić wtedy odpowiedni margines.
b4rt3kk
100% wysokości strony czy 100% własnej wysokości? Może spróbuj dać obrazek w tle diva? I nadaj mu odpowiednie atrybuty.

  1. #background {
  2. background: transparent url('sciezka.jpg') top center no-repeat;
  3. }


Zamiast top center możesz wpisać samodzielnie pozycję x i y.
lobopol
O coś takiego ci chodzi?
http://jsfiddle.net/Uf66h/
yurus1
Stronka: http://95.50.17.146/kw/

Też wydaje mi się że da się to jedynie przez Jqery zrobić, tylko jak smile.gif

Dokładnie chodzi mi o tą "wannę" jest to plik o rozdziałce: 1318x800, jego wysokość to zawszę 100% w przeglądarce. Czyli na każdej rozdzielczości szerokość będzie miał inną.
viking
Możesz zobaczyć kod http://vegas.jaysalvat.com/
Arcioch
Css dla twojego bg ustaw takie:

  1. #background1{display: block;
  2. position:fixed;
  3. height:100%;
  4. z-index: -1;
  5. }


Kod js do wyśrodkowywania tła wink.gif działa automatycznie przy ładowaniu i przy zmianie szerokości okna przeglądarki wink.gif (wymaga biblioteki jQuery)

  1. <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
  2.  
  3. $(function() {
  4.  
  5. function bgresize() {
  6. var window_width = $(window).width();
  7. var img_width = $('#background1').width();
  8.  
  9. var margin_left = (window_width - img_width) / 2;
  10. $('#background1').css({"margin-left" : margin_left});
  11. }
  12.  
  13. bgresize();
  14.  
  15. $(window).resize(bgresize);
  16.  
  17. });
yurus1
Dzieki wielkie.
Ale jeszcze jest coś nie tak przy pierwszym ładowaniu strony grafika czepia się prawej strony. Dopier po odświeżeniu jest OK tak jakby skrypt dopier działał przy kolejnym ładowaniu.
Arcioch
  1. <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
  2.  
  3. $(function() {
  4.  
  5. function bgresize() {
  6. var window_width = $(window).width();
  7. var img_width = $('#background1').width();
  8. var margin_left = (window_width - img_width) / 2;
  9. $('#background1').css({"margin-left" : margin_left});
  10. }
  11. $(window).load(function () {
  12. bgresize();
  13. });
  14.  
  15.  
  16. $(window).resize(bgresize);
  17.  
  18. });


Powinno grać wink.gif Sorki moje niedopatrzenie wink.gif Skrypt się ładował i łapał wielkość obrazka jako 0. Spróbuj i daj znać czy działa wink.gif
yurus1
Super działa, dzięki wielkie smile.gif
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.