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

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.

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.

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" />

#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 ;)

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

#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ť?

#7 Anonym

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

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

#8 Nefaritus

Tak kde je problém?

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

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

background-size: contain;

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

#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

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.

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

#13 Nefaritus

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

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

#17 Froggy

Ďakujem za odpoveď.