ugrás a tartalomhoz

body bockground css

Hatusi · 2010. Okt. 12. (K), 10.20
Sziasztok!
Bizonyára én voltam túl láma a dologhoz.
Adott egy kép, amit szeretnék használni egy oldal háttereként oly módon, hogy berakom fixen a jobb sarokba majd tükrözöm a bal felőbe. Megoldható?
Eddig jutottam:
van egy index.php fájom ami a site.css-ből kapja a stílusokat

site.css:
....
body
{
background-color:#9fa337;
background-image:url(backleft.jpg);
background-repeat:no-repeat;
background-position:top left;
background-attachment:fixed;
}
....

eddig oké is megadja a háttérszínt, berakja a képet a bal felsőbe, nem ismétlődik, nem scrollozódik.
A tükrözésre (flip) gugli ezt adta legjobb megoldásnak:
.flip-horizontal { -moz-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); filter: fliph; /*IE*/ }

de ez ugye az oldalam tartalmát tükrözi nem a képet.
Kell-e egyáltalán nekem tükrözés? Ha megcsinálom a tükrözött képet, lesz img 1 és img 2, a másodikat hogy tudom felbűvészkedni a jobb felsőbe?

Köszönettel veszek minden segítséget.
‹ window.onload UTF-8, de mégsem! SOS ›
 ■
1

Két kép

Kevlar · 2010. Okt. 12. (K), 10.32
Ha cross-browser megoldást akarsz (mi mást? :), akkor két kép kell.
Az elsőt beteszed a body-nak, aztán közvetlenül a body-ba egy 100% széles div, amibe pedig kerül a másik kép.

Szerk: van lehetőség CSS3-ban két hátteret adni egy elemnek, ehhez is két kép kell, de nem lesz minden böngészőben látható.
3

100%széles div

Hatusi · 2010. Okt. 12. (K), 10.49
Szia!

Erre volt szükségem, működik pici szépséghibával:
Jobb oldali kép is majdnem a helyén de van 10px margó jobbról és fentről...
a fentit sikerült eltüntetni margin-top:-10px;-el a jobb oldalit nem
Közvetlenül body-ba raktam:
<body>
<div class="hatterkep">
...tartalom
</div>
.hatterkep
{
width:100%;
overflow:hidden;
margin-top:-10px;
margin-right:-10;
background-image:url(backright.jpg);
background-repeat:no-repeat;
background-position:top right;
background-attachment:fixed;
}

ilyesmivel találkoztál már? köszi
6

Body

Kevlar · 2010. Okt. 12. (K), 12.06

body {
    margin: 0;
    padding: 0;
}
2

canvas + data URI

Poetro · 2010. Okt. 12. (K), 10.47
Canvas és data URI segítségével megoldható a kép tükrözése egyetlen képpel is. A canvas-ra másolod a háttérnek szánt képet, megtükrözöd, majd kiveszed a kép adatát, és beállítod azt háttérképnek data URI segítségével. A probléma hátránya, hogy csak olyan böngészőkben működik, amik támogatják a canvas-t és a data URI-t, azaz Internet Explorer 9-nél régebbi változatai kiesnek, és csak JavaScript-tel működik.
4

canvas

Hatusi · 2010. Okt. 12. (K), 10.52
köszi az előző egyszerűbbnek tűnik és mennie kell ie régebbi verzióin is
5

megoldva

Hatusi · 2010. Okt. 12. (K), 11.08
Sziasztok!

probléma megoldva
kellett a div-nek egy position:absolute; margin-right:-10;
a body-ba pedig egy owerflow-x:hidden;

köszi a segítségeket, totális a boldogság :-D
7

Body, mint fentebb

Kevlar · 2010. Okt. 12. (K), 12.08
Biztos nem a body alap padding-ja a hibás? (Amit írtam fentebb.)
Ezek a hack-szagú dolgok okozhatnak még problémát, és valószínűleg feleslegesek is.
8

padding

SamY · 2010. Okt. 19. (K), 14.37
Szerintem is fontold meg Kevlar body{padding:...} megoldasat.

A body overflow-x:hidden -t pedig ne nagyon eroltesd, mivel ha valaki peldaul osszehuzza a bongeszot, vagy kisebb felbontason (esetleg mobilon) nezi az oldalad, nem fog tudni vizszintesen scrollozni, csak siman felbe lesz vagva az oldalad.