Deformacia obrazku v DIVe

max-m · Napísal **max-m**: 24.03.2009 16:46

Caute,
mam dnes este jeden problem (dufam, ze posledny

).

na stranke mam "pas" s texturou, ktora ma v realite sirku 3000px. pomocou nasledujucich kodov a CSS ju vkladam na stranku pod samotny obsah a zobrazim na celej sirke okna.

HTML

Kód:

...
<body>
<div class="brush"></div>
...
</body>

CSS pre FF

Kód:

.brush {
   position:absolute;
   top:0px;
   left:0px;
   width:100%;
   height:283px;
   background-image:url(../img/brush.png);
   z-index:1;
}

CSS pre IE

Kód:

.brush {
   position:absolute;
   top:0px;
   left:0px;
   width:3000px;
   height:283px;
   background-image:url(../img/brush.png);
   z-index:1;
}

vo FF nie je problem: obrazok sa zobrazi na pozadi a to co z obrazku presahuje sa nezobrazi a nezobrazi sa ani horizontalny scroller.

v IE je situacia ina: obrazok sa sice zobrazi no zobrazi mi horizontalny scroller. ked som dal .brush {width:100%} ako vo FF, ta mi sice zmizol scroller, no obrazok bol zdeformovany (celych 3000px width mi natlacil do sirky okna).

ako by sa to dalo fixnut?

DIK

djsulo · Napísal **djsulo**: 24.03.2009 18:03

Kód:

background-attachment: fixed

max-m · Napísal autor témy **max-m**: 24.03.2009 18:07

som skusil a bez vysledku. pri nastavenom width na 3000px mam stale horizontalny scroller a pri nastaveni na 100% mi obrazok zdeformuje.

djsulo · Napísal **djsulo**: 24.03.2009 18:36

tak skus

Kód:

overflow: hidden

max-m · Napísal autor témy **max-m**: 24.03.2009 22:57

odskusane

//edit (max-m):
vyriesene nasledovne pomocou dvoch divov:

HTML

Kód:

...
<body>
<div class="pas"><div class="brush"></div></div>
...
</body>
</html>

CSS

Kód:

.pas {
   width:100%;
   height:283px;
   overflow:hidden;
   position:absolute;
   left:0px;
   top:0px;
   z-index:1;
}
.pas .brush {
   position:relative;
   top:0px;
   left:0px;
   width:3000px;
   height:283px;
   background-image:url(../img/brush.png);
}

Deformacia obrazku v DIVe

Podobné témy