Rögzített háttérkép

[egerecske]

Sziasztok!

 

Hogyan tudom elérni, hogy a háttérképem fixen maradjon akkor is, ha a szöveg az oldalon hosszabb, mint ami kifér egy képernyőre? Egy fényképet tettem háttérnek, és nem szeretném, ha ismétlődgetne.

Másik kérdésem, hogy azt magától dönti el, hogy széltől-szélig ér a kép, vagy kell valamit állítanom rajta esetleg? Mekkora (pixelben) képet érdemes háttérnek tenni a fentiek figyelembevételével?

 

Még annyit, hogy a css-sel nem sikerült barátságot kötnöm, valami nagyon egyszerű html-es (tudom, a css is html, vagy legalábbis oylasmi) megoldás érdekelne...

 

Nagyon megköszönném, ha segítenétek!

 

Egerecske

[Csaba_1]

Hello!

 

A CSS-nek kb annyi köze van a HTML-hez, mint a csontnak az izmokhoz. A HTML az oldal csontja, alapja. A CSS pedig, mint egy izom, oda mozgatja, úgy alakítja az alapot ahogy szeretnéd. Szóval a CSS nem HTML szerintem.

 

(Remélem a példám nem volt nagyon rossz. )

 

Képet fixre állíthatsz, miután megadtad a css-nek, hogy hol van: background-attachment: fixed;

Az ismétlődést pedig ezzel tudod: background-repeat: repeat;

Ha repeat helyett azt írod, hogy repeat-x akkor vízszintesen, ha repeat-y akkor pedig függőlegesen fog ismétlődni.

 

Olyan képet adj meg, hogy ha esetleg kicsi lenne az ablakhoz képest és kiegészítené, akkor ne látszódjon az összetétele.

 

Egy link

[egerecske]

Szia!

 

Köszi a választ!

 

Nem, a példád tök jó.

Igen, tudtam én, hogy ezért a CSS-HTML dologért még kikapok majd :-), a lényege az lett volna, hogy anno próbáltam én css-t írni, de valahogy nem tudtam ráhangolódni, és feladtam, ezért a CSS-es megoldásokkal nem megyek sokra (majd egyszer talán megint nekiállok megérteni, de az nem most lesz). Szóval ilyen Judit-definíció szerint a CSS az kicsit a HTML fölötti szint, azaz nekem túl magas, viszont ha beírom, hogy "html" meg "fixed background", akkor a nagyobbik rész az CSS kód lesz.

 

Valami kódot aztán találtam (persze minden az otthoni gépemen van, én meg nem emlékszem már erre), amitõl Mozillában tényleg nem mozdult a kép, de még nem próbáltam másik böngészõt, így ez a része lehet, h. meg van oldva.

 

VISZONT most a képemnek hiányzik az alja. Szóval a koncepció az, hogy van az oldal, két szélén áll két alak, ez volna a "háttér" vagy "keret" minden oldalnál (2-3 oldal lenne max). Az infó köztük az "üres" térben jelenne meg. Ezt egyelõre úgy csináltam, hogy táblázatot tettem rá, két szélsõ oszlop üres, közepébe teszem a tartalmat.

Namost: az én monitoromon otthon ok a kép, de én Mozillát használok, van sok fül, ettõl ugye "szélesvásznúbb" lesz a képem, mint mondjuk olyan böngészõknél, ahol ez nincs. Illetve a monitoroknak is eltérhet a felbontásuk. Én azt szeretném, hogy akárhol nézi akárki, a két alak a 2 szélén mindig ott legyen, lehetõleg teljesalakosan. Ezt, ha nme nem írok repeat-et, magamtól is elérem, vagy kell valami (mittudomén, expand vagy hasonló, nem tudom, van-e erre szakszó), ami ráerõlteti, hogy a képet nagyítsa-kicsinyítse úgy, hogy pont az adott képernyõre férjen? Az arányok persze jó lenne, ha nem változnának, tehát mondjuk a kép szélességéhez igazodjon, és max az aljából vagy aljából/tetejébõl vágjon le, ha ez mégis más.

A táblázattal is az a gondom (bár képernyõszázalékban adtam meg a szélességeket), hogy nem fog-e mégis "rácsúszni" a szöveg az alakokra...

 

Minden 5letet ötletet köszi!

j.

 

Könyörgöm! >h.arpad

[h.arpad]

A fentiektől függetlenül:

 

Egyrészt HTML-ben is lehet formázni, de igen korlátozottak a lehetőségeid.

Másrészt a CSS nem lehet olyan nehéz, számos példát találhatsz a neten, elég, ha tetszőlegesen behozol egy oldalt és megtekinted a stíluslapját.

 

