ugrás a tartalomhoz

háttérkép automatikus méretezése

resonic · 2008. Dec. 22. (H), 22.38
Sziasztok.

Szeretném, hogy egy hagyományos HTML oldal háttérképének mérete automatikusan igazodjon az aktuális ablakmérethez. Tudtok erre vmi megoldást?

Köszi.
‹ Fix méretű div és a vertical-align: middle Egy elem láthatósága ›
 ■
1

Nincs lehetőség háttérkép esetén

Poetro · 2008. Dec. 23. (K), 00.26
Erre nincsen lehetőség háttérkép esetén, ugyanakkor egy képet kirakhatsz amit akkorára méretezel amekkora a látható terület, és fölé pakolod az összes tartalmadat, és ez hasonló hatást kelt.

ui: Mondjuk nem hinném hogy ugyanaz a kép jól nézne ki 240x240-es, 800x600, 1024x768 vagy mondjuk 1680x1050-es felbontás mellett, főleg a böngésző által átméretezve.
2

A mostaniak már jól

Fraki · 2008. Dec. 23. (K), 06.27
A mostaniak már jól méreteznek.
3

Stu Nicholls lesz a barátod

sotetbarna · 2008. Dec. 23. (K), 09.31
http://www.cssplay.co.uk/layouts/background
4

Pont ez az

Poetro · 2008. Dec. 23. (K), 13.35
Pont ez az a megoldás amit az első megjegyzésemben írtam, de ha megnézed, mondjuk az ablakot átméretezve máris nem néz ki olyan jól az egész, főleg mivel torzul a kép.
5

Igazad van...

sotetbarna · 2008. Dec. 23. (K), 19.58
de úgy kell annak, aki ilyet akar...

személy szerint azok a hátterek tetszenek, amikben van valami "trükk"

http://www.webleeddesign.com/
http://silverbackapp.com/


de most itt nem ennyire trükkös megoldás kellett
6

Állat

gabesz666 · 2008. Dec. 24. (Sze), 00.05
Nagyon jó az első link! :)
7

Sziasztok!

Gorcsev Iván · 2012. Már. 3. (Szo), 20.05
Szeretném megkérdezni, hogy született-e valami megoldás a feltett kérdésre? Szintén weblapot szerkesztek, és ugyanebben a problémában akadtam el. Az első link alapján látom hogy van megoldás, így szeretném én is megoldani! Minden segítséget előre is megköszönök! Jelenleg itt tartok, próbából egy-két lapot feltöltöttem erre a tárhelyemre: allatvilagunk.atw.hu
A régi, és egyben kész lapomat megtekinthetitek itt: allatvilagunk.hu
ezt szeretném átalakítani a fenti módon!
Üdv mindenkinek: Gori
8

Nem

Poetro · 2012. Már. 3. (Szo), 20.45
Szerintem az illető azóta, azaz több mint két éve nem is látogatott vissza a Weblaborra. Amivel meg lehet oldani, hogy veszel egy hagyományos képet (<img>), és fölé pozicionálod a tartalmadat. A képeket meg ugye elég szabadon lehet méretezni a háttérképekkel ellentétben. Amennyiben viszont nem érdekel a böngésző támogatottság, akkor használhatsz CSS3-at, abban van background-size nevű tulajdonság.
9

Köszönet!

Gorcsev Iván · 2012. Már. 3. (Szo), 21.44
Kedves Poetro!

Köszönöm szépen a segítségedet, holnap átnézem az ajánlott oldalt, remélem megoldást nyújt a számomra! A kérdés dátumát nem is figyeltem, mert már jó ideje kerestem ezt a témát, és igen nehezen akadtam rá ebben a fórumban. Ha esetleg nem boldogulok, fordulhatok még Hozzád részletesebb infóért? Ha sikerül megoldanom, akkor is jelentkezek. Még egyszer Köszi!
Üdv: Gori
10

Szia Poetro!

