Diskuze: Roztažení obrázku pozadí na 100%

HTML a CSS HTML a CSS Roztažení obrázku pozadí na 100% American English version English version

Avatar
martas02.d
Člen
Avatar
martas02.d:

Čau všem :)
mám takovej problém se svou webovou stránkou. Na pozadí mám obrázek, kterej chci aby se mi v souvislosti s rozlišením jednotlivých návštěvníků roztahoval, bohužel to se teď neděje a rád bych se vyvaroval různým opakováním atp, které nevypadají vůbec dobře :).. Byl bych rád, kdyby mi někdo řekl jak na to, jelikož jsem tady nikde nic takového nenašel.

(pro lepší vysvětlení - aby obrázek zabíral celou plochu prohlížeče, pokaždé, v jakémkoliv rozlišení)

Děkuji mnohokrát!

body {
        font-size: 13pt;
        line-height: 1.75em;
        background: #171511 url(images/bg.jpg) no-repeat top     center fixed;
        color: #E2DCDD;
}
Editováno 28.9.2014 10:46
 
Odpovědět 28.9.2014 10:45
Avatar
Pavel Mareš
Redaktor
Avatar
Pavel Mareš:

Stačí použít jednoduchý kód :)

background: url(images/bg.jpg) no-repeat scroll;
background-size: cover;

Mě to funguje skvěle, až na pár detailů, ale pokud použiješ vhodný obrázek v poměru k zobrazení, vše je cajk :)

Nahoru Odpovědět 28.9.2014 10:54
Nechci být workoholik. Bohužel někdy musíme být tím, čím nechceme.
Avatar
martas02.d
Člen
Avatar
martas02.d:

Můj obrázek je větší na šířku jak na výšku.. takže, ikdyž to tak udělám, jde vidět, jak je ten obrázek "rozmazanej"

 
Nahoru Odpovědět 28.9.2014 11:01
Avatar
Pavel Mareš
Redaktor
Avatar
Odpovídá na martas02.d
Pavel Mareš:

Můžeš to ukázat ať vím jak to přizpůsobit nebo navrhnout něco jiného? Asi vím co myslíš, ale pro jistotu. (Asi stačí screen, pokud to nemáš někde na netu)

Nahoru Odpovědět 28.9.2014 11:11
Nechci být workoholik. Bohužel někdy musíme být tím, čím nechceme.
Avatar
martas02.d
Člen
Avatar
Odpovídá na Pavel Mareš
martas02.d:

no takhle.. na mém rozlišení to funguje parádně :) ale díval sem se třeba z práce a tam už je to horší, tak dej vědět :) http://dolinay.wz.cz .. Jde o tu krajinu tam :)

 
Nahoru Odpovědět 28.9.2014 11:12
Avatar
IT Man
Redaktor
Avatar
Odpovídá na martas02.d
IT Man:

Mně se ten obrázek zobrazuje parádně. Jsem i na mobilu. Ale pokud je máznutý, nebylo by lepší si ten obrázek v počítači vhodně upravit či použít nějaký jiný? :)

Nahoru Odpovědět 28.9.2014 11:18
Když nevíš jak dál, podá ti ruku někdo, od koho by jsi to nečekal. A tu šanci musíš přijmout!
Avatar
IT Man
Redaktor
Avatar
Odpovídá na martas02.d
IT Man:

A ještě menší připomínka - použij jiný font, protože to zobrazování písmen ž ě atd. vypadá hrozně. :(

Nahoru Odpovědět 28.9.2014 11:20
Když nevíš jak dál, podá ti ruku někdo, od koho by jsi to nečekal. A tu šanci musíš přijmout!
Avatar
martas02.d
Člen
Avatar
martas02.d:

Jde o to, že na větším rozlišení, je ten web celkově menší a tím to pozadí taky.. Chtěl bych to eliminovat a dát ten obrázek, aby se přizpůsoboval.. Nerad bych měnil ten obrázek.. Patří k tomu.. :/

 
Nahoru Odpovědět 28.9.2014 11:20
Avatar
Pavel Mareš
Redaktor
Avatar
Pavel Mareš:

Tak jsem na to koul a chtělo by to sehnat lepší obrázek, alespoň šířku min 1920px, já používám 2560px kvůli apple monitorům, ale to je vedlejší. U tebe je problém, že cover se ti neroztáhne, protože definuješ v css obrázek až po coveru.

background-size: cover;
background: #171511 url(images/bg.jpg);
color: #E2DCDD;

Když to tedy budeš chtít roztáhnout tak použij toto:

background: #171511 url(images/bg.jpg);
color: #E2DCDD;
background-size: cover;

Bohužel to roztáhnutí nevypadá moc dobře na FullHD monitoru, takže doporučuji si sehnat kvalitnější fotku.

Editováno 28.9.2014 11:23
Akceptované řešení
+20 Zkušeností
+1 bodů
Řešení problému
Nahoru Odpovědět  +3 28.9.2014 11:23
Nechci být workoholik. Bohužel někdy musíme být tím, čím nechceme.
Avatar
martas02.d
Člen
Avatar
martas02.d:

Paráda :) díky za radu, každopádně to musím zkusit až zas v práci, kde jsem si toho všiml :) ale našel jsem jinej obrázek a udělal to podle tebe .. tak uvidíme..

 
Nahoru Odpovědět 28.9.2014 11:34
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 10 zpráv z 10.