Udělání přechodu na kraji www stránek

[pajacz17]

Ahoj, mám tento problém. Dělám web. stránky, kde chci mít na obou krajích tmavou barvu, která jde postupně ke světlé.
Jako hlavní mám div, který je nastaven na 1000px. V tomto divu se odehrává děj www stránek a pozadí je bílé. Udělal jsem si proužek obrázku s přechodem a dal repeat v ose y. Tím se mi udělal přechod na levé straně tak jak chci,že ta světlá končí na levém okraji divu a přechází to do bílé. Jak ale nastavím tento přechod i pro pravou stranu? Díky

[CZechBoY]

čau,
otočíš přechod a uděláš to stejný na druhý straně.

[pajacz17]

A mohu poprosit o informaci jak ho otočím? Děkuji

[IDVert3X]

Jednoducho, vytvor pozadie široké 1920px, v strede nechaj 1000px ničoho, keďže tam bude content (obsah stránky, hlavný div) a tie okraje naštýluj. Následne do body nastav toto pozadie a vypni repeat. Taktiež ho sprav statické, aby po scrollnutí ostalo na mieste a zaroven nastav aby sa prisposobilo rozliseniu, tj. zobrazi sa cele na akomkolvek monitore.
Hlavný box zarovnáš na stred a odporúčam mierne odsadiť od vrchu, príklad:

Kód: Vybrat vše

#primarybox{
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
  //a zvysok CSS pre hlavny box
}

Druha varianta je pouzit tiene... Ale to asi nieje efekt, ktory chces dosiahnut. Taktiez sa daju na toto pouzit CSS3 prvky bez nutnosti pouzitia akehokolvek obrazkoveho suboru.
Vela stastia.

[Myloš]

A mohu poprosit o informaci jak ho otočím? Děkuji

V grafickém programu, ve kterém jsi ho vytvořil, snad dokážeš najít funkci převrácení obrázku, ne?

[CZechBoY]

jj určitě doporučuju udělat obrázek 1920px, potom totiž na mobilu nebude vidět nic víc než přechod z jedný strany

[IDVert3X]

@CZechBoY, písal som, nech tam pridá arguement na to, aby pozadie bolo rovnaké na všetkých zariadeniach, viem, že som to mal na svojom starom webe a pozadie 1920x1080 sa zobrazilo rovnako na UltraHD TV aj na nejakom Tablete, ktorý ma 480p. Tomu sa hovorí responsive design. Tj. stránka sa prispôsobí rozmerom zariadenia napr. poprehadzovaním či zmenšením boxov a pri pozadí sa skrátka pozadie "zcvrkne" alebo "natiahne" tak, aby presne sedelo a bol tam celý obsah pozadia.

Tuším, že je to nejak takto:

Kód: Vybrat vše

background-image: url(obrazok.jpg);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;

a dávať šírku 1000px je skôr blbosť, dal by som to takto:

Kód: Vybrat vše

width: 80%;
max-width: 1000px;
margin-left: auto;
margin-right: auto;

tj. bude na lavej aj na pravej strane 10% z velkosti monitoru prazdnych a sted monitoru (tj. ten box) bude mat 80% z celkovej velkosti a max. 1000px.
TJ. bude to aspon trosku responzivne.

[CZechBoY]

Určitě chci zoomovat na tabletu jak blbec
Nicméně, když se nedá šířka těch 1920px tak by to mělo fungovat s tím background cover

[IDVert3X]

Prečo zoomovať? Čo si chceš zoomovať pozadia stranky?

[CZechBoY]

Stránku jako takovou...
Ale jak jsem psal.. s tim bz:cover by se mělo pozadí roztáhnout na max šířku prvku. Pokud ten prvek bude mít šířku 100% tak se na mobilu nebude muset zoomovat.

[pajacz17]

Díky. Místo cover jsme napsal 100% a vše funguje.