GTA Közösség - A magyar GTA fórum

Általános beszélgetés => Beszélgetés => Kérdések, Segítség => A témát indította: KDDomi - 2016. augusztus 26. - 23:34:29

Cím: CSS háttérkép elnyújtás
Írta: KDDomi - 2016. augusztus 26. - 23:34:29

Hali! Van egy készülő weboldalam, a lent látható képet most csináltam hogy tudjam körbeírni mi a gond.
A külső körvonal az maga az oldal amit látunk, a belső körvonalon helyezkedik el az oldal, abban a négyzetben helyezkedik el a header, footer, menü, content stb.
A középső négyzetben van egy háttérkép ami fix méretű amin pont úgy vannak megrajzolva a grafika hogy pl a gombok körül azzal van kidíszítve, mivel ez a háttérkép fix méretű ezért a külső és a belső körvonal közti terület mindkét oldalon feketére állítottam mert az még valamennyire beleolvad a fekete hátterű-zöld grafikába. Hogyan tudnám megoldani hogy elnyújtsam a háttérképet de a már bepozícionált grafika a helyén maradjon? Ja és az oldalon bootstrap van szóval responsive az egész oldal.
Köszönöm!
http://kepfeltoltes.hu/160826/img_www.kepfeltoltes.hu_.png[/img]

Cím: CSS háttérkép elnyújtás
Írta: KDDomi - 2016. szeptember 06. - 19:19:18

Senki?  :\'( :\'( :\'(

Cím: CSS háttérkép elnyújtás
Írta: [Apple] - 2016. szeptember 06. - 20:11:02

 

body {
    background-image: url(...);
    background-position: center top;
    background-repeat: repeat-y;
    background-size: 100% auto;
    background-attachment: fixed;
  }

 
Ezt alakítsd kedved szerint. Elvileg jónak kell lennie. Egyébként prog.hu n sok hasonló kérdés van.

Cím: CSS háttérkép elnyújtás
Írta: KDDomi - 2016. szeptember 06. - 21:14:56

Sajnos így ugyanúgy csak szétnyújtja a képet, de a többi dolog eltolódik :S

Cím: CSS háttérkép elnyújtás
Írta: [Apple] - 2016. szeptember 06. - 21:24:40

Hm értem, pontosan mik tolódnak el? Mert így láthatatlanba nehéz megmondani a megoldást.

Cím: CSS háttérkép elnyújtás
Írta: Memphis - 2016. szeptember 06. - 21:31:42

background: url(link) no-repeat 50% 0% / cover;
vagy ha van szín
background: #1D2225 url(valami) no-repeat 50% 0% / cover;
Próbáld így.
De ha tényleg azt szeretnéd hogy minden monitoron meg minden nézetben jól nézzen ki inkább ajánlanék egy olyan hátteret amit ismételsz CSS-ben. Példának most felhozom az angol LS-RP-t (nem hirdetésnek szánom)
Hogy ne a láthatatlanba beszéljek itt van tekintsd meg a hátteret.
Ez a szép képecske az.

Ha meg ragaszkodsz a te elképzelésedet próbáld azt amit küldtem. Ha így sem jó nem tudok segíteni :(
(A százalékokat állítgasd majd hátha úgy sikerül)
Edit: Vagy esetleg még próbáld fix méretre beállítani a dolgokat a weben (nem tudom hogy úgy van-e mert láthatatlanból tényleg nehéz.) Tehát pl a header ne 90% hanem 1200px. Majd a háttért is beteszed de úgy hogy ha nagyítás vagy kicsinyítés történik a háttér is mozogjon a mérettel. És hogy jól nézzen ki a grafikát fade-eld ki a semmibe. (gradient).
Most példázom neked CSS-be de itt magán a grafikán változtass az oldal széleinél legyen egy ilyen \"eltűnés effekt\" a semmibe.
Így gondoltam -> Jsfiddle
Result:

---

Aztán állíts be egy alapértelmezett fekete háttért és szerintem jó lesz.
Aztán nem lenne szabad semminek elcsúszni ha jól állítottad be.

Cím: CSS háttérkép elnyújtás
Írta: KDDomi - 2016. szeptember 10. - 23:13:16

Sikerült, nagyon szépen köszönöm a segítséget!