Autor Zpráva
Neas
Profil
Ahoj.
Nastavil jsem si u divu, obrázek na pozadí, který se nemá opakovat. Dá se nějak nastavit, aby se pod tímto obrázkem na pozadí zobrazoval dalsí, opakující se po ose y?
panther
Profil
Neas:
Dá se nějak nastavit, aby se pod tímto obrázkem na pozadí zobrazoval dalsí, opakující se po ose y?
ne.

Na pozadí jednoho prvku může být jedno pozadí, musíš to vymyslet jinak. Pokud to nezvládneš, můžeš nám ukázat konkrétní situaci, něco vymyslíme.
Taurus
Profil
V jednom divu jde manipulovat jen s jedním obrázkem :-|
Neas
Profil
a nedá se udělat něco s podobným efektem? viděl jsem to na těchto stránkách: http://147.32.8.168/?q=
věnujte pozornost pozadí - ten oražový rámeček má na sobě nejdříve obrázky, níže už je jen čistě oranžový. Když si jej zobrazím na pozadí, ukáže se mi tohle: http://147.32.8.168/themes/konoha_2010/img/sides_top1.png
Nevíte, jak webmaster docílil toho, že později jde vidět jen ta čistě oranžová a ty vzory jsou jen ze začátku?
panther
Profil
Neas:
jsou tam dva obrázky:
http://147.32.8.168/themes/konoha_2010/img/sides_top1.png
http://147.32.8.168/themes/konoha_2010/img/spodni_lista.jpg

Tady je to udělané dost špatně, zkus si zvětšit písmo nebo přidat text do obsahu. Všechno přeteče. Navíc jsou obrázky zbytečně velké.

Ideální postup tady by byl následující:
- šedý background na pozadí: 1px široký obrázek opaující se po ose X (nebude tedy součástí http://147.32.8.168/themes/konoha_2010/img/sides_top1.png)
- horní obrázek: to bude ten s tím vzorem
- prostřední obrázek: 1px vysoký, opakující se po ose Y
- dolní obrázek: cca 10px, dolní kulaté rohy

Jestli chceš pomoci s konkrétním designem, ukaž nám jej.
Neas
Profil
udělal jsem si tyto obrázky a chtěl jsem je nějak naskládat na pozadí, jak jsem napsal v prním postu:
http://neas.ic.cz/up.png
http://neas.ic.cz/back.png
http://neas.ic.cz/down.png
Myslím, že nepotřebují komentář, kam co patří
Trejpa
Profil
Neas:
#a { background: url(http://neas.ic.cz/back.png) repeat-y center; /* třeba i rozměry */ }
#b { background: url(http://neas.ic.cz/up.png) no-repeat center top; }
#c { background: url(http://neas.ic.cz/down.png) no-repeat center bottom; /* třeba i padding */ }
<div id=a><div id=b><div id=c>
Obsah.
</div></div></div>
panther
Profil
Neas:
přidej ještě HTML, ať nemusím vymýšlet, jak to bude celé vypadat (na kód, ale odkaz). Případně ukázku designu.

Možností je více. Tady je náznak jednoho možného řešení:
<div style="background: url('back.png') repeat-y; position: relative;">
    <div style="background: url('top.png') no-repeat; height: 20px; posiion: absolute; top: 0;"></div>
    <div style="background: url('down.png') no-repeat; height: 20px; position: absolute; bottom: 0;"></div>
    Obsah
</div>
Neas
Profil
Použil jsem kód, co poradil Trejpa, jen trošku upravený. Je to lepší, ale pořád ne a ne fungovat ta patička.
odkaz: http://neas.ic.cz/zkouska.php
zdroják: (je tam jen navíc nějaký js, to je jen reklamní lišta ic.cz)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<meta http-equiv="content-type" content="text/html; charset=Windows-1250" />
<meta http-equiv="content-language" content="cs-cz" />
  <title>Neas.ic.cz</title>
<script type="text/javascript" src="javascripts/jquery-1.4.js"></script>
<script type="text/javascript" src="javascripts/MojeZona.open.js"></script>
<style type"text/css">
body{
   text-align:center;
   }
p{
   margin-bottom:0;
   }
img{
   margin:auto;                                  
   display:block;
   }
#main{
   width:800px;
   height:1000px;
   /*background-color:DarkGray;*/
   background:url(bg/back.png) repeat-y center;
   text-align:left;
   margin:auto;
   }
#paticka{background:url(http://neas.ic.cz/down.png) no-repeat center bottom; 
   width:800px;
   height:35px;
   }
#logo{
   background:url(http://neas.ic.cz/up.png) no-repeat center top;
   width:800px;
   height:35px;
   }
</style>
  <body>
<script type="text/javascript" src="http://img.ic.cz/3/lista.black.win.js"></script>

<div id="main"><div id="paticka"><div id="logo">
  blabla <br>
  blabla <br>
  blabla <br>
  blabla <br>
  blabla <br>
  

</div></div></div>
  </body>
</html>
tiso
Profil
Neas: zruš tam height: xxx; 3x, prípadne ju nastavuj iba pre #logo
Trejpa
Profil
Neas:
Vůbec jsi nepochopil smysl. V řešení [#7] jde o simulaci jediného bloku se třemi pozadími. Všechny prvky tedy mají stejné rozměry. Šířku určuje ten vnější a ostatní se roztáhnou podle něj. Výška je určena velikostí obsahu. Veškeré další prvky potom přijdou dovnitř toho trojbloku.


Chceš-li to použít na situaci dle [#9], tak to lze ještě zjednodušit:
#vse { background: url(back.png) repeat-y center; width: 800px; }
#hlavicka { background: url(up.png) no-repeat center top; /* height: 100px; */ }
#obsah { } /* ani nemusí být */
#paticka { background: url(down.png) no-repeat center bottom; /* height: 100px; */ }
<div id=vse>
  <div id=hlavicka></div>
  <div id=obsah></div>
  <div id=paticka></div>
</div>


Edit: Chybička v kódu, ale bez vlivu na funkci.
Neas
Profil
Trejpa: když to udělám takhle, pořád se nezobrazuje patička.
Trejpa
Profil
Neas:
Funguje.

(Jen v IE jsou tvoje PNG obrázky tmavší díky gamma chunk.)
Neas
Profil
jo, promiň, jen jsem se překlikl při měnění názvů IDček. Tak už to funguje, díky :-)
Railbot
Profil
Jen taková zajímavost. Chce si to ještě pár let počkat na CSS 3, tam už vícenásobné pozadí nebude problém.
Chamurappi
Profil
Reaguji na Railbota:
Pokud vím, tak i v CSS 3 každé nastavení backgroundu resetuje všechna dříve nastavená pozadí, takže nebude možné dvěma různými selektory nastavit jednomu elementu dvě různá pozadí — což by teprve bylo zajímavé. Ušetření jednoho obalujícího elementu není zase tak moc lákavé, v tomto případě by ho nejspíš šlo ušetřit i s pseudoelementy z CSS 2.

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0