Tło dopasowywujące się do ekranu

Wszystko o tworzeniu stron w języku X(HTML) i CSS
noob
Początkujący
Początkujący
Posty: 6
Dołączył(a): piątek, 5 lipca 2013, 15:31

Tło dopasowywujące się do ekranu

Post przez noob »

Siemka
Próbuje zrobić takie coś, że jak mam obrazek to ustawiam go jako background, tak żeby się nie przewijał - był ciągle ten jeden obrazek, się automatycznie dopasowywał do szerokości okna przęglądarki
zrobiłem na razie coś takiego

Code: Zaznacz cały

<!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" xml:lang="pl" land"pl">
  <head>
    <title>BG</title>
<style type="text/css">
body 
{

  margin: 0px;
}

#bg 
{
  position: fixed;
  margin: 0px;
  border: 0px;
  padding: 0px;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
  background-repeat: repeat-y;
  
}

#bg img 
{
  width: 100%;
}


#body
{
  position: absolute;
  left: 0%;
  top: 0%;
  width: 98%;
  height:98%;
  padding: 1%;
  z-index: 10;
}

li {
  margin-bottom: 2em;
}
</style>
</head>
<body>
<div id="bg"><img src="images/1.jpg"></div>
<div id="body">ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg </div> 
  </body>
</html>
tylko że działa puki okno przeglądarki jest szersze lub równe szerokości, jęśli jest mniejsze to się równomiernie obraz skaluje, a podspodem zostaje białe tło.
Jak to poprawić, żeby się kopiowało wzdłuż y, albo po prosto zrobić tak żeby obrazek był widoczny tylko przy pełnym oknie inaczej będzie zasłonięte.

wiem że jak poprawie na

Code: Zaznacz cały

#bg img 
{
  width: 100%;
  height: 100%;
}
będzie się skalować nierównomiernie

Chcę osiągnąć coś takiego jak mają na tvgry.pl
Morfidon
Administrator
Administrator
Posty: 1332
Dołączył(a): wtorek, 5 sierpnia 2008, 21:48
Contact:

Re: Tło dopasowywujące się do ekranu

Post przez Morfidon »

ale jeśli chodzi Ci o tło takie jak na stronie co podałeś to zastosowuj background na znaczniku body, a nie twórz jakiegoś obrazka z pomocą img.

Jeśli chcesz aby się obrazek powtarzał wzdłuż określonej linii to korzystasz z : background-repeat.

W video kursie są na ten temat informacje lekcja 26 tła.
focus
Początkujący
Początkujący
Posty: 12
Dołączył(a): niedziela, 3 sierpnia 2014, 22:17

Re: Tło dopasowywujące się do ekranu

Post przez focus »

Witam dołączę się do tematu
ustawienie tła z osobnego pliku css w jaki sposób to zrobić ?

pozdrawiam
Morfidon
Administrator
Administrator
Posty: 1332
Dołączył(a): wtorek, 5 sierpnia 2008, 21:48
Contact:

Re: Tło dopasowywujące się do ekranu

Post przez Morfidon »

Code: Zaznacz cały

background-image: url("sciezka_wzgledem_pliku_styli");
focus
Początkujący
Początkujący
Posty: 12
Dołączył(a): niedziela, 3 sierpnia 2014, 22:17

Re: Tło dopasowywujące się do ekranu

Post przez focus »

Już działa dzięki :)
Post Reply