Szerző Téma: CSS háttérkép elnyújtás (Megtekintve 1370 alkalommal)

KDDomi · « **Dátum:** 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!
$\"width=500$ http://kepfeltoltes.hu/160826/img_www.kepfeltoltes.hu_.png[/img]

KDDomi

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

[Apple]

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.

KDDomi

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

[Apple]

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

Memphis

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.
$\"background.png\"$
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:
$\"UZ5d202.png\"$

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.

KDDomi

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