Web background CSS – CSS – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama
Reklama

Web background CSS – CSS – Fórum – Programujte.comWeb background CSS – CSS – Fórum – Programujte.com

 

Toto vlákno bylo označeno za vyřešené — příspěvek s řešením.
Hledá se programátor! Plat 1 800 € + bonusy (firma Boxmol.com)
Anonym
~ Anonymní uživatel
429 příspěvků
24. 10. 2011   #1
-
0
-

Zdravím, mám jednu otázku, na web by som potreboval dať pozadie, na ktorom je viacero objektov, ktoré by som rád videl celé. Problém je v tom, že ak idem na web s nižším rozlíšením, tak toto pozadie "oseká" a nie je celé poriadne vidieť. Preto by som sa chcel spýtať, či je nejaká alternatíva, aby sa toto pozadie prispôsobilo rozlíšeniu a bolo pekne celé vidieť. 

Ďakujem veľmi pekne za pomoc.

Nahlásit jako SPAM
IP: 109.230.40.–
Reklama
Reklama
Řešení
Nefaritus
~ Redaktor
+2
Posthunter
24. 10. 2011   #2
-
+1
-
Zajímavé
Vyřešeno Nejlepší odpověď

Udělej si pozadí ve více rozlišeních, třeba ve třech a pak tam přes media queries strkej obrázky:

@media screen and max-width: 800px { body { background: url('obr1.png'); } }
@media screen and (min-width: 801px) and (max-width: 1400px) { body { background: url('obr2.png'); } }
@media screen and min-width: 1401px { body { background: url('obr3.png'); } }
Nahlásit jako SPAM
IP: 89.103.4.–
anonym
~ Anonymní uživatel
429 příspěvků
24. 10. 2011   #3
-
0
-

o to som sa aj pokúšal,lenže ak príde na stránku niekto s menším rozlíšením,tak akoby ten obrázok priblížilo a je dosť osekano vidieť. Pritom bolo to pozadie zobrazované pre dané rozlíšenie,neexistuje nejaký spôsob ktorý by to spravil tak,ako uvádzam v prvom príspevku?

Zasláno z mobilního telefonu.

Nahlásit jako SPAM
IP: 78.141.125.–
Anonym
~ Anonymní uživatel
429 příspěvků
24. 10. 2011   #4
-
0
-

Presnejšie som použil túto možnosť, myslím že výsledok by mal byť rovnaký ... 

<link rel="stylesheet" href="uvod1280.css" media="screen and (max-device-width: 1280px)" type="text/css" />
Nahlásit jako SPAM
IP: 109.230.40.–
Nefaritus
~ Redaktor
+2
Posthunter
24. 10. 2011   #5
-
0
-

#4 Anonym
Ano, výsledek je víceméně stejný, akorát ty to zapisuješ jako podmínku volání souboru se styly a já psal jako podmínku do souboru se styly ;)

 
Nahlásit jako SPAM
IP: 89.103.4.–
Anonym
~ Anonymní uživatel
429 příspěvků
24. 10. 2011   #6
-
0
-

Aha, ale rozdiel vo funkčnosti nebude predpokladám... 

Nahlásit jako SPAM
IP: 109.230.40.–
Anonym
~ Anonymní uživatel
429 příspěvků
24. 10. 2011   #7
-
0
-

#5 Nefaritus

Mám ešte otázku netýkajúcu sa rozlíšení a to, prečo mi obrázok pozadia napr. v google chrome ukáže v poriadku, ale napr. na prehliadači Firefox mi odsekne zhora (asi kvôli lištám) niekoľko pixelov. Dá sa tomu nejako zabrániť?

Nahlásit jako SPAM
IP: 109.230.40.–
Nefaritus
~ Redaktor
+2
Posthunter
25. 10. 2011   #8
-
0
-

#7 Anonym


Bude nejelpší, když postneš ukázku kodu a screenshot.

   
Nahlásit jako SPAM
IP: 89.103.4.–
Anonym
~ Anonymní uživatel
429 příspěvků
25. 10. 2011   #9
-
0
-

#8 Nefaritus

Kód:

body {
	background: url(images/pozadia/obrazok.jpg) no-repeat scroll center ;
	text-align: center;
background-position-x: 50%;
background-position-y: 0%;
background-attachment:fixed;

Screenshot Google Chrome:

Screenshot Firefox:

Je vidieť, že je obrázok "oseknutý". Neviem možno robím niekde chybu, ďakujem za pomoc.

Nahlásit jako SPAM
IP: 109.230.40.–
Anonym
~ Anonymní uživatel
429 příspěvků
26. 10. 2011   #10
-
0
-

#8 Nefaritus

Tak kde je problém?

Nahlásit jako SPAM
IP: 109.230.40.–
Nefaritus
~ Redaktor
+2
Posthunter
27. 10. 2011   #11
-
0
-

#10 Anonym
Zkus dát background-position: 50% 0

 
Nahlásit jako SPAM
IP: 147.251.51.–
Froggy0
Newbie
27. 10. 2011   #12
-
0
-

Proč tak složitě? Všechno vyřeší toto:

background-size: contain;

Požadí se tak vždy vleze do kontejneru.

Nahlásit jako SPAM
IP: 85.70.239.–
Nefaritus
~ Redaktor
+2
Posthunter
27. 10. 2011   #13
-
+1
-
Zajímavé

#12 Froggy
Tím docela trpí kvalita obrázku, ale jestli se jedná o ten samý obrázek, co je v těch screenshotech, tak ten, pravda, moc neutrpí :D

Nahlásit jako SPAM
IP: 147.251.53.–
Froggy0
Newbie
27. 10. 2011   #14
-
0
-

Ve spojení s media query pod 1024px si myslím, že obrázek vážně moc neutrpí. Asi nejlepší řešení by tedy bylo toto:

@media screen and max-width: 1023px {
 body {
   background: url(obr.png);
   background-size: contain;
 } 
}

Pro vyšší rozlišení se objeví obrázek neškálovaný zatímco ty menší ho uvidí celý. Nemělo by dojít k přílišné deformaci, protože bývá zachován poměr stran.

Nahlásit jako SPAM
IP: 85.70.239.–
Anonym
~ Anonymní uživatel
429 příspěvků
27. 10. 2011   #15
-
0
-

#13 Nefaritus
#14 Froggy

Ďakujem veľmi pekne za cenné rady, budú sa hodiť do budúcna... napokon som použil

background-position: 50% 0

Ďakujem ešte raz, vedel som, že sa na toto fórum môžem spoľahnúť,tak ako vždy :)

Nahlásit jako SPAM
IP: 109.230.40.–
Anonym
~ Anonymní uživatel
429 příspěvků
27. 10. 2011   #16
-
0
-

#13 Nefaritus

A ak sa môžem spýtať, čo robí vlastne tá "0"?

Nahlásit jako SPAM
IP: 109.230.40.–
Froggy0
Newbie
27. 10. 2011   #17
-
0
-

Pokud má vlastnost 2 hodnoty, pak ta první značí posunutí po ose X, druhá po ose Y

Nahlásit jako SPAM
IP: 85.70.239.–
Anonym
~ Anonymní uživatel
429 příspěvků
27. 10. 2011   #18
-
0
-

#17 Froggy

Ďakujem za odpoveď.

Nahlásit jako SPAM
IP: 109.230.40.–
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, 9 hostů

 

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