Döntsd el, hogy akarsz-e rendszeresen webszerkeszteni (akkor viszont megkerülhetetlen a CSS és könyvet kell venned hozzá), vagy ez csak egy egyszeri alkalom, amiből egy kis segítséggel kilábalsz. Nekem az az elvem, hogy, ha már belevágok valamibe akkor megtanulom, ha nem más hobbi lesz, egy kikapcsolódás, vagy éppen segíthetek másnak vele. De nem győzöm hangsúlyozni - főleg a nálam fiatalabbaknak (akik állítólag napi 2000 karakternél hosszabb szöget nem hajlandóak elolvasni), hogy tanuljanak könyvből, ha meg tudnak angolul, lehetőleg angol könyvből. Higgyétek már el, hogy nincs annál szebb, mint alapos tudást birtokolni, akkor is, ha azok csak az alapok.

[egerecske]

Jajj, ez tök jó, de már így is több hobbim van, mint ami belefér meló mellett a napomba (és még olvasni is szoktam, de éppen 2 nyelvből vagyok baromira lemaradva), így a CSS/HTML-tudás egyelőre tűzoltás jelleggel kell, éppen azért, hogy a többi hobbimról gyorsan össze tudjak dobni egy-egy lapot. :-P

 

Ezért is fantasztikus ez a fórum, és ezért örülök annyira Nektek, akiknek viszont ez a(z egyik) fő hobbijuk, és kisegítik az ilyen kapkodós-rohanós kocaszerkesztőket, mint amilyen én vagyok.

[payskin]

De csak akkor, ha megtalálod a Shift gombot a billentyűzeteden, és megígéred, hogy elolvasod, amit leírtál, mielőtt (vagy miután) elküldöd stb. Irgum-burgum.

 

Egyébként a fent vázolt képes dolgot nem tudod megoldani HTML-ből, sőt, még CSS-sel sem, ahhoz már JavaScript kell, de azzal sem lenne szép: a böngésző nem grafikus program, faék egyszerű benne a képátméretező rutin, a végeredmény pedig nagyon ronda lenne. Próbáld ki, hogy csinálsz egy HTML-oldalt, amibe beraksz egy sima képet, csak írd át a valódi méretét valami másra.

 

A Bumeráng weboldala valami olyasmi, amit te is csinálni szeretnél, persze a képek átméretezését ők sem oldották meg.

[Csaba_1]

OFF

 

Balázs, bocsánat, hogy off, de szerinted milyen a példám? Remélem nem túl beteg és nem is hülyeség.

[payskin]

Nem igazán jó, mert a CSS nem mozgat, a CSS a megjelenésért, a designért felel, ez pedig nem kimondottan jellemző az izmokra. Ha már, akkor a HTML a csont, a CSS, amit látunk kívülről egy emberből, és a JavaScript az izomzat.

[Csaba_1]

Igen, így tényleg így jobb, csak hirtelen a float-ra gondoltam, hogy az mozgat. Csak olyan nagyon nem tud mozgatni.

[egerecske]

Sziasztok!

 

Remélem, mindannyiótoknak szép karácsonya volt :-)

 

A háttérképem rögzítése sikerült, felmerült azonban ezzel kapcsolatban egy újabb probléma.

Az oldal úgy néz ki, hogy a háttérkép két szélén áll két alak (egyiken én, a másikon más), köztünk a szöveg, ami gördíthetõ, anélkül, hogy "mi is görögnénk", ami jó, pont ezt akartam. Nálam minden nagyon szép, de a srácnál más a felbontás, ezért õ saját magát már nem látja. Ha közelebb hozom magunkat egymáshoz, akkor lehet, hogy az õ gépén jól fog látszani, de az enyémen (itthon és a munkahelyen is) nyilván minden balra lesz "nyomva". Erre nincs valami megoldás...?

Az a baj, hogy ha kereteket használok, akkor (mivel a szöveg van középen) a közép jobboldalán lesz egy görgetõsáv, ami nem szép. Táblázattal vajon meg lehetne ezt oldani valahogy? Olyasmire gondolok, hogy a két szélsõ hasáb szélessége lenne valamilyen módon fix, a közepe meg a változó; ez esetben mûködhet az, hogy ha görgetni kell a szöveget, akkor a két szélén a kép állandó helyzetben marad?

 

szép estét

Judit

[payskin]

Korábban ajánlottam a bumerángot, igaz ott táblával oldották meg, és egyszerre "fogynak" vagy "híznak" felbontástól függõen.

[egerecske]

De a bumerángban a 2 fazon is görög, én meg nem akarok... azt szeretném, hogy ne tûnjön el a fejünk, ha valaki a lap aljára is kíváncsi. Nekem éppen az kellene, hogy a két szélén lévõ kép fixen maradjon, ahol van, csak a szöveget lehessen mozgatni.

[payskin]

De a két dolognak elvileg semmi köze egymáshoz, hiszen az, hogy fix legyen a háttér és ne görögjön, az egy

 

background-attachment: fixed

szabály beállítása. Ettõl teljesen független, hogy mikor, milyen felbontáson mennyi látszik belõlük -- szerintem.

 

[egerecske]

Szia!

 

