Böngészőablak méretű háttérkép

**Lopez** · 2012-01-30, 16:21

Üdv!
Egy html és talán css-javascript problémám van. A feladat marha egyszerű:
egy teljesen egyszerű html oldalnak szeretnék olyan hátteret, ami a böngésző ablak méretét követi. Tehát ha a csóka 800x600-ban nézi vagy 1440x900-ban, akkor is legyen jó a kép. A képarányt nem muszáj megtartani, tehát ha optimalizáljuk 4:3-as felbontáshoz, akkor nem baj, ha valaki widescreenel nézi és a kép kicsit nyúlik. Csak legyen jó többféle felbontásnál.
Olvastam a neten többféle megoldást, de egyik sem volt teljesen érthető számomra és láttam, hogy van, amit régi böngészők nem esznek meg. Ha valaki leírná szájbarágósan, hogy ezt tedd a html fájlba, ezt tedd a css fájlba (ha egyáltalán kell hozzá két fájl

), megköszönném.
Ja még annyit, hogy a teljes ablak legyen kattintható, ami egy linkre viszi a látogatót. Ez egy előszoba oldal lesz... Remélem nem bonyolult.

Hasonló témák:

**ARTidas** · 2012-01-30, 17:39

Pár egyszerűsítő megoldást szoktam ezekre alkalmazni:

1. 2 kép a tartalmi keret szélén: példa: sudoku.artidas.hu
ha jobban széthúzod, mint egy alap widescreen felbontás, akkor előbukkan a csupasz háttér.

2. végteleníthető minta: példa: katalogus.artidas.hu egyszerűen van egy végteleníthető kép, mely a background-repeat utasítással mind x és y tengelyen ismétlődik.

Az, hogy dinamikusan méreteződjön, az javascript (onload, onresize,...?) lesz, de ez eszi a felhasználó memóriáját és akinek tiltva van a JS, annál pedig lehet, hogy ronda lesz a végtermék. Gondolj arra, ha elkezdi ide-oda húzogatni a böngésző szélességét/magasságát

Javaslatom: mivel egy egyszerű háttérkép nem ér meg ennyi macerát és erőforrást, javaslom válassz a fentiek közül egy megoldást és úgy alakítsd át a háttérképet. (vágd ketté vagy végtelenítsd)

Cheers,

**Emphus** · 2012-01-30, 17:57

JS nélkül is megoldható, csak nem háttérképjént, hanem sima img-ként kell berakné, szélesség, magasság 100%. A trükk annyi, hogy absolute postiont adsz meg neki, majd az egész tartalmat ráúsztatod (fölé), így olyan, mintha háttérkép lenne, valójában egy kép, ami fölé toltad a tartalmat.

Kód:

<img src="kep_eleresi_utvonal.kiterjesztes" style="postion:absolute; height:100%; width:100%;">
<div style="postion:relative">
   Tartalom
</div>

És talán érdemes még a body-ra is nyomni valami formázást, mert ha megjelenik a görgetőság (hosszú tartalom), akkor csökken a képernyő szélessége, így a kép ki fog lógni, és lesz egy vízszintes görgetősáv. El lehet vele játszani egy picit, de működik.

**Lopez** · 2012-01-30, 22:43

Köszi mindkettőtöknek. Holnap tesztelem. Nem kell, hogy háttérkép legyen, lehet sima img is. A repeat-es kép nem megy, egy kifejezett képről van szó.

**huncyrus** · 2012-01-31, 14:10

Én is Emphus megoldását javaslom, vagy annak css variációit. Elég sok full background oldal és tutorial van.
Itt egy kis segítség hozzá:

- css alapon (én főként ezt használom)
- jquery alapon - ezt még nem teszteltem, de ígéretesnek tűnik
- css alapokon #2
- js fun

Példák:
- Egyszerű példák, amelyekből ellesheted a dolgokat
- Példák amelyekből kiszedheted az alternatívákat

[off]
Update: 500. hozzászólás

[/off]

**Lopez** · 2012-01-31, 20:48

Köszi mindenkinek a hozzászólást! Végül Emphus egyszerű megoldását választottam.

**djjean** · 2012-01-31, 21:42

Köszi! Jó Trükkök! Párat még nem láttam

**Emphus** · 2012-01-31, 22:25

huncyrus eredeti hozzászólása

- css alapon (én főként ezt használom)
- css alapokon #2

Ez a kettő lényegében ugyan az amúgy, csak a másiknál már kevésbé necces a kompatibilitás. Sőt, a második hivatkozik is az elsőre, csak kiegézíti. Szóval én azt javaslom térj át a css #2 megoldásra, hisz jobb.

**benedictus** · 2012-01-31, 22:36

Ha már itt tartunk, tud valaki pársoros megoldást esetleg div screenhez való vertikális középre helyezéshez?

**Emphus** · 2012-02-01, 01:18

benedictus eredeti hozzászólása

Ha már itt tartunk, tud valaki pársoros megoldást esetleg div screenhez való vertikális középre helyezéshez?

Fogsz egy 100% magas divet, aminek adsz egy display:table értéket, majd belepakolsz egy másik divet, aminek adsz egy display:table-cell értéket, és így már használhatod rá a vertical-align-ot:

Kód:

<style>
html {
	height:100%;
}

body {
	height:100%;
	margin:0px;
}
</style>
<body>
  <div style="display:table; height:100%;">
    <div style="display:table-cell; vertical-align:middle;">
        Egy kevés szöveg<br>
        Ami a képernyő közepén<br>
        Jelenik meg.
    </div>
  </div>
</body>

Nem tudom mennyire cross-browser, nálam a modernebb böngészők új verziói alatt tökéletesen megy. Igazából a kódot két helyről ollóztam netről + saját fejemből, aztán kiszedtem belőle a felesleges részeket. Gyanítom, ilyen formában már tuti cross-browser:

Kód:

<style>
html {
	height:100%;
}

body {
	height:100%;
	margin:0px;
}
</style>
<body>
  <div style="display:table; height:100%; #position: relative; overflow: hidden;">
    <div style="#position:absolute; #top:50%; display:table-cell; vertical-align:middle;">
      <div style="#position:relative; #top: -50%;">
        Egy kevés szöveg<br>
        Ami a képernyő közepén<br>
        Jelenik meg.
      </div>
    </div>
  </div>
</body>