Backround-image a rozlišení – CSS – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama
Reklama

Backround-image a rozlišení – CSS – Fórum – Programujte.comBackround-image a rozlišení – CSS – Fórum – Programujte.com

 

Hledá se programátor! Plat 1 800 € + bonusy (firma Boxmol.com)
Zeleny_Muzik0
Návštěvník
7. 12. 2007   #1
-
0
-

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

Nahlásit jako SPAM
IP: 85.160.11.–
Lidi pomáhají mě a já pomáhám lidem.
Reklama
Reklama
Paja2
~ Moderátor
+2
Věrný člen
7. 12. 2007   #2
-
0
-

To Zeleny_Muzik : A přes procenta by to nešlo ?

Nahlásit jako SPAM
IP: 217.112.165.–
Zeleny_Muzik0
Návštěvník
7. 12. 2007   #3
-
0
-

To Paja2 : To jsem zkoušel a nefungovalo to. Ještě zkouším dál.

Nahlásit jako SPAM
IP: 85.160.11.–
Lidi pomáhají mě a já pomáhám lidem.
don_Dominique0
Super člen
7. 12. 2007   #4
-
0
-

To 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>

Nahlásit jako SPAM
IP: 84.42.148.–
Zeleny_Muzik0
Návštěvník
7. 12. 2007   #5
-
0
-

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í.

Nahlásit jako SPAM
IP: 85.160.11.–
Lidi pomáhají mě a já pomáhám lidem.
7. 12. 2007   #6
-
0
-
Nahlásit jako SPAM
IP: 195.113.162.–
New Media Enthusiast[br] http://about.me/lukaschadraba
Gabo0
Newbie
7. 12. 2007   #7
-
0
-

To Zeleny_Muzik : Neviem o ničom takom, načo to potrebuješ? Možno by sa to dalo vyriešiť inak.

Nahlásit jako SPAM
IP: 85.237.13.–
Zeleny_Muzik0
Návštěvník
7. 12. 2007   #8
-
0
-

To 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.

Nahlásit jako SPAM
IP: 85.160.11.–
Lidi pomáhají mě a já pomáhám lidem.
Gabo0
Newbie
7. 12. 2007   #9
-
0
-

To Zeleny_Muzik : Neviem aké to máš pozadie, ale nedalo by sa ho zmenšiť a dať to opakovať?

Nahlásit jako SPAM
IP: 85.237.18.–
insider0
Věrný člen
7. 12. 2007   #10
-
0
-

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...

Nahlásit jako SPAM
IP: 147.32.97.–
I don't want to see you go,[br] The sky is over[br] Even though we can't afford[br] The sky is over,[br] The sky is over us.[br][br] CIVILIZATION IS OVER
Nefaritus
~ Redaktor
+2
Posthunter
7. 12. 2007   #11
-
0
-

To Gabo : Tipoval bych, že asi opakovatelné nebude...

Nahlásit jako SPAM
IP: 213.191.111.–
Zeleny_Muzik0
Návštěvník
7. 12. 2007   #12
-
0
-

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:

Nahlásit jako SPAM
IP: 85.160.11.–
Lidi pomáhají mě a já pomáhám lidem.
imcold0
Newbie
10. 12. 2007   #13
-
0
-
Nahlásit jako SPAM
IP: 89.173.112.–
Zeleny_Muzik0
Návštěvník
10. 12. 2007   #14
-
0
-

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

Nahlásit jako SPAM
IP: 85.160.14.–
Lidi pomáhají mě a já pomáhám lidem.
Petroff0
Věrný člen
11. 12. 2007   #15
-
0
-

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 ?

Nahlásit jako SPAM
IP: 89.102.211.–
Zeleny_Muzik0
Návštěvník
11. 12. 2007   #16
-
0
-

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 :)

Nahlásit jako SPAM
IP: 85.160.19.–
Lidi pomáhají mě a já pomáhám lidem.
Petroff0
Věrný člen
11. 12. 2007   #17
-
0
-

Já ti obojí zítra pošlu (když, tak to nepoužij)

Nahlásit jako SPAM
IP: 89.102.211.–
Petroff0
Věrný člen
12. 12. 2007   #18
-
0
-

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)

Nahlásit jako SPAM
IP: 89.102.211.–
siroko
~ Anonymní uživatel
1 příspěvek
13. 12. 2007   #19
-
0
-

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>
...

Nahlásit jako SPAM
IP: 80.250.6.–
Petroff0
Věrný člen
17. 12. 2007   #20
-
0
-

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 }

Můžeš si to hned vyzkoušet:
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)

Nahlásit jako SPAM
IP: 89.102.211.–
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žit URL obrázku Vybrat obrázek na disku
Vlož URL adresu obrázku:
Klikni a vyber obrázek z počítače:

×Vložení videa

Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
 
Podporujeme Gravatara.
Zadej URL adresu Avatara (40 x 40 px) nebo emailovou adresu pro použití Gravatara.
Email nikam neukládáme, po získání Gravatara je zahozen.
-
Pravidla pro psaní příspěvků, používej diakritiku. ENTER pro nový odstavec, SHIFT + ENTER pro nový řádek.
Sledovat nové příspěvky (pouze pro přihlášené)
Sleduj vlákno a v případě přidání nového příspěvku o tom budeš vědět mezi prvními.
Reaguješ na příspěvek:

Uživatelé prohlížející si toto vlákno

Uživatelé on-line: 0 registrovaných, 6 hostů

Podobná vlákna

Backround stranky — založil 7raul

Rozlišení — založil loop

Rozlišení — založil Zelenáč

Rozlišení obrazovky — založil Pebble

 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032016 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý