Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][HTML]Szerokość obrazka zależna od rozdzielczości monitora
Forum PHP.pl > Forum > Przedszkole
jogi
Witam!

W zasadzie, tytuł tematu nie do końca opisuje problem z jakim zgłaszam się do was, ale ciężko jest mi go przedstawić w jednym zdaniu. Otóż:

Przygotowałem duży podłużny obrazek o szerokości 1500px. Ma on być tłem jednego bloku na stronie. I teraz chciałbym, aby w przypadku rozdzielczości monitora mniejszej niż 1500px, obrazek ten był obcinany po bokach (nie wyświetlał się cały). Przy określeniu szerokości 100%, pojawia mi się belka do przewijania poziomego. Moje pytanie - jak ustalić szerokość tego obrazka, aby przy węższych monitorach, belka się nie pojawiała, tylko po prostu utnie go po bokach.

Pozdrawiam

erix
Jeśli ustawisz to na tło albo dasz overflow: hidden, to powinno pójśćc bez problemu, ale bez kodu, to sobie za wiele nie porozmawiamy.
jogi
Tło dla całej strony ustawione jest w body. Szerokość strony ustawiona jest na 960px. Standardowo idąc od góry mamy top, menu i następnie zaczyna się duży div zawierający w sobie 3 mniejsze:


Kod
<div class="blok">

     <div class="gora"></div>
     <div class="srodek"></div>
    <div class="dol"></div>
</div>



Css dla tego bloku:

Kod
    .blok
                {
                margin:auto;
                heigh:auto;
                }
                
                
                .gora
                {
                margin:auto;
                background-image:url(grafika/gora.jpg);
                background-repeat:no-repeat;
                background-position: center;
                height:312px;
                margin-top: 10px;
                overflow:hidden;
                                }


Ten div to zaokrąglony prostokąt składający się z góry - górne zaokrąglone rogi i dużym napisem (logiem firmy) - szerokość 1500px ze względu na ten napis / logo, środek - paseczek gradientu, no i dół - dolne zaokrąglone rogi.

erix
Puśc to na żywo.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.