Autor Zpráva
ratatul
Profil *
Dobrý den, mám stránku, na které mám klasicky pozadí stránky, a rád bych aby zůstalo pozadí jak je, ale když se jede dolů, tak pozadí končí a je tam šedo a nevypadá to dobře. Rád bych aby to pokračovalo podobně jako celá stránka, ale jen bílý list v pozadí, obrázky v pozadí za listem už bych tam nechtěl. Dobře, vytvořím si jen tel list bez obrázku vzadu, ale jak ho tam dát, aby byl dolu do nekonečna a začínal tam, kde končí první pozadí. Děkuji.
Odkaz na stránku: http://gaarners.bluefile.cz/pages/pc.html

Děkuji.
Juraj Hajdúch
Profil
prečítajte si toto Background-image a pochopíte to, je to jednoduché
Tomáš123
Profil
ratatul:
Nejde vytvoriť nekonečný obrázok. Je možné vytvoriť extrémne dlhý obrázok, ktorý by sa stále orezal. Skôr by som ale išiel cestou opakovania obrázku. Skrátka určite sa na obrázku opakuje nejaký vzor. Zachytíš ho v jednom obrázku a pomocou background-repeat: repeat-y aplikuješ potrebné správanie.

Alternatívne môžeš aj vytvoriť obrázok, ktorý plynule prejde do jednej farby, ktorú potom nastavíš ako pozadie.
ratatul
Profil *
Dobře, vytvořím si obrázek, zachytím ten vzor a jak ho umístím na konec toho prvního obrázku, pokud možno ne v css, jelikož chci pro každou stránku jiný obrázek. Děkuji
Keeehi
Profil
ratatul:
jak ho umístím na konec toho prvního obrázku
Nastavíš to nadřazenému prvku.

pokud možno ne v css
CSS je víceméně jediná možnost.
Juraj Hajdúch
Profil
ratatul:
pokud možno ne v css
Tak archaické HTML umožňovalo vložiť pozadie cez atribút, napr. <body background="bgimage.jpg">, ale to bolo asi tak všetko. To, čo požadujete vy, bez CSS nespravíte (?).

Ak by ste si prečítali článok, na ktorý som linkoval, a súvisiace css vlastnosti, vyriešili by ste všetko, na čo sa pýtate.
ratatul
Profil *
Tady mám tedy ten css na stránce, a rád bych aby ten druhý se opakoval a byl položený za tím hlavním.
<style>
body {background-image: url(../images/sd.jpg), url(../images/pozadiserial.jpg); background-position: center bottom; ; }
</style>  
Tomáš123
Profil
ratatul:
Pre viac hodnôt sa používa trochu iná syntax. Pri dvoch hodnotách musia byť všade hodnoty dve.

Bráni ti niečo deklarovať prvý obrázok nejakému ďalšiemu vnorenému prvku? Splní to obidve kritéria a nebudeš mať problémy s kompatibilitou. Viac pozadí je CSS3 a funguje asi až od IE9...
Juraj Hajdúch
Profil
Skúste toto:
<style>
body  {
  background-image: url(../images/sd.jpg);
  background-position: center top;
  background-repeat: repeat-y; // alebo repeat-x, no-repeat, repeat (x aj y)
  background-attachment: fixed; // alebo scroll (bude akoby priklincované na pozadí)
)
</style>
Tomáš123
Profil
Juraj Hajdúch:
bude akoby priklincované na pozadí
Kvôli čomu nebude vidno druhý obrázok :-/.
ratatul
Profil *
Juraj Hajdúch:
No jo, ale kde je ten druhý obrázek?


No vypadá, že už jsem na to přišel.

<style>
body  {
  background-image: url(../images/sd.jpg);
  background-position: center top;
  background-repeat: no-repeat; // 
  background-attachment: fixed; // 
}
html  {
  background-image: url(../images/pozadiserial.jpg);
  background-position: center top;
  background-repeat: repeat; // 
  background-attachment: fixed; // 
)
</style>   
Keeehi
Profil
ratatul:
No jo, ale kde je ten druhý obrázek?
Dva obrázky do jednoho prvku nenacpete. Proto musíte mít 2.
<vnejsi>
    <vnitrni>
        ...
    </vnitrni>
</vnejsi>
vnejsi {
    background:; /*opakujicí se pozadí*/
}
vnitrni{
    background:; /*to pozadí co tam máte teď, no-repeat*/
}

Je jedno, jestli ty 2 elementy jsou html a body, nebo body a div, nebo div a div a nebo něco úplně jiného. Je v zásadě jedno co použijete. Jde o to, že v tom vnějším elementu se bude od shora až dolů opakovat to pozadí které chcete. A aby to bylo nahoře jiné se zajistím tím vnitřním, jehož pozadí překryje vršek vnějšího.
Bubák
Profil
Keeehi:
Dva obrázky do jednoho prvku nenacpete.
Prohlížeče od IE 9 umí vícenásobné pozadí. Přesto, nebo spíše proto, doporučuji použít uvedené řešení.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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

0