CSS-ben milyen kóddal lehet az alábbi fajta ismétlődést létrehozni?
Van egy kis kép. Azt akarom, hogy ez a kép a honlap tetején ismétlődjön a bal saroktól egészen a jobb sarokig, valamint ugyanez a kép ismétlődjön a bal felső saroktól a bal alsó sarokig.
Valamint van egy másik kép, amit egy másik honlapon akarom hogy körbe ismétlődjön, de csak az oldal 4 szélén.
Melyik kódokat kell ehhez használni CSS-ben?
body {
background-color: #9cc;
background-image: url(kep.gif);
background-repeat: repeat-x;
margin-top: 0;
margin-left: 0;
ez x tengelyen nyomja végig a képet, szerintem ugyanez x helyett y-nal. próbáld ki. én is pont ezt tanulom most.
}
Köszi a választ, de ezt a kódot már próbáltam.
Ha beírom, h repeat-x, akkor csak fenn ismétli,
ha pedig azt írom, h repeat-y, akkor meg csak oldalt
ha meg repeat-xy kódot írok, akkor betölti a teljes lapot...
Azért is írtam ki a kérdést, hogy mi a valóban megfelelő kód.
A w3schools oldalról tanultam, tanulok, de az ott olvasható kódok között nincs az, amelyik csak körbefuttatja a képet, valamint csak felső és bal oldalon ismétli.
Azt, hogy csak horizontálisan ismétlődjön, a repeat-x, a csak vertikális ismétlődést a repeat-y kóddal lehet elérni,
vagy ha simán repeat kódot adok meg, akkor a teljes oldalon ismétli....
De mi a kódja annak, ami a kérdésemben szerepel?
Köszönöm az eddigi válaszokat és a segítő szándékot.
Végül sikerült megvalósítanom!
A <div></div> és id tagek szükségesek hozzá.
Akit érdekel, holnap részletesebben leírhatom. :)
válasza:Engem erdekel.
Mert mondjuk van egy elkepzelesem hogy en hogy csinalnam, de kivancsi vagyok a te megoldasodra. :)
válasza:Több megoldás is létezik a problémára, de talán a legegyszerűbb egymásba ágyazott divek használatával megoldani:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " [link]
<html xmlns=" [link]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ismétlődő háttér</title>
<style type="text/css">
body{
padding:0;
margin:0;
}
#vízszintes{
width:100%;
background:url(vizszintes_hatter.jpg) repeat-x top left;
}
#fuggoleges{
width:100%;
background:url(fuggoleges_hatter.jpg) repeat-y top left;
}
</style>
</head>
<body>
<div id="vízszintes">
<div id="fuggoleges">
</div>
</div>
</body>
</html>
Ezzel a megoldással teljes szélességükben kitöltik a divek a böngészőablakot, a divek magassága pedig a bennük lévő tartalomtól függ. Dolgozhatsz akár fix px mértékegységű width és height tulajdonságokkal is.
A másik problémádra, hogy a kép 4 oldalon fusson körbe, csak 2 divvel kell még kiegészíteni a kódot, úgy hogy azokat egymásba ágyazod, és background tulajdonság bottom left és és top right attribútumait kell használnod értelemszerüen.
Máaik megoldás:
Esetleg lehet CSS3-ban bordernek képet beilleszteni.
Látom, megelőztek. :)
Én is ugyanúgy oldottam meg, ahgy azt a ma 11:04-kor válaszoló leírta. div és # elemek segítségével.
Kapcsolódó kérdések:
Minden jog fenntartva © 2024, www.gyakorikerdesek.hu
GYIK | Szabályzat | Jogi nyilatkozat | Adatvédelem | Cookie beállítások | WebMinute Kft. | Facebook | Kapcsolat: info(kukac)gyakorikerdesek.hu
Ha kifogással szeretne élni valamely tartalommal kapcsolatban, kérjük jelezze e-mailes elérhetőségünkön!