NOVINKA - Vstup do světa AI s ONLINE víkendovým kurzem Práce s umělou inteligencí od A do Z. Přihlas se ještě dnes!
NOVINKA - Online rekvalifikační kurz Java programátor. Oblíbená a studenty ověřená rekvalifikace - nyní i online.
Avatar
kedarot
Člen
Avatar
kedarot:8.5.2014 16:22

Ahoj,

mam pozadí jako tmavou plochu a do prostřed potřebuji dát světlý odstín.. který je ale širší než malé monitory,a proto mi to nejde nastavit aby se to zobrazovalo na stredu. :(

body {
font-family:Oranda AT;
text-decoration:none;
list-style:none;
ground:url(../im­g/pozadi.jpg) repeat;
color:#FFF;
}

#obal {
width:2000px;
height:1009px;
background:ur­l(../img/poza­di_svetle.png) no-repeat;
margin:0 auto;
}

 
Odpovědět
8.5.2014 16:22
Avatar
kedarot
Člen
Avatar
kedarot:8.5.2014 16:27

pokracovani...

nevite jak udelat aby to bylo na stredu aniz bych musel rolovat posuvnikem do stran?

 
Nahoru Odpovědět
8.5.2014 16:27
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na kedarot
Honza Bittner:8.5.2014 17:34

Pozadí se v CSS určuje takto:

background-color: color || #hex || (rgb / % || 0-255);

background-image: url(URI);

background-repeat: repeat || repeat-x || repeat-y || no-repeat;

background-position: X Y || (top||bottom||center) (left||right||center);

background-attachment: scroll || fixed;

Samozřejmě to lze vše nacpat do zkrácené verze "background".
Pro tvůj případ to lze zapsat takto:

background: url('...') no-repeat center center fixed;

Stačí takto? :)

Nahoru Odpovědět
8.5.2014 17:34
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na kedarot
Honza Bittner:8.5.2014 17:40

Pod tento zápis ještě dej řádek:

background-size: cover || contain;

Cover roztáhne pozadí tak, aby se jeho menší strana roztáhla co nejvíce.
Contain roztáhne obrázek tak, aby se vešel celý.

Záleží na tobě jaký efekt chceš... :)

Editováno 8.5.2014 17:40
Nahoru Odpovědět
8.5.2014 17:40
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
kedarot
Člen
Avatar
Odpovídá na Honza Bittner
kedarot:8.5.2014 17:44

Děkuji za odpověď, ale bohužel nefunguje :(..
pořád musím dolním posuvníkem posunout stránku na střed..(

 
Nahoru Odpovědět
8.5.2014 17:44
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na kedarot
Honza Bittner:8.5.2014 17:45

Možná máš špatně nastylované elementy, které se roztahují i přes tvé rozměry obrazovky... ?

Můžeš poslat kód, nebo nejlépe vložit web někam online. :)

Nahoru Odpovědět
8.5.2014 17:45
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
kedarot
Člen
Avatar
Odpovídá na Honza Bittner
kedarot:8.5.2014 17:48

Dobře dám to na net, ale chvilku to potrvá ;)..

 
Nahoru Odpovědět
8.5.2014 17:48
Avatar
kedarot
Člen
Avatar
kedarot:8.5.2014 18:31

odkaz zde:
http://hrabal.kedarot.moxo.cz
:-)

 
Nahoru Odpovědět
8.5.2014 18:31
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na kedarot
Honza Bittner:8.5.2014 18:57

Jak jsem si myslel... Máš nastavený #obal na 1923px... to by tam býti nemělo... :)

Nahoru Odpovědět
8.5.2014 18:57
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
kedarot
Člen
Avatar
kedarot:8.5.2014 18:59

Super děkuji :) už to funguje.. Myslel jsem ze tam musí být šířka, ale funguje to i bez ní, Moc Ti děkuji ;)

 
Nahoru Odpovědět
8.5.2014 18:59
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na kedarot
Honza Bittner:8.5.2014 19:18

Doporučuji také body (i html) nastavit výšku 100%.
Obrázky - oba dva - následně dáš na body pomocí CSS3 multiple background:

background: url(../img/pozadi_svetle.png) no-repeat center center fixed, url(../img/pozadi.jpg) repeat;

Tak docílíš toho, že bude světlý efekt vždy uprostřed. :)

Doporučuji ti dát si ještě před tento kód jiný background, který bude obsahovat pouze to tmavé, hlavní, pozadí. To kvůli těm prohlížečům, které neumí multiple background... :)

Editováno 8.5.2014 19:19
Nahoru Odpovědět
8.5.2014 19:18
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
kedarot
Člen
Avatar
Odpovídá na Honza Bittner
kedarot:9.5.2014 13:18

díky za rady, určitě to udělám ;)

 
Nahoru Odpovědět
9.5.2014 13:18
Avatar
kedarot
Člen
Avatar
Odpovídá na kedarot
kedarot:9.5.2014 13:32

lepší rada než jsem myslel... je to takhle mnohem lepší (a určitě toho využiji i v budoucnu), děkuji :)
A jestli bych mohl poprosit ještě o jednu radu?..
..Nevím jak udělat dvojitou čáru každou jinak barevnou.Potřebuji dvě svislé čáry úplně vedle sebe široké 2px a každá s jinou barvou, ale nic mě nenapadá :D

napadlo mě jen toto, ale to je hloupost :( :D
border-right:solid 2px #262527;
border-left:solid 2px #363536;

 
Nahoru Odpovědět
9.5.2014 13:32
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 13 zpráv z 13.