IT rekvalifikace s garancí práce. Seniorní programátoři vydělávají až 160 000 Kč/měsíc a rekvalifikace je prvním krokem. Zjisti, jak na to!
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

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

Aktivity
Avatar
martas02.d
Člen
Avatar
martas02.d:28.9.2014 10:45

Č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š
Tvůrce
Avatar
Pavel Mareš:28.9.2014 10:54

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
Však ono půjde ...
Avatar
martas02.d
Člen
Avatar
martas02.d:28.9.2014 11:01

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š
Tvůrce
Avatar
Odpovídá na martas02.d
Pavel Mareš:28.9.2014 11:11

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
Však ono půjde ...
Avatar
martas02.d
Člen
Avatar
Odpovídá na Pavel Mareš
martas02.d:28.9.2014 11:12

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
Jan Lupčík
Tvůrce
Avatar
Odpovídá na martas02.d
Jan Lupčík:28.9.2014 11:18

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
TruckersMP vývojář
Avatar
Jan Lupčík
Tvůrce
Avatar
Odpovídá na martas02.d
Jan Lupčík:28.9.2014 11:20

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
TruckersMP vývojář
Avatar
martas02.d
Člen
Avatar
martas02.d:28.9.2014 11:20

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š
Tvůrce
Avatar
Pavel Mareš:28.9.2014 11:23

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í
+2,50 Kč
Řešení problému
Nahoru Odpovědět
28.9.2014 11:23
Však ono půjde ...
Avatar
martas02.d
Člen
Avatar
martas02.d:28.9.2014 11:34

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.