Hol a háttérkép?

A varosvedo hu (persze pont közte, de hadd ne itt találja meg az oldalt a Google) nagy háttérképét szeretném szépen fixálni, hogy mindig kitöltse az egész képernyőt. Ezt a Gopress testreszabása nem teszi lehetővé. Be is tudnám állítani css-sel, ha megtalálnám a képet a kódokban. Ez lenne a html background, varban1.jpg, de sehol sem találom. Tudna valaki segíteni?

wp-content/uploads/2013/09/varban11.jpg

Kösz, Andrea, de ez hogy illeszkedik bele a html-be? Vagyis hogyan lehetne elérni, hogy a style.css-ben megadhassam, hogy a szélessége 100%, magassága auto, szóval akármennyire kicsinyítem az oldalt, a háttérkép kitöltse a képernyőt, ahogy azt a pageservice.hu-ban egy másik sablonnal megcsináltam?

Ki kellene iktatni azt a bővítményt, amivel be van illesztve, feltölteni a sablon könyvtárába, aztán már tetszőlegesen be tudod állítani css-ben. http://www.w3schools.com/css/css_background.asp

Nem bővítménnyel van beillesztve, hanem a GoPress sablon Megjelenés>Testreszabás menüjével és a kép ott van a médiatárban. Vagy félreértelek? Továbbra is rejtély, melyik fájlban bujt meg a varban11.jpg.

Szia!



A kép alapján látszik, hogy nincs ilyen opció. Ki lehet egészíteni, ha szükséges.



A legegyszerűbb megoldás (nem a legjobb, sőt, egyáltalán nem az, de ha ez a funkció nem kell a jövőben) akkor nyisd meg a sablon header.php fájlját és szúrd be közvetlenül a elé:

<br />
body.custom-background {<br />
background-size: 100% auto;<br />
}<br />

```<br />
Mert ezzel a generált stílust felülírod! A lényeg, hogy a  után legyen ez. A lezáró head tag elé kell.<br />
<br />
Így teljesen kitölti a hátteret  a képed.<br />
<br />
Ü: András

:slight_smile: Köszönöm András! Nem értem, hogy lehet ott a kép, amikor a fájlokban nem található, de az már kevésbé fontos, hogy megértsem, a lényeg az, hogy működik, nagyon örülök neki. Most már csak abbam kérek segítséget, hogy Firefoxban is úgy nézzen ki a body transparentből fehérbe átmenő háttere, mint az összes többiben. Ez a gradiens háttér kódja:

background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,0) 1%, rgba(255,255,255,0.88) 8%, rgba(255,255,255,1) 9%); /* FF3.6+ */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(1%,rgba(255,255,255,0)), color-stop(8%,rgba(255,255,255,0.88)), color-stop(9%,rgba(255,255,255,1))); /* Chrome,Safari4+ */<br />
background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0) 1%,rgba(255,255,255,0.88) 8%,rgba(255,255,255,1) 9%); /* Chrome10+,Safari5.1+ */<br />
background: -o-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0) 1%,rgba(255,255,255,0.88) 8%,rgba(255,255,255,1) 9%); /* Opera 11.10+ */<br />
background: -ms-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0) 1%,rgba(255,255,255,0.88) 8%,rgba(255,255,255,1) 9%); /* IE10+ */<br />
background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%, rgba(255,255,255,0) 1%, rgba(255,255,255,0.88) 8%, rgba(255,255,255,1) 9%);<br />
background: -moz-linear-gradient(bottom,  rgba(255,255,255,0) 0%, rgba(255,255,255,0) 1%, rgba(255,255,255,0.88) 8%, rgba(255,255,255,1) 9%);<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-8 */
```<br />

Az IE nem hajlandó a háttérképpel kitölteni a képernyőt. :frowning:

A FF-gradiens megoldódott, az IE még nem, pedig beírtam egy hacket, amit találtam az Interneten.

Szia!



Igen, pl ie8 nem ismeri a background-size css-t. De az ie9 meg ie10 már igen, csak te akkor nem ezeken nézted.



De van megoldás, több is pl itt: http://css-tricks.com/perfect-full-page-background-image/



Ez alapján valami ilyesmi lesz (részlet):




<br />
<br />
<br />
body{<br />
overflow-x: hidden;<br />
}<br />
img.bg {<br />
min-height: 100%;<br />
min-width: 1024px;<br />
width: 100%;<br />
height: auto;<br />
position: fixed;<br />
top: 0;<br />
left: 0;<br />
z-index: -1;<br />
}<br />
<br />
<br />
<br />
<br />
<body ><br />
<br />
<img src="http://varosvedo.hu/wp-content/uploads/2013/09/varban11.jpg" class="bg">
```<br />
......<br />
<br />
Majd teszteled le, ők azt írták megy pl ie8-on. (ie6-7 en nem tudom, de nézi azon valaki?) De van ott egy csomó egyéb megoldás is.<br />
<br />
A z-index nem szerepel a példában, csak ahogy elnézem kell, mert így az egész oldal mögé (alá) kerül a kép, nem takarja majd ki. Lehetne úgy is, hogy a tárolónak adsz nagyobb z indexet, mindegy.