Forum PHP.pl > [css] 2 tła

Pomoc - Szukaj - Użytkownicy - Kalendarz

Forum PHP.pl > Forum > Po stronie przeglądarki > CSS

Jarod

24.02.2006, 13:30:18

Mam taki problem. W kodzie css mam do znacznika body przypisany plik gif z tłem. Na to tło chciałbym nałożyć pasek i powielić go w poziomie.

Kod css:

Kod

body {
      background-image: url(background.gif);
      background-repeat: repeat-x;
      background-attachment: fixed;
}

.pasekglowny {
      background-image: url(pasek.gif);

}

i pisze coś takiego:

[HTML] pobierz, plaintext 
<div class="pasekglowny">
</div>
[HTML] pobierz, plaintext

I ten pasek się pojawia ale jak wpisze tekst w div'iei tylko jako tło tekstu. A na tym pasku nie chce mieć żadnego tekstu, bo to ma być ozdoba strony.
Mógłbym dać między divem kilka znaczników </br> ale to nie jest eleganckie moim zdaniem.

Więc przy pomocy innych udało się zrobić coś takiego

Kod

.pasekglowny {
       background-image: url(pasek.gif);
       width: 100%; // warstwa bedzie zajmowac 100% szerokosci w przegladarce
       height: 50px; // i 50 px wysokosci
}

Ale jak zrobię coś takiego to widać, że obrazek jest dokładany. Widać granice połączeń - brzydko to wygląda..

Czy jedynym wyjściem jest wycięcie całego obrazka? (ale wtedy automatycznie plik więcej waży) :/

nospor

24.02.2006, 13:38:05

nie musisz w tytule pisac [css]. ale musisz dawac to wlasciwego dzialu, a u nas jest wlasnie dzial css. przenosze

Jarod

24.02.2006, 14:29:05

Cytat(nospor @ 2006-02-24 12:38:05)

nie musisz w tytule pisac [css]. ale musisz dawac to wlasciwego dzialu, a u nas jest wlasnie dzial css. przenosze

Rozumiem. Problem jest nadal :/

Kill3R

24.02.2006, 22:01:45

hmm nie wiem czy dobrze rozumiem ale moze cos takiego Ci pomoze

[HTML] pobierz, plaintext 
html {
  background-image: url(background.gif);
  background-repeat: repeat-x;
  background-attachment: fixed;
}
 
body {
  background-image: url(pasek.gif) 50% 50% no-repeat;  
 
}
[HTML] pobierz, plaintext

oczywiscie ustawic sobie polozenie tego tla wzgledem własnych potrzeb

Pozdrawiam Rafał

Jarod

26.02.2006, 01:01:06

Cytat(Kill3R @ 2006-02-24 21:01:45)

hmm nie wiem czy dobrze rozumiem ale moze cos takiego Ci pomoze

Niestety to nie to.

Kod css:

Kod

#kontener {
      margin: 0 11%;
      padding: 0;
      background-image: url(../layout/tlo.gif);
      background-repeat: repeat-x;
      background-attachment: fixed;
}

#belka {
    margin: 0;
      background-image: url(../layout/belka.gif);
      width: 100%;
      height: 131px;
}

Kod HTML:

[HTML] pobierz, plaintext 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pl" xml:lang="pl">
 
   <head> 
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
      <meta http-equiv="Content-language" content="pl" />
 
	  <title></title>
 
<!-- dołączenie styli głównych -->	  
	  <link rel="stylesheet" href="css/glowny.css" type="text/css" />
   </head>
 
   <body bgcolor="#FFFFFF" text="#000000" link="#0000FF" vlink="#800080" alink="#FF0000">
 
      <div id="kontener">
 
         <p>test, test </br></p>
 
              <div id="belka">
	      </div>
         <p>test, test </br></p>       
       </div>
 
   </body>
</html>
[HTML] pobierz, plaintext

belka.gif

A tak strona wygląda

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.