Zaloguj się

essse · 16-10-2009, 04:17

Witam,
mam nietypowy problem, przeszukałem chyba całe google, ale nigdzie nie znalazłem odpowiedzi. Mianowicie:
Mam pocięty layout o szerokości 1440 px. Czy da się zrobić w CSSie na divach coś takiego, aby: przy mniejszych rozdzielczościach nadmiar tła (który normalnie powoduje pojawienie się scrolla) był obcinany równomiernie z prawej i lewej strony? Tło to obrazek i chce, żeby on był widoczny przy wyższych rozdziałkach, a przy niższych był przycięty. Np. ktoś ma rozdzielczość 1024 px i tło wtedy wyświetla się "wyśrodkowane", tzn. obcięte o nadmiarowe 416 px (po 208 px).

Będę wdzięczny za każdą pomoc.
Pozdrawiam.

**Labsta.com** · 16-10-2009, 04:23

Da się

Pokaż kod.

essse · 16-10-2009, 04:31

Podstawowy szablon:

Kod:
<html>

<head>

<title>index</title>

<meta http-equiv="Content-Type" content="text/html; utf-8">

<style type="text/css">

#index_01{

    background-image:url('images/index_01.png');

    width: 343px;

    height: 643px;

    float: left;

}

#index_02{

    background-image:url('images/index_02.png');

    width: 751px;

    height: 200px;

    float: left;

}

#index_03{

    background-image:url('images/index_03.png');

    width: 346px;

    height: 643px;

    float: left;

}

body{

    margin: 0px;

    padding: 0px;

}

</style>

</head>

<body>

    <div id="index_01"></div>

    <div id="index_02"></div>

    <div id="index_03"></div>

</body>

</html>

Chodzi teraz o to, żeby index_01 i index_03 były równo przycięte przy mniejszych rozdzielczościach.

**Labsta.com** · 16-10-2009, 05:26

Zakładam że index_02 to będzie content.
Więc tak, moim zdaniem najoptymalniej:
-połącz obrazki index_01.png i index_03.png w jeden na środku pusty oczywiście przerwa 751px nazwimy go bg.png

Kod:
<html>

<head>

<title>index</title>

<meta http-equiv="Content-Type" content="text/html; utf-8">

<style type="text/css">

#index_02{

    background-image:url('images/index_02.png');

    width: 751px;

    height: 200px;

margin: 0px auto;

}

body{

background: url(images/bg.png) no-repeat 50% 0%;

    margin: 0px;

    padding: 0px;

}

</style>

</head>

<body>

    <div id="index_02"></div>

</body>

</html>

Mogłem gdzieś popełnić błąd, bo piszę z ręki i nie sprawdzałem w praniu, ale mam nadzieję, że sposób jest jasny.

essse · 16-10-2009, 18:47

Już wiem o co kaman. Dzięki wielkie za pomoc! Smile

Tomaan · (Ten post był ostatnio modyfikowany: 20-12-2009, 21:32 przez Tomaan.)

Witam serdecznie! Smile

Mam podobny problem i nie moge sobie z nim poradzić Sad

Chcę uzyskać identyczny efekt co autor wątku, mieć dostosowane tło do Ful HD (1920px) jednak przy niższych rozdzielczościach nie chciałbym mieć scrolli poziomych.

Proszę o pomoc, mam trochę inaczej w kodzie, tło jest już ustalone, jest to plik wyświetlający się na dole strony. Grafika, która powoduje mi pojawianie się scrolli jest w sekcji Header, plik o nazwie "Header.jpg".

Oto kod:

Kod:
body

{

        margin-top: -175px;

        margin-bottom: 150px;

    background-color: #FFFFF;

    background-image: url('../images/Page-BgTexture.jpg');

    background-repeat: no-repeat;

    background-attachment: scroll;

    background-position: bottom center;

        min-height: 1000px;

}

i dalej kod, który powoduje problem:

Kod:
/* begin Header */

div.art-Header

{

margin-left: -468px;

margin-right: auto;

margin-bottom: -30px;

    position: relative;

    z-index:-2;

    width: 1920px;

    height: 350px;

}

div.art-Header-jpeg

{

    position: absolute;

    z-index:-3;

    top: 0;

    left: 0;

    width: 1920px;

    height: 620px;

    background-image: url('../images/Header.jpg');

    background-repeat: no-repeat;

    background-position: center center;

}

/* end Header */

Zaloguj się
Login:
Hasło:	Nie pamiętam hasła
	Zapamiętaj mnie