+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: xHTML, CSS, JavaScript (https://www.webmastertalk.pl/forum-xhtml-css-javascript)
+--- Wątek: Przycięcie tła w CSSie (/thread-przyciecie-tla-w-cssie)
Przycięcie tła w CSSie - essse - 16-10-2009
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.
RE: Przycięcie tła w CSSie - Labsta.com - 16-10-2009
Da się
Pokaż kod.
RE: Przycięcie tła w CSSie - essse - 16-10-2009
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.
RE: Przycięcie tła w CSSie - Labsta.com - 16-10-2009
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.
RE: Przycięcie tła w CSSie - essse - 16-10-2009
Już wiem o co kaman. Dzięki wielkie za pomoc!
RE: Przycięcie tła w CSSie - Tomaan - 20-12-2009
Witam serdecznie!
Mam podobny problem i nie moge sobie z nim poradzić
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 */