PDA

Zobacz pełną wersję : 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-resizeable-background-image/ i chciałem wykorzystać trzeci sposób czyli po prostu:


#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
<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="" />


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
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:

<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):

<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ół)



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.



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:

musisz wsadzić obrazek przez <img src="...", nie jako tło
próbowałem też dołożyć:

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:

#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


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
mancer
10-01-2012, 21:11
Dzięki, faktycznie z tym dobrze się wczytuje tło.
Jednak skrypt chyba nie działa tak jak powinien :D - wczytałem sobie to moje duże tło:
http://freeside.pl/tmp/tlo.jpg
jak widać ma dużą rozdzielczość. Na http://freeside.pl/joomla/ dalej wyświella sie mały fragment obrazka - czyli wczytuje się w pełnym rozmiarze tło. Zmniejszyłem też trochę to tło i testowałem ale dzieje się to samo. Masz pomysł?
spóbowałbym 2 metody ze strony http://css-tricks.com/how-to-resizeable-background-image/ ale niestety 2 bibliotteki JS które są wymagane nie są już dostępne na stronie jakiegoś projektu..

---------- Post dodany o 20:11 ---------- Poprzedni post był o 19:31 ----------

wystarczyło dodać: width: 100%;
do #img.source-image

dzięki za pomoc. temat to zamknięcia :)