[CSS] Położenie obrazka na środku strony - height:100%; Opcje

[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ć (IMG:style_emoticons/default/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 (IMG:style_emoticons/default/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.

[HTML] pobierz, plaintext 
#background {
  background: transparent url('sciezka.jpg') top center no-repeat;
}
[HTML] pobierz, plaintext 

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 (IMG:style_emoticons/default/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ą.

Ten post edytował yurus1 21.09.2012, 07:18:54

[viking]

Możesz zobaczyć kod http://vegas.jaysalvat.com/

[Arcioch]

Css dla twojego bg ustaw takie:

[HTML] pobierz, plaintext 
#background1{display: block;
position:fixed;
height:100%;
z-index: -1;
}
[HTML] pobierz, plaintext 

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

[HTML] pobierz, plaintext 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script>
 
$(function() {
 
	function bgresize() {
		var window_width = $(window).width();
		var img_width = $('#background1').width();
 
		var margin_left = (window_width - img_width) / 2;
		$('#background1').css({"margin-left" : margin_left});
  	}
 
	bgresize();
 
	$(window).resize(bgresize);
 
});
</script>
[HTML] pobierz, plaintext 

[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]

[HTML] pobierz, plaintext 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script>
 
$(function() {
 
	function bgresize() {
		var window_width = $(window).width();
		var img_width = $('#background1').width();
		var margin_left = (window_width - img_width) / 2;
		$('#background1').css({"margin-left" : margin_left});
  	}
	$(window).load(function () {
		bgresize();
	});
 
 
	$(window).resize(bgresize);
 
});
</script>
[HTML] pobierz, plaintext 

Powinno grać (IMG:style_emoticons/default/wink.gif) Sorki moje niedopatrzenie (IMG:style_emoticons/default/wink.gif) Skrypt się ładował i łapał wielkość obrazka jako 0. Spróbuj i daj znać czy działa (IMG:style_emoticons/default/wink.gif)

[yurus1]

Super działa, dzięki wielkie (IMG:style_emoticons/default/smile.gif)