CSS
Blog > Komentarze do wpisu
Jak wstawić obrazek w tło?

czyli co należy zrobić, żeby mieć takie logo jak u mnie?

W CSSie należy odnaleźć fragment "#BlogTytulBox" - to on jest odpowiedzialny za ramkę, w której wyświetla się tytuł bloga.

W skórce Theme A jego definicja wygląda tak:

{ background-image: url('/themes/1_default/images/kolo_pom.gif');
 background-repeat: no-repeat;
 background-position: top center;
 background-color: #E56D38;
 padding: 5px;
 width: 710px;
 margin-bottom: 5px
}

Jak ją modyfikować? Jeżeli interesujący nas obrazek załadujemy do "Zasobów", w pozycji "background-image: url" trzeba zmienić zawartość nawiasu wskazując jego adres, czyli wpisujemy ('../resource/nazwaobrazka.gif'). Dalsze parametry zależą od wyglądu obrazka. Jeśli jest mały i nadaje się do powtarzania, można usunąć wers "background-repeat: no-repeat;" - jak nietrudno się domyśleć, jego obecność powoduje nie powtarzanie obrazka, czyli tak jak u mnie - wyświetla się tylko raz. Gdybym usunęła ten wpis, obrazek powtarzałby się tyle razy ile zmieściłoby się w box'ie

"background-position: top center;" decyduje o wyrównaniu obrazka w pionie (pierwszy wpis) i poziomie (drugi). Możliwe pozycje to top, bottom i center - dla wyrównania pionowego i left, center, right - dla wyrównania poziomego. Ustalanie tych wartości ma sens w przypadku, gdy tło się nie powtarza. Jeśli wers "background-repeat: no-repeat" został usunięty, tło będzie wypełniało cały box, nie ma więc sensu stosować tych ustawień.

"background-color: #E56D38" to definicja koloru tła wokół naszego obrazka. Zmienianie jej w przypadku powtarzającego się obrazka również nie ma sensu, ponieważ całe tło jest zasłonięte.

"padding: 5px" określa odstęp jaki ma być zachowany wokół całego box'u. Można tą linijkę usunąć, wtedy nie będzie odstępu, można też 5 zamienić na 0 z takim samym efektem. Ilość pikseli można ustawić dowolną, ważne jednak, żeby nie przesadzić, bo strona się za mocno powiększy.

"width: 710px;" to szerokoć całego box'u. Można ją zmieniać, tak aby blog zajmował całą szerokość ekranu (ten wymiar zależy od rozdzielczości), jednak trzeba wówczas pamiętać o dostosowaniu do tej szerokości wszystkich elementów bloga (jeśli zmienisz tylko szerokość ramki tytułowej, wpisy do bloga nadal będą zachowywać dawną szerokość.

"margin-bottom: 5px" określa dolny margines naszego box'u (czyli odległość tytułu od dolnej krawędzi).

Co tu można jesze dodać?

  • Nasz box z tytułem może mieć ramkę. By ją określić dodajemy wpis "3px border: solid #000;" Oczywiście może mieć dowolną grubość i kolor. Moze też nie być "solid" (ciągły) a "thin dotted". Możliwości jest bardzo wiele.
  • Oprócz szerokości, możemy oczywiście określić wysokość box'u, wstawiając parametr "height 100px;" - jak zwykle wysokość możemy zmieniać w zależności od potrzeb.
  • Podobnie z marginesami - możemy ustalić wielkość wszystkich marginesów, nie tylko dolnego, wpisując "Margin-top: 5px;" dla marginesu górnego, "Margin-left: 5px;" dla lewego i "Margin-right: 5px;" dla prawego.

Mamy już obrazek, a na nim wyświetla się tytuł. Jak go usunąć?
Odnajdujemy w CSS'ie pozycje "#BlogTytulText", "#BlogTytulText a" i "#BlogTytulText a:hover"

