Eredmény: 1 - 10 (10) összesen

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

  1. #1
    Szerkesztő
    Csatlakozott
    11-06-06
    Hozzászólás
    240
    Begyűjtött 24 köszönetet
    16 hozzászólásával

    Alapbeállítás Böngészőablak méretű háttérkép

    Ü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.



  2. #2
    Bölcs ARTidas logója
    Csatlakozott
    09-09-15
    Hely
    Budapest
    Hozzászólás
    1.465
    Thanked 1 Time in 1 Post

    Alapbeállítás re: Böngészőablak méretű háttérkép

    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,


    Utoljára módosítva: ARTidas által : 2012-01-30 18:44 Oka: link lett beszurva veletlenul

  3. #3
    'Say Hello To My Little Friend'
    Csatlakozott
    10-04-13
    Hely
    Budapest
    Hozzászólás
    2.784
    Begyűjtött 863 köszönetet
    659 hozzászólásával

    Alapbeállítás re: Böngészőablak méretű háttérkép

    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.



  4. #4
    Szerkesztő
    Csatlakozott
    11-06-06
    Hozzászólás
    240
    Begyűjtött 24 köszönetet
    16 hozzászólásával

    Alapbeállítás re: Böngészőablak méretű háttérkép

    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ó.



  5. #5
    Bölcs huncyrus logója
    Csatlakozott
    07-04-26
    Hely
    EU :)
    Hozzászólás
    519
    Begyűjtött 4 köszönetet
    4 hozzászólásával

    Alapbeállítás re: Böngészőablak méretű háttérkép

    É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]


    Utoljára módosítva: huncyrus által : 2012-01-31 15:12 Oka: 500. comm
    Cyrusmagus.hu - Informatika, Fantasy, Blog, Irások

  6. #6
    Szerkesztő
    Csatlakozott
    11-06-06
    Hozzászólás
    240
    Begyűjtött 24 köszönetet
    16 hozzászólásával

    Alapbeállítás re: Böngészőablak méretű háttérkép

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



  7. #7
    Szerkesztő djjean logója
    Csatlakozott
    11-10-15
    Hely
    Baja
    Hozzászólás
    210
    Begyűjtött 47 köszönetet
    43 hozzászólásával

    Alapbeállítás re: Böngészőablak méretű háttérkép

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



  8. #8
    'Say Hello To My Little Friend'
    Csatlakozott
    10-04-13
    Hely
    Budapest
    Hozzászólás
    2.784
    Begyűjtött 863 köszönetet
    659 hozzászólásával

    Alapbeállítás re: Böngészőablak méretű háttérkép

    Idézet huncyrus eredeti hozzászólása Hozzászólás megtekintése
    - 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.



  9. #9
    Bölcs benedictus logója
    Csatlakozott
    10-04-23
    Hozzászólás
    1.574
    Begyűjtött 2 köszönetet
    2 hozzászólásával

    Alapbeállítás re: Böngészőablak méretű háttérkép

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



  10. #10
    'Say Hello To My Little Friend'
    Csatlakozott
    10-04-13
    Hely
    Budapest
    Hozzászólás
    2.784
    Begyűjtött 863 köszönetet
    659 hozzászólásával

    Alapbeállítás re: Böngészőablak méretű háttérkép

    Idézet benedictus eredeti hozzászólása Hozzászólás megtekintése
    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>



    Utoljára módosítva: Emphus által : 2012-02-01 02:20

Könyvjelzők

Hozzászólás szabályai

  • Új témákat nem hozhatsz létre
  • Válaszokat nem küldhetsz
  • Fájlokat nem csatolhatsz
  • A hozzászólásaidat nem módosíthatod
  •