TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Návštěvník
Existuje v CSS nějaký atribut, který upraví šířku proužku pozadí podle rozlišení uživatele? Přes klasické pozicové img atributy to nejde. Hrál jsem si s tím celý den, prošel všechny učebnice i na webu, ale zaseklo jsem se. Děkuji za případnou radu. přikládám i link na backround. Mám to na rozlišení 1280x1024.
http://podlesin.eu/soubory/txtbg.gif
Fórum › CSS
Backround-image a rozlišení
Nahlásit jako SPAM
IP: 85.160.11.–
Věrný členTo Paja2 : To jsem zkoušel a nefungovalo to. Ještě zkouším dál.
Super členTo Zeleny_Muzik : Zkus JS !
Mohlo by to bejt takhle. Vyzkoušej to nejsem si tim jistej, psal sem to z fleku
<html>
<head>
<style type="text/css">
div{
border:1px solid black;}
</style>
</head>
<body>
<div id="pozadi">
obsah
</div>
<script type="text/javascript">
document.getElementById('pozadi').style.width=screen.availWidth;
</script>
</body>
</html>To don_Dominique : Díky moc, ale to neřeší můj problém, leda by se mi chtělo to ručně házet do 176 stránek.
Zkoušel jsem to přes validátor CSS a asi žádný atribut zatím není. :smile10: .
Přes JS jsem zkoušel zjištění rozlišení a následné načtení příslušného bg, to sice funguje, ale je to krkolomné řešení. Ono to pozadí nehází žádnou chybu, akorát se těm co mají menší rozlišení než 1280x1024 tak neuvidí ten proužek na pravé straně.
No uvidíme, třeba nějaký koumák ví jak na to, nebo budu muset počkat na CSS3.
Už jsem na to asi přišel. Tak až to bude hotové tak sem dám řešení.
ExpertPokud chceš jednoduší script tak tady: http://forum.builder.cz/read.php?26,2033493,2035270
Ale v praxi bych to nedělal ;) Nikdy!
NewbieTo Gabo : Obrázek na pozadí mám na délku dělaný pro rozlišení 1280x**** Mě se pozadí zobrazí korektně, ale pokud má uživatel menší rozlišení, tak vidí jen levou část pozadí a na pravo je jen barva pozadí. No a já se pokouším vymyslet jak pomocí CSS udělat pozadí tak aby se obrázek přizpůsobil rozlišení uživatele. Prostě aby se vešel do okna, nehledě na jeho pevnou šířku.
zdravim,
pokud nemas nejake vzorkovane pozadi, co by se nedalo opakovat, tak jak psal gabo, dej to opakovat
body{
background-image: url(...);
background-repeat: repeat-x; /* vodorovne to asi bude stacit :) */
}no a v pripade, ze je tam nejaky vzorek, tak bych to udelal nasledovne(i kdyz to bude uz zasah do stranek): vzal bych z toho pozadi kraj a ten opakoval v body viz vyse a pak do divu, co bude hned za body bych hodil to pozadi, pravdepodobne na stred...
Posthunter
Kluci díky za rady, ale to co tu radíte, jsou základy CSS a ty už dávno zvládám a hlavně neřeší tuto věc. Pozadí je v prvním postu, aby jste měli představu. Layout je vlastně mezi vzorky. To že to jde pomocí JS, nebo zásahu do stránek vím. Snažím se ale přijít na to jak to ošéfovat jen přes CSS.
Klasické pozicování na to neplatí, studoval jsem to i přímo na V3C, ale ani tam jsem nenašel žádnou alternativu.
Jediné co jakž takž fungovalo, bylo rozřezání na dva kusy a napozicování, ale vypadalo to hůře, než když je to v celku.
Více méně jde jen o vánoční pozadí, ale jen tak ze zvědavosti, zda to jde jen přes CSS, jsem to sem postnul. Pokud mě máte za idi***, pak se omlouvám. :smile1:
To s tým rozrezaním je asi jediná cesta; stačí priradiť pravú a ľavú stranu dvom rôznym elementom, ktoré sa zobrazujú "na sebe", napr. takto: http://imcold.evilhosting.org/files/b0rked/pozadie.html . Podľa mňa to vyzerá celkom dobre.
To imcold :
Díky moc za radu a ukázku, uvidím, jestli to předělám, jelikož na Nový rok dostane obec web s novým kabátkem, takže to asi nechám přes vánoce. Díky
Mohl bys alespoň prozatím "obšťastnit" uživatele IE (snad se nebudou v pokojné době Vánoční vytahovat, že oni mají a jiní ne. . .)
Jde to pomocí stylů+expression => vyzkoušeno na bgImage.
====
Říkáš že nechceš přidávat potřebný 2.HTML element (pro umístění 2.části rozřezaného img) => nešlo by ho "přidat" ve stylech ?
Nevadí že IE content neumí, ten máme z krku, teď ty ostatní. Chápeš jak to myslím ?
To Petroff : Nemohl, protože 1.1.spouštím web vnovém kabátě a veškerý volný čas věnuji jemu a obec si nepřeje nic měnit do konce roku, krom běžných aktualizací. Navíc uživatelů IE je u nás minimum 22% a FF má 64,5% a zbytek si dělí ostatní prohlížeče. Rád bych obšťastnil, ale není čím :)
Potřebuješ minimálně 4obrázky:
pro IE: aspoň 2 úplné proužky různé šířky (pro rozlišení 1280 a menší)
pro nonIE: 2obrázky: samostatná levá a pravá část
-----------------------------------
CSS je velmi jednoduchý:
PRVEK {
. . . .
[všechny původní deklarace kromě pozadí]
. . . .
background: #XXXXXX url(pravy_okraj.jpg) top right no-repeat;
}
PRVEK:before {
content:" ";
font-size:0px;
padding: XXpx 0px VÝŠKApx ŠÍŘKApx; /* ZDE SE NASTAVÍ ROZMĚRY BG-IMAGE */
/* margin-left: -XXpx; EVENTUALNÍ VYNULOVÁNÍ LEVÉHO OKRAJE NA HRANU OKNA */
background: #XXXXXX url(levy_okraj.jpg) top left no-repeat;
}
PRVEK {
background: expression((screen.availWidth>1279)?"#XXXXXX url(sirsi.jpg) top left no-repeat":"#XXXXXX url(uzsi.jpg) top left no-repeat");
}Ukázku která funguje na 100% v IE6/7 FF Opeře mám zde:http://exstream.atlasweb.cz/Curved/nedele/index.html
(vzal jsem první stránku která má prvky s img pozadím a aplikoval výše uvedené styly, místo změny rozlišení testuju šířku okna - pro DEMO účel je to jedno)
To don_Dominique :
Jednodušší by bylo vložit do těla dva bloky; styl: v prvním pozadí vlevo, ve druhém vpravo, repeat-y, barva:transparent
...
<style>
.blok1, .blok2{background-image: url(levy.jpg); background-position: left; background-repeat: repeat-y; background-color: transparent;}
.blok2{background-image: url(pravy.jpg); background-position: right;}
</style>
<body>
<div class="blok1">
<div class="blok2">
obsah stránky
</div>
</div>
</body>
...To Zeleny_Muzik :
Definitivní řešení (bez jediného zásahu do HTML = pouze pomocí CSS) umožnit flexibilitu okrajů při změně rozlišení i šířky okna.
Použitelné pro stránky s obsahem ve vycentrovaném DIVu a grafikou v prostoru levého a pravého marginu.
Toto jsou konkrétní styly pro tvůj web, otestováno v Opeře9,FF2,IE6/7 při 1024x768 a 1280x1024
Použity pouze 3 obrázky
* STYLE.CSS */
/* styly text/css pro cely web */
body {
background: #fff url(vanocebg_1280.gif) top right fixed repeat-y; /* W=1280 x H=316 */
background: expression((screen.availWidth<1280)?"#fff url(vanocebg_1024.gif) top center fixed repeat-y":"#fff url(vanocebg_1280.gif) top center fixed repeat-y"); /* případ IE */
}
body:after {
content:" ";
padding: 20000px 150px 30px 66px; /* [max.výška_stránky] [šířka_obrázku-66px] [anti-mezera][66px] */
font-size: 1em;
margin-left: -65em;
background: #fff url(vanocebg_levy.gif) top left fixed repeat-y; /* W=216 x H=316 */
}
body>a, body>a:hover { display: block; margin: 0 auto; background: transparent }
html body div.patka { padding: 0 1em; background: transparent }
použil jsem index.html http://exstream.atlasweb.cz/podlesin/podlesin.html a vyhlasky.html http://exstream.atlasweb.cz/podlesin/vyhlasky.html
(grafiku jsem rozměřil od oka a upravoval v Malování - vhodné akorát pro DEMO účel)
Zjistit počet nových příspěvků
Přidej příspěvek
Toto téma je starší jak čtvrt roku – přidej svůj příspěvek jen tehdy, máš-li k tématu opravdu co říct!
Ano, opravdu chci reagovat → zobrazí formulář pro přidání příspěvku
×Vložení zdrojáku
×Vložení obrázku
×Vložení videa
Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
Uživatelé prohlížející si toto vlákno
Uživatelé on-line: 0 registrovaných, 15 hostů
Podobná vlákna
Backround stranky — založil 7raul
Rozlišení — založil Zelenáč
Rozlišení — založil loop
C# - změna rozlišení — založil Mrkus
Rozlišení znaků — založil KARLOSCZ1979
Moderátoři diskuze