Jeżeli w każdej z nich, w pierwszej linijce, po znaku { wpiszemy "display: none;", pozostałe wartości w tym nawiasie nie będą już miały znaczenia, ponieważ wydaliśmy tym samym polecenie nie wyświetlania nazwy bloxa.
Ważne! Jeśli usuwasz tytuł bloga, a chcesz by widoczny był obrazek, pamiętaj o ustawieniu wysokości box'u!
Pamiętaj, by na końcu każdej wartości stawiać średnik!

Jeżeli wszystko poszło dobrze, obrazek powinien wyglądać tak jak u mnie.

W ten sam sposób można zmieniać tło we wszystkich box'ach. Wskazówki, który jest który znajdziesz tu.

wtorek, 28 września 2004, ememzet
Komentarze
2004/10/05 09:52:00
Szczegół: w CSS nie ma zmiennych. To, po czym każesz stawiać średniki, można nazwać deklaracjami, dyrektywami lub regułami, ale na pewno nie zmiennymi. Nie rób ludziom wody z mózgów.
-
2004/10/05 10:41:56
bardzo Cię przepraszam, kochanie, jeśli poczułeś się urażony :)
Już zmieniam "zmienne" na "wartości". Pełny smak, pełna satysfakcja.

PS. Słyszałeś kiedyś, że można komuś zwrócić uwagę w uprzejmy sposób? Spróbuj. Nie robiąc nikomu wody z niczego.
-
2004/10/06 01:05:40
mam pewien problem: chcialbym wstawic obrazek m okolicach takstu np pod, nad...i nie moge tego zrobic:)
jestem troche malo lotny jeli chodzi o podobne rzeczy wiec bede niezmiernie wdzieczny za pomoc:)
pozdrawiam
-
2004/10/06 11:40:46
w okolicach którego tekstu? chcesz wpleść obrazek w swoją notkę?
-
2004/10/06 18:49:21
kurdę,nic nie kumam z tego:(((
-
2004/10/06 19:40:02
meteo_patka> to zapytaj. może uda mi się przystępniej odpowiedzieć. tylko napisz, co chesz zrobić :)
-
2004/10/07 01:03:16
tak dokladnia chcalbym zrobic...wstawic obrazek w notke.

niezmiennie pozdrawiam
-
2004/10/07 10:00:39
juz wiem jak to zrobic, potknalem sie o to, wpadlem na to....woec wiem
ale mam jeszcze taka prosbe...yeraz chcialbym wstawic obrazek w okolice linkow czy raczej kalendarza...
z gory dziekuje:)
i niezmiennie pozdrawiam
-
2004/10/07 21:50:27
sellasje> możesz zrobić tak, by obrazek był zakładką. Wówczas utwórz zakładkę, w której w tytuł wpisz " ", a jako adres zakładki, możesz podać adres swojego bloga jeśli nie chcesz, by prowadziła gdzieś indziej.
Druga metoda, to zastosowanie instrukcji dotyczącej wstawiania obrazka w tło - z tym, że nie w tytułowy box, a w "BlogWazkaSzpalta" lub "BlogKalendarzBox". Jeśli nie chcesz, aby tekst zakładek najeżdżał na obrazek, zastosuj odpowiednio duży margines górny (Margin-top).
-
2004/10/08 00:32:57
podziekowania wielkie...postaram sie pojsc za wskazowkami.
pozdrawiam
-
Gość: , ayg236.neoplus.adsl.tpnet.pl
2004/10/08 10:14:48
A jak zmienić kolor czcionki, którą wpisany jest tytuł bloga???
-
2004/10/09 17:37:24
wzysztko robiłaj wg instrukcji i nic mi nie wyszło NON LITERALNIE NIC

POMÓZ Błagam
-
Gość: fochmistrz1906, bnp208.neoplus.adsl.tpnet.pl
2004/11/11 20:41:12
blagam pomoz nie wiem jak mam to zrobic jestem zby ciemna:(prosze odezwij sie do mnie na gg i wytlumacz mi krok po kroku co zr4obic zeby miec obrazek w tle??moj numer gygy to:4356916 prosze:(
-
2004/11/29 11:37:11
mi też nie idzie według opisu :/
-
Gość: asiunia, bte8.neoplus.adsl.tpnet.pl
2004/12/09 14:31:18
mam prośbę odezwij sie do mnie bo się pogłubiłam pomóż:( moj gg to:2656368
-
2004/12/22 12:26:37
...hm nie obraz sie ale dla uzytkownika macintosha te texty to pocztowka z marsa albo sekciarska mantra...
mysle ze robisz super rzecz (szkoda ze nie moge sie alapac) - POZDRO
-
2005/01/03 19:33:29
A czy da sie zrobic tak, zeby mniejszy obrazek wypelnial cale tlo, ale bez powtarzania sie?? tzn zeby automatycznie sie rozciagnal do wymiaru strony? Moge oczywiscie powiekszyc obrazek w jakims programie graficznym, ale bedzie mial spora objetosc...
A tak poza tym, to dzieki za tego bloga, bo wszystko jest tak latwo wytlumaczone, ze moge sama sie bawic w tworzenie szblonow:)
-
2005/01/10 14:18:58
yamabushi> niestety nie da się wszystkich zadowolić ;)
-
2005/06/28 15:07:56
Głupia jestem... nic nie rozumiem z tego :(
A chcę tylko wstawić dwa zdjęcia i numer gg... :(((
-
2005/06/29 12:03:54
gsx_katana> wszystko, czego potrzebujesz znajdziesz tu: css.blox.pl/html/1310721,262146,13.html?112686
-
2005/06/29 22:43:56
a co to znaczy, ze trzeba zaladowac obrazek do zasobow?/ jak to zrobic :)
-
2005/06/29 22:53:50
youkali> Kiedy pisałam tą instrukcję tak się nazywał dział "Pliki" w edycji bloga. Teraz tam się wstawia obrazki. Ale poza zmianą nazwy działa tak samo.
-
2005/06/29 23:07:08
dzieki :))
-
2005/07/07 17:28:28
a jak wstawic obraz z "PLIKI", wgrałem tam zdjęcie i chciałem je umiescic gdzies w tle
-
2005/07/07 17:34:56
krekora> odpowiedź na twoje pytanie jest w tekście notki, którą komentujesz (czyi powyżej). Wystarczy przeczytać.
-
2005/07/11 13:10:45
a ja mam taki problem :) chciałabym mieć tytuł bloga na zdjęciu i żeby był linkiem...ale żeby był na dole tego zdjęcia, a nie na górze tak jak jest teraz... da się to zmienić??
pozdrawiam!! :)
-
2005/07/27 14:54:56
-
2005/08/23 09:24:20
Cześć. Mam taki tyciusieńki problem. Udało mi się wstawić obrazek i działał. Niestety, moja głupia siostra zmieniła mi szablon. I kiedy próbuję wstawić ten gif jeszcze raz totalnie nie wychodzi. Czy masz jakiś pomysł co zrobić z takim fantem??
-
2005/09/26 11:56:20
katbelle> obawiam się, że musisz zrobić szablon od początku.
-
2005/10/05 23:40:32
jak mam wstawiony obrazek przesunąć w górę lub w dół..jak określić jego położenie na stronie...np.kiedy chce żeby on był nad ostatnią notka???
-
Gość: anusia, bqz124.neoplus.adsl.tpnet.pl
2005/10/14 16:33:53
Mi wogóle nie wychodzi!!! :( A robie wszystko tak jak trzeba :( Prosze odezwij sie do mnie moj nr gg 5541051 bo sama nie dam rady pomóż!!! :(
-
2005/10/15 18:28:12
No wpisuje nazwę obrazka na miejscu poprzedniej nazwy, obrazek jest załadowany do zasobów, wszystko robię dobrze, co sie dzieje?
-
Gość: misiek.0071, gprs8.orange.pl
2005/10/28 13:53:22
ja wpisuje nazwe obrazka wszystko dobrze zrobiłem i nie ma obrazka www.elana.blox.pl proszę o pomoc mój numer gg to:6255587 !!!!!!!!!!!
-
2005/10/29 18:03:25
alatariel> każdy element jest w jakimś "box-ie". Każdy z tych boksów ma zdefiniowane położenie na stronie. Za pomocą komendy "padding" możesz ustawić odległość elementu od krawędzi strony, lub od innych elementów. W związku z tym wystarczy ustawić odpowiednie wielkości "padding" dla obrazka i dla wpisów. Dokładnej instrukcji nie mogę napisać, bo nie znam adresu bloxa.
anusia152> widocznie nie robisz wszystkiego dobrze. Nic więcej nie jestem w stanie stwierdzić :)
misiek> widzę, że jesteś kolejną osobą, która nie jest łaskawa przeczytać najpierw informacji, że nie kontaktuję się na gg ani mailem. Nie mówiąc już o tym, że odpowiadam wtedy, kiedy mam na to czas, a nie wtedy, kiedy ktoś postanawia pobić rekord wpisywania wykrzykników. Zatem usuwam Twoje liczne komentarze życząc cierpliwości. A powyższa instrukcja wstawiania obrazka działa, więc widocznie nie robisz wszystkiego dobrze.
Pozdrawiam
-
Gość: ej, co to ma byc, awh162.neoplus.adsl.tpnet.pl
2005/11/04 08:16:58
co to ma byc jakis glupi blog
-
2005/11/06 17:07:17
ej a jak wstawić jakiś baner albo buton???
-
2005/11/06 17:15:45
misiek.0071> wystarczy, że zadasz pytanie raz, nie musisz go wklejać wielokrotnie.
Wklej jego kod w "pole na kod html" i będziesz miał baner.
-
2005/11/06 19:59:38
a nie ma tego baneru chociaż ze wkleiłem ten kod html a jak bym chciał mieć takie coś jak ty na blogu to the best of forum gazeta.pl czy coś takiego to jak to zrobić pomuż!!!
-
2005/11/06 20:03:25
a nie ma tego baneru chociaż ze wkleiłem ten kod html a jak bym chciał mieć takie coś jak ty na blogu to the best of forum gazeta.pl czy coś takiego to jak to zrobić pomuż!!!
-
2006/01/14 21:45:55
a c jak ja mam " #BlogTytulBox {
PADDING-TOP: 10px;
PADDING-BOTTOM: 2px;
} " i nie wiem kompletnie o co chodzi mimo ze czytam co tu jest napisane?
-
2006/02/01 10:30:37
poradziłam sobie.
teraz mam taki problem, ze zrobiłam wszytsko tak jak jest napisane powyzej a mimo to nie mam obrazka, wszystko podpisalam tak, jak jest wzasobach. :(
pomocy...
-
2006/04/29 13:10:46
prosze odezwij sie domnie na gg 3870418
-
2006/05/25 05:15:46
Zaladowalam gotowy szablon. Chcialabym pomniejszyc zdiecie w tle, bo jak wchodze na blog to tylko widze zdiecie i tytul blogu.
Podobal mi sie tez inny szablon, ale kolor trzcionki byl fatalny a nie wiem jak zmienic go na czarny.
-
Gość: , 194.204.135.21*
2006/05/26 21:25:59
jak, a przede wszystkim w jakim miejscu mam wstawić (height 100px)wysokość pudła tytułu bo tego tu nie ma a jest potrzebna, bo widnieje u mnie tylko wąska część mojegop obrazka, nie wiem czy to coś z moim obrazkiem nie w porządku, czy chodzi własnie o ta wysokość.
wstawiam różne wartości tej wysokości ale nic sie nie zmienia.
pozdrawiam
-
2006/05/27 11:53:09
Ja mam takie pytanie : czy zmieniając szablony co zdaża mi się co jakiś czas, poprzednie zostają zamienione nowymi, czy pozostają w pamięci zasobów bloga? Czy zmieniać zatem można bezkarnie, bez troski o zazbytnie zapełnianie pamięci?
-
Gość: Asik, eoc65.neoplus.adsl.tpnet.pl
2006/06/13 16:09:47
Heh, a jak się wkleja zamiast tła obrazek? obrazki w boxie umiem, ok, ale chciałabym mieć zamiast powiedzmy pomarańczowego tła takie kwiatki czy cos. Odpisz mi jak najpredzej, plisss. Potrzebna pomoc!!!!
-
2006/06/16 13:43:22
Ememzet, jaką szerokość ma BoxTytulText w szablonie klasycznym?
-
2006/06/16 18:17:33
A w ogóle, czy da się to zrobić w klasycznym? Chodzi o wstawienie niepowtarzającego się obrazka.
-
2006/06/19 01:51:02
A ja chciałbym wstawić obrazek nie w tle nazwy bloga tylko gdzieś obok niej, np. w górnym, lewym rogu. Jak to zrobić?

GG: 9524124