CSS pozadi v tagu DIV
Ahoj, delam jednu stranku a chtel bych na spodni cast stranky dat obdelnik s oblymi rohy jako pozadi a na tomto pozadi napsat neco jako "... vsechna prava vyhrazena ...".
Takhle vypada muj div:
<body>
<div>...text...</div>
<div id="spodek-prava">
... vsechna prava vyhrazena ...
</div>
</body>
A takhle CSS:
...
.cascade_code #spodek-prava { background-image: url(spodek_prava.png); background-repeat:no-repeat; width: 85%; }
...
Obrazek je o velikosti 2000px na 65px. Hrany spodniho pozadi(spodek_prava.png) by meli navazovat na kraje DIVu s textem. Problem je v tom, ze spodni pozadi(spodek_prava.png) se mne zobrazuje vzdy posunute vlevo ve Firefoxu/Opere a v IE zase uprostred tak jak ma byt, ale obly roh je jenom levy - obrazek neni zkracen na 85% pouze "oriznut" na 85% obrzovky. Zkousel jsem ruzne moznosti s background-position,margin a s pevnou velikosti pozadi, bohuzel se mne nedari nastavit obrazek presne uprostred + aby se zobrazovalo na 85% obrazovky.
Muzete mi prosim nekdo poradit kde delam chybu?
Diky.
Nevím, jak máš ten box veliký, ale obrázek musí být stejný jako box. Obrázek nijak nezmenšíš, maximálně ořízneš (85%)
myslel jsem ze to jde, proto jsem udelal pozadi spodniho obrazku az 2000px pro pripad, ze nekdo bude mit hodne siroky monitor :)
Horizontální rozlišení monitoru mám 2560px, takže tvoje odhady/dohady jsou na dvě věci. Boxy se zakulacenýma rohama se dělají úplně jinak, najdi si na Googlu CSS rounded corners.
Můžeš to tam dát i celé s nápisem jako obrázek (třeba) a nikdo nikdy od tebe z webu nezkopíruje ani čárku
1) Buď využij vlastnost z CSS 3 border-radius (zatím moc nedoporučuju)
2) nebo udělej 3 boxy vedle sebe (levé a pravé zaoblení obrázkem a prostřední s repeat-x)
3) nebo nastav celému webu pevnou šířku a neřeš, kdo má jaký monitor (nejčastější - dlouhé řádky se totiž špatně čtou)