Igen, valóban független. Én egy olyan megoldást keresek, ahol be tudom állítani úgy a háttérképet, hogy a két széle (a két figura) stabilan ott legyen a széleken (tehát nem úgy, mint a bumerángnál, ahol "eltûnnek", ha görgetek), miközben a közepén lévõ szöveg görgethetõ anélkül, hogy középen megjelenne egy sáv, és mindenféle felbontásban látszunk rajta mind a ketten.

Ez pedig szerintem csak úgy érhetõ el, ha úgy állítom be a háttérképet, hogy a képernyõ két szélébõl arányosan foglaljon el egy darabot, a közepének a szélessége pedig változhat annak függvényében, hogy mi a felbontás. Van erre vajon valami egyszerû megoldás? :-)

[Garono]

http://sanyierikszon.extra.hu/egerecske/index.html

 

Remélem erre gondoltál.

[egerecske]

Kedves Garono,

 

igeeeeeeeeeeeeeeeeen! :-)

 

Úgy látszik, mégiscsak kénytelen leszek hozzá valahogy megérteni a css mûködését... :-(

mit kell írjak a "background-sorba", hogy a kép ott legyen? Simán background: kep.jpg, mint ahogy a sima html-ben lenne, agy másképpen kell?

 

és köszönöm, köszönöm :-)

 

Üdv

Judit

[egerecske]

Illetve most már látom, hogy tettél képet is oda.

Megpróbálom ezek alapján megcsinálni az oldalt, aztán majd írok, hogy hogy sikerült :-)

 

[Garono]

Á, nem, nincs ott kép, csak a kódja. Igazából azt ki is lehetne törölni. De valóban, meg kellene értened hozzá a CSS működését, mert anélkül nehéz lesz megcsinálni.

 

Edit:

Ha képeket szeretnél a piros, illetve a kék sáv helyére, akkor a CSS-ben töröld ki ezt a két sort:

background-color: red;
background-color: blue;

És helyettesítsd őket ezekkel:

background-image: kep1.jpg;
background-image: kep2.jpg;

Ahol a két filenév a két kép, amit ki szeretnél tenni.

[egerecske]

Persze, úgy értettem én is, hogy beleírtad a kódba, hogy hová kell tegyem a képet. Ezek alapján a két képet szépen be tudtam tenni. Még annyi problémám van, hogy azért persze középre is szeretnék egy háttérképet (ami gyakorlatilag egy cím, de ez is kép, és ezt is rögzíteném), azt még nem sikerült belebűvölnöm ebbe a css-sablonba. Meg persze tényleg kellene olvasnom még róla valamit, hogy például betűszínt stb. hogyan tudok ebben módosítani...

 

Elvileg ha egy ilyen stíluslapot külön elmentek, akkor csak a közepe-szövegeknek kell külön html-lapokat csinálni, ezt meg belinkelem, és ott lesz szépen? Ezt is ki fogom próbálni.

 

Mindenesetre tényleg nagyon köszönöm, innen már sokkal könnyebb lesz. :-)

[egerecske]

Nahát, én nem is így csináltam, hanem alatta a

 

<div id="div1">

<img src="kep1.jpg" />

</div>

 

kódodba írtam bele, és nálam így is ott van.

 

Most még a közép-képpel fogok szórakozni egy kicsit, és ha nagy leszek, akkor tényleg megtanulom a css-t.

[Garono]

Természetesen úgy is jó, csak CSS-sel elegánsabb. De a célnak így is megfelel.

[egerecske]

Van még néhány dolog, amit most így hirtelen nem értek...

 

1. az elsõ oldalon nincs annyi szövegem, hogy görgetni kelljen, sõt... emiatt viszont (hiába állítottam be egy háttérszínt) a szöveg vége alatt fehér lett a közepe, ami nem jó. Gondolom, hogy a magasság megadásával van a gond (az "auto" azt jelenti eszerint, hogy addig érvényes, amíg van fölötte szöveg?). Ezt ilyenkor érdemes beállítani valami konkrét értékre? Mit jelent az "absolute" a "fixed"-hez képest?

 

2. én hiába írom be a css-be, hogy "background-image: kep1.jpg;", nem jelenik meg semmi. Igaz, a két oldalon nem kísérleteztem, de a közepénél így próbáltam, és nem jelent meg a képem.

 

 

[Garono]

1. Abosolute és fixed között a különbség csak annyi, hogy a beállított távolságokat (pl. felülrõl, vagy baloldalról) az oldalhoz képest értelmezze-e a böngészõ, vagy az ablakhoz. Erre a problémára azonban nem tudom a megoldást. Esetleg megpróbálhatsz olyan hátteret beállítani, amivel nem látszik, hogy le van vágva a szövegdoboz alja.

 

2. Mert rossz "kódot" adtam. Helyesen tehát:

background-image: url('kep1.jpg');

[KGigi]

Tegyél be egy üres divet az oldal aljára clear: both attribútummal. Nem próbáltam, de szerintem így lehúzza.

[Garono]

Nem húzza le, nem is húzhatja, hiszen a clear vagy jobboldalra, vagy baloldalra, vagy mindkét oldalra, vagy egyik oldalra sem vonatkozhat. De nincsen benne top vagy bottom.