Gorcsev Iván · 2012. Már. 4. (V), 17.32
Ismét hozzád fordulok, mert elolvastam a CSS3-ról szóló oldalt, de nekem olyan, mintha kínaiul írták volna, nem lettem tőle okosabb!:(
Jelenleg itt tartok az oldalammal, ha mondjuk 1280x1024-es bontásra állítom a monitort, a háttérkép csak a monitor közepén van, és nem tölti ki azt. Ha ebben tudnál segíteni, hogy a háttér mérete mindig igazodjon a felbontáshoz, mint ennél az oldalnál: http://www.cssplay.co.uk/layouts/background

A lapom html-je jelenleg így néz ki:
  1. <html>  
  2. <head>  
  3. <meta content="text/html; charset=ISO-8859-2"  
  4. http-equiv="content-type">  
  5. <title>Index</title>  
  6. <style type="text/css">  
  7. body {  
  8. font-family: Arial Narrow;  
  9. background-repeat: no-repeat;  
  10. text-align: center;  
  11. font-style: normal;  
  12. line-height: normal;  
  13. color: black;  
  14. background-position: center top;  
  15. font-size: medium;  
  16. background-image: url(images/index.jpg);  
  17. }  
  18.   
  19. </style>  
  20. <script language="JavaScript">  
  21. <!--  
  22. function na_open_window(name, url, left, top, width, height, toolbar, menubar, statusbar, scrollbar, resizable)  
  23. {  
  24. toolbartoolbar_str = toolbar ? 'yes' : 'no';  
  25. menubarmenubar_str = menubar ? 'yes' : 'no';  
  26. statusbarstatusbar_str = statusbar ? 'yes' : 'no';  
  27. scrollbarscrollbar_str = scrollbar ? 'yes' : 'no';  
  28. resizableresizable_str = resizable ? 'yes' : 'no';  
  29. window.open(url, name, 'left='+left+',top='+top+',width='+width+',height='+height+',toolbar='+toolbar_str+',menubar='+menubar_str+',status='+statusbar_str+',scrollbars='+scrollbar_str+',resizable='+resizable_str);  
  30. }  
  31.   
  32. // -->  
  33. </script>  
  34. <meta name="KEYWORDS"  
  35. content="Magyarország,Magyar,hazai,hazánk,állat,állatok,állatvilág,emlős,madár,hüllő,rovar,háziállat,díszállat,hobbyállat,fotó,háttérkép,állathang,videó,bannercsere,hírek,érdekességek,állati legek,jeles napok,környezetismeret,élővilág"  
  36. lang="HU">  
  37. <meta name="robots" content="all">  
  38. <meta name="DESCRIPTION"  
  39. content="Mindent az állatokról!Magyarország állatvilága,emlősei,madarai,hüllői,rovarai,háziállatai,dísz-hobbyállatok,állat fotók,állatos háttérképek,mp3 állathangok,állatos videók,ingyenes bannercsere,állatos hírek,az állatvilág érdekességei,állati legek"  
  40. lang="HU">  
  41. </head>  
  42. <body>  
  43. <div style="text-align: left;"><span style="color: black;">Ajánlott  
  44. felbontás: 1024x768</span><br>  
  45. </div>  
  46. <table  
  47. style="text-align: left; width: 95%; margin-left: auto; margin-right: auto;"  
  48. cellpadding="2" cellspacing="2">  
  49. <tbody>  
  50. <tr>  
  51. <td  
  52. style="vertical-align: top; background-color: transparent; white-space: nowrap; text-align: center;">  
  53. <p style="margin-left: 40px; color: black;"><big><big><big  
  54. style="font-weight: bold; text-decoration: underline;">ÁLLATVILÁGUNK</big><br>  
  55. </big>Magyarország emlősei, madarai, hüllői, néhány rovarfaja,  
  56. háziállataink,  
  57. díszállatok és tájaink.<br>  
  58. Háttérképek, hírek, az állatvilág érdekességei, jeles napjaink.</big></p>  
  59. <p style="margin-left: 40px; color: black;"><br>  
  60. </p>  
  61. <p style="margin-left: 40px; color: black;"><big><big><big><a  
  62. style="color: white; font-weight: bold;" href="kezdolap.html">BELÉPÉS</a><br>  
  63. </big></big></big></p>  
  64. </td>  
  65. </tr>  
  66. </tbody>  
  67. </table>  
  68. </body>  
  69. </html>  
11

mintha kínaiul írták

Poetro · 2012. Már. 4. (V), 18.52
mintha kínaiul írták volna

Pedig angolul van, és ha tényleg akarsz ezzel foglalkozni, akkor legalább olvasni, és valamennyire írni is tudni kell angolul. A fenti kódot nem színezted, így "nem tudom" elolvasni. Próbálkozz újra, és csak a lényeget hagyd benne.
Nem látok benne sehol background-size-ra utaló nyomokat sem. Az ajánlott felbontás szöveg pedig nevetséges. Szerintem ma nem is nagyon van olyan kijelző, aminek a felbontása 1024x768 (talán csak a tabletek). A táblázat milyen szerepet tölt be az oldalon? Mert szerintem a csak feleslegesen van ott.
12

Amit feleslegesnek láttam,

Gorcsev Iván · 2012. Már. 4. (V), 21.43
Amit feleslegesnek láttam, azt kiszedtem az oldalból, valóban értelmetlen volt a táblázat benne. Ezzel a kóddal sikerült megoldanom a problémát:
  1. {  
  2.     background: url(images/kép.jpg) no-repeat center center fixed;  
  3.     -webkit-background-size: cover;  
  4.     -moz-background-size: cover;  
  5.     -o-background-size: cover;  
  6.     background-size: cover;  
  7. }  
Ezen az oldalon találtam, ha esetleg rajtam kívül más is erre a kérdésre keres megoldást: http://css-tricks.com/perfect-full-page-background-image/
Még egyszer nagyon szépen köszönöm a segítségedet!!!
Üdv: Gori
13

Szinező

janoszen · 2012. Már. 4. (V), 23.28
Gori légy oly kedves a színezőt használni. Többször nem szólunk érte.