Pokud jsi na telefonu, změň widht pozadí na auto

Josef Falta:
Spíš to checš na všech zařízeních s obrazovkou menší než XYZ pixelů
www.vzhurudolu.cz/prirucka/css3-media-queries

A nechceš spíš background-size: contain; To bez deformací roztáhne obrázek jak jen to jde, ovšem jen tak, aby byl vidět celý a nemusel se nikde ořezávat.

juriad:
„background-width“
Tuhle CSS vlastnost neznám a ani se mi o ní nepodařilo nic "vygůglovat".

Josef Falta:
„jak jsem čet na jakpsatweb, prý to nejde“
Možná jsi jen natrefil na neaktualizovanou stránku a doby, kdy to doopravdy nešlo a používaly se různé triky. Dneska už to není problém, funkční od IE9 včetně výše.
Background-size
background-size
Pravděpodobně (hádám podle toho, jak jsi problém popsal)se ti bude hodit hodnota contain, jak už napsal Keeehi, ale je dobré vědět, že jsou i další možnosti.

Josef Falta:
A más tam meta tag viewport s hodnotou width device width 1.0?

Josef Falta:
Tak nám dej odkaz na stránku ať víme, o čem se bavíme.

Josef Falta:
Takže, obrázek je roztažen přes celý tag body. Problém je, že z elemntu body lezou různé části (text, drak atp.) a tím tu stránku rozšíří.
V tvém případě neexistuje žádná jednoduchá rada. Je vidět, že s tím děláš úplně poprvé. A kvůli tomu to nejde jen tak jednoduše opravit. Máš to splácané páté přes deváté. Hlavním problémem bude především pozicování. Když nějakému elementu nastavíš, že má být 1000px vpravo, tak je prostě 1000px vpravo i na mobilech které ale zobrazují jen třeba 360px.

Samozřejmě že to jde, ale v důsledku to bude znamenat to celé předělat. Ovšem nejsem si jistý, zda to se svými zkušenostmi vůbec zvládneš. Nejlepší by pro tebe asi bylo si najít nějakou pěknou jednoduchou responzivní šablonu a tu si přizpůsobit.

Josef Falta:
Tak ono stáhnout si šablonu, která bude responsivní a část jí vyházet, aby ti z toho zbyl takhle jednoduchý web, nebude těžké. Nic moc, co bys do ní musel dodělávat, tam není. Hledej dvouslopcové responsivní layouty, nemělo by to být neřešitelné. A asi i časově méně náročné, než tohle přetvořit tak, aby to dávalo smysl.

Josef Falta:
„Jenže takovouhle podobu jsem již ukázal jako budoucí a očekává se, že i bude“
Nejsi žádné profesionální webové studio, děláš to nejspíš pro kamarády a zadarmo. Myslím, že by jim nevadil jiný vzhled, hlavně když to bude fungovat.
Ale nikdo taky neříkal, že ten vzhled musíš měnit. Pokud si najdeš vhodnou, tak v ní jen vyměníš obrázky, změníš barvy a vložíš obsah. Tohle je ideální stav a nejspíš nenajdeš šablonu přesně takovou, ale najdeš nějakou hodně podobnou. A buď jí upravíš, a nebo se smíříš s drobnými odlišnostmi.

„Pokusím se asi vytvořit kód jinak.“
I to je možnost. Pro tebe ovšem o dost složitější možná až neuskutečnitelná.
Pokud se přesto do toho chceš pustit, doporučuji nejdřív několik hodin pročítat články o responzivitě webů a pak se teprve vrhnout na samotné kódování.
Základem je, že málo kterému prvku se nastavuje pevná šířka spousta prvků přebírá šířku podle jejich obsahu, nebo jako procentní část rodiče. A pokud se už nějaká šířka nastavuje absolutně, většinou není pevně daná, ale nastavuje se minimální nebo maximální velikost. Druhou částí responzivního designu jsou media queries. Pomocí nich se nastavují breakpointy, při kterých se preskládávávají části stránky. Je snad jasné, že menu vedle obsahu může být jen od určité šířky. Na malých obrazovkách se vedle sebe nevejdou. Takže je to potřeba nějak vyřešit - schovat a zobrazovat po kliknutí, nebo třeba přesunout nahoru. Na větších stránkách se toho přesouvá spousta a třeba i několikrát. Protože ty máš stránky velmi jednoduché, tvojí jednou starostí nejspíš bude právě jen to menu.