Zmiana wielkości tła w joomla 1.5

**mancer** · 10-01-2012, 18:33

Witam, mam dość proste (mam nadzieje pytanie): mam obrazek o dużej rozdzielczości który chcę mieć jako tło strony dodatkowo chcę by ten obrazek dostosowywał rozmiar do okna przeglądarki tak, żeby zawsze wyświetlał się w 100% szerokości i wysokości bez względu na to w jakim oknie, na jakim ekranie jest wyświetlany.
Znalazłem kod który to robi (aż tak dobrze jeszcze nie znam css) - http://css-tricks.com/how-to-resizea...kground-image/ i chciałem wykorzystać trzeci sposób czyli po prostu:

Kod:

#img.source-image {
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
}

Edyduje sobie standardowy szablon Joomli - rhuk_milkyway, znalazłem miejsce gdzie mi wczytuje obrazek (postanowiłem, że wyedytuje sobie plik blue_bg.css)
tam przy linii:
#page_bg {
background: url(../images/tlo.jpg) ;
no właśnie - tu się zatrzymałem

. Obrazek co prawda mi się wczytuje ale jest bardzo duży więc widać go tylko w małej części. Nie wiem za bardzo jak dołożyć te argumenty do tego stylu a nie chcę zrobić brutal force (czyli w moim przypadku stworzyć ww. styl i w pliku index.php ze stylem wkleić obrazek...). Może mi ktoś doradzić? (a może jeszcze prościej można coś takiego zrobić?)

**nikszal** · 10-01-2012, 18:36

Dodałeś skrypt js w sekcji HEAD w szablonie?

**a_m** · 10-01-2012, 18:39

musisz wsadzić obrazek przez <img src="...", nie jako tło

**nikszal** · 10-01-2012, 18:45

Kod:

<head>
.....................
.....................	

<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript">
	$(document).ready(function() {
		$("img.source-image").hide();
		var $source = $("img.source-image").attr("src");
		$('#page-body').css({
			'backgroundImage': 'url(' + $source +')',
			'backgroundRepeat': 'no-repeat',
			'backgroundPosition': 'top center'
		});
	});
	</script>
</head>
<body id="page-body">
	<img class="source-image" src="images/image.jpg" alt="" />

Wysłane przez mancer

mam obrazek o dużej rozdzielczości który chcę mieć jako tło strony

Jak sobie radzi przeglądarka z wczytywaniem strony?

**mancer** · 10-01-2012, 19:08

Wysłane przez nikszal

Dodałeś skrypt js w sekcji HEAD w szablonie?

Nie bo jak napisałem - próbowałem jedynie 3 sposobu czyli bez użycia JS. Teraz spróbowałem wstawić to co mi przesłałeś tj. w sekcji <head> dodałem skrypt, do argumentów <body> dodałem id="page-body" (nie wiem czy miałem dać jakieś średniki żeby oddzielić argumenty więc po prostu wstawiłem na początek sekcji body tak, że wygląda to tak:

Kod:

<body id="page-body" id="page_bg" class="color_<?php echo $this->params->get('colorVariation'); ?> bg_<?php echo $this->params->get('backgroundVariation'); ?> width_<?php echo $this->params->get('widthStyle'); ?>">

no i spróbowałem wstawić <img> (dla uproszczenia wczytuje obrazek ze strony):

Kod:

<img class="source-image" src="http://farm3.static.flickr.com/2098/2260149771_00cb406fd6_o.jpg" alt="" />

ale to zachowuje się tak: najpierw wstawia obrazek w pełnym rozmiarze, a niżej całą resztę sztrony

(a powinien robić za tło.. spycha wszystko w dół)

Wysłane przez a_m

musisz wsadzić obrazek przez <img src="...", nie jako tło

tak też próbowałem ale dzieje się to samo co pisałem wyżej - najpierw wrzuca sie zdjęcie, a niżej reszta zawartości strony.

Wysłane przez nikszal

Jak sobie radzi przeglądarka z wczytywaniem strony?

wczytuje mi tylko fragment który jest w stanie wyświetlić tj. obrazek ma rozdzielczość 5000x3000 (jakoś tak) więc jak wczytuje go:
background: url(../images/tlo.jpg) 6% 6%; (czyli w 6% tylko) to zaczyna być widoczne co na nim jest

Edit:

Wysłane przez a_m

musisz wsadzić obrazek przez <img src="...", nie jako tło

próbowałem też dołożyć:

Kod:

z-index: 5000;

(bo tak jest dokładnie na stronie z przykładem) ale dzieje się to samo

**a_m** · 10-01-2012, 19:14

a do css dopisałeś co trzeba? masz link do str?

**mancer** · 10-01-2012, 19:35

robiłem lokalnie ale na szybko doprowadziłem do tej sytuacji o której piszę tutaj:
http://freeside.pl/joomla/

więc próbuje dwoma metodami ustawić obrazek jako tło.

w deafaultowym pliku rhuk_milkyway/css/blue_bg.css
jest tylko:

Kod:

#bg {
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 5000;
	}

#page_bg {
	

 }

a w rhuk_milkyway/index.php wkleiłem:
<img class="source-image" src="http://farm3.static.flickr.com/2098/2260149771_00cb406fd6_o.jpg" alt="" /> /*sposob z JS*/
<img class="bg" alt="" src="http://farm3.static.flickr.com/2098/2260149771_00cb406fd6_o.jpg"> /* bez JS*/

**a_m** · 10-01-2012, 19:37

obrazek o klasie source-image nie jest opisany w css

**mancer** · 10-01-2012, 19:53

faktycznie, dołożyłem więc do css

Kod:

img.source-image {
        position: absolute;
        top: 0;
        left: 0;
		
}
	
body {
  overflow: hidden;
}

i faktycznie wówczas obrazek niejako staje się tłem - z niewiadomych jednak mi powodów przesłania całą zawartość strony (tylko logo się przebija

) ponadto ma stałą szerokość - nie zminia się rozmiar w zalezności od okna - sprawdzam na FF i Chrome.

**a_m** · 10-01-2012, 19:55

dopisz sobie
.center{
position:relative
}
+ ew. z-indexy do center i obrazka

Temat: Zmiana wielkości tła w joomla 1.5

Przybornik

Widok

Zmiana wielkości tła w joomla 1.5

Podobne tematy

Zmiana wielkości czcionki

Zmiana wielkości box-ow na stronie

zmiana wielkości czionki na stronie

Zmiana wielkości bannera!?

Zmiana wielkości - banner

Reguły pisania