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

TIP: Přetáhni ikonu na hlavní panel pro připnutí webu

Trvalé přihlášení

Zapomněl jsi heslo?

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

Rozšířené hledání ›

Nejnovější témata ve fóru

22:06, Startupy Megastroj.cz – Vše na jednom místě: půjčovna, bazar a inze…

21:17, Inzerce FPGA vývojová deska XILINX VIRTEX 5 ML507

20:59, OS - GNU / Linux Ubuntu a OpenSuse

21:47, Offtopic Digitalizace v Česku

10:10, Cinema 4D Export USDC do DaVinci Resolve

16:58, Photoshop Jak odstranit (potlačit) odlesky

Stavba Laser Arény
Laser Game Brno

Web background CSS

Toto vlákno bylo označeno za vyřešené — příspěvek s řešením.

Anonym

~ Anonymní uživatel
~ 454 příspěvků

24. 10. 2011 #1

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

Nefaritus

~ Redaktor

Posthunter

Kultivátor příspěvků ve starém fóru – 3.66 % z celku

24. 10. 2011 #2

Zajímavé

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
~ 454 příspěvků

24. 10. 2011 #3

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
~ 454 příspěvků

24. 10. 2011 #4

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

Posthunter

24. 10. 2011 #5

#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
~ 454 příspěvků

24. 10. 2011 #6

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

Nahlásit jako SPAM

IP: 109.230.40.–

Anonym

~ Anonymní uživatel
~ 454 příspěvků

24. 10. 2011 #7

#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

Posthunter

25. 10. 2011 #8

#7 Anonym

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

Nahlásit jako SPAM

IP: 89.103.4.–

Anonym

~ Anonymní uživatel
~ 454 příspěvků

25. 10. 2011 #9

#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
~ 454 příspěvků

26. 10. 2011 #10

#8 Nefaritus

Tak kde je problém?

Nahlásit jako SPAM

IP: 109.230.40.–

Nefaritus

~ Redaktor

Posthunter

27. 10. 2011 #11

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

Nahlásit jako SPAM

IP: 147.251.51.–

Froggy0

Newbie

27. 10. 2011 #12

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

Posthunter

27. 10. 2011 #13

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

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
~ 454 příspěvků

27. 10. 2011 #15

#13 Nefaritus
#14 Froggy

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