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:

<html>
<head>
<meta content="text/html; charset=ISO-8859-2"
http-equiv="content-type">
<title>Index</title>
<style type="text/css">
body {
font-family: Arial Narrow;
background-repeat: no-repeat;
text-align: center;
font-style: normal;
line-height: normal;
color: black;
background-position: center top;
font-size: medium;
background-image: url(images/index.jpg);
}

</style>
<script language="JavaScript">
<!--
function na_open_window(name, url, left, top, width, height, toolbar, menubar, statusbar, scrollbar, resizable)
{
toolbar_str = toolbar ? 'yes' : 'no';
menubar_str = menubar ? 'yes' : 'no';
statusbar_str = statusbar ? 'yes' : 'no';
scrollbar_str = scrollbar ? 'yes' : 'no';
resizable_str = resizable ? 'yes' : 'no';
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);
}

// -->
</script>
<meta name="KEYWORDS"
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"
lang="HU">
<meta name="robots" content="all">
<meta name="DESCRIPTION"
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"
lang="HU">
</head>
<body>
<div style="text-align: left;"><span style="color: black;">Ajánlott
felbontás: 1024x768</span><br>
</div>
<table
style="text-align: left; width: 95%; margin-left: auto; margin-right: auto;"
cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td
style="vertical-align: top; background-color: transparent; white-space: nowrap; text-align: center;">
<p style="margin-left: 40px; color: black;"><big><big><big
style="font-weight: bold; text-decoration: underline;">ÁLLATVILÁGUNK</big><br>
</big>Magyarország emlősei, madarai, hüllői, néhány rovarfaja,
háziállataink,
díszállatok és tájaink.<br>
Háttérképek, hírek, az állatvilág érdekességei, jeles napjaink.</big></p>
<p style="margin-left: 40px; color: black;"><br>
</p>
<p style="margin-left: 40px; color: black;"><big><big><big><a
style="color: white; font-weight: bold;" href="kezdolap.html">BELÉPÉS</a><br>
</big></big></big></p>
</td>
</tr>
</tbody>
</table>
</body>
</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:

{
	background: url(images/kép.jpg) no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
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.