Diskuze: pozadí na střed

HTML a CSS HTML a CSS pozadí na střed American English version English version

Avatar
kedarot
Člen
Avatar
kedarot:

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:

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
Redaktor
Avatar
Odpovídá na kedarot
Honza Bittner:

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
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na kedarot
Honza Bittner:

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
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
kedarot
Člen
Avatar
Odpovídá na Honza Bittner
kedarot:

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
Redaktor
Avatar
Odpovídá na kedarot
Honza Bittner:

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
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
kedarot
Člen
Avatar
Odpovídá na Honza Bittner
kedarot:

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

 
Nahoru Odpovědět 8.5.2014 17:48
Avatar
kedarot
Člen
Avatar
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na kedarot
Honza Bittner:

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
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
kedarot
Člen
Avatar
kedarot:

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
Redaktor
Avatar
Odpovídá na kedarot
Honza Bittner:

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  +2 8.5.2014 19:18
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
kedarot
Člen
Avatar
Odpovídá na Honza Bittner
kedarot:

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

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

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.