Skocz do zawartości

  • 👋 Witaj na MPCForum!

    Przeglądasz forum jako gość, co oznacza, że wiele świetnych funkcji jest jeszcze przed Tobą! 😎

    • ✅ Pełny dostęp do działów i ukrytych treści
    • ✅ Możliwość pisania i odpowiadania w tematach
    • ✅ System prywatnych wiadomości
    • ✅ Zbieranie reputacji i rozwijanie swojego profilu
    • ✅ Członkostwo w jednej z największych społeczności graczy

    👉 Dołączenie zajmie Ci mniej niż minutę – a zyskasz znacznie więcej!

    Zarejestruj się teraz

Tła - Użytkowe i to w okół

AdaxPlaying

Rekomendowane odpowiedzi

AdaxPlaying Pasjonat

AdaxPlaying

Opublikowano
Pasjonat

AdaxPlaying

Opublikowano

Witam!

 

Mam pytanie, robię stronę na Divach i na przykład mam 2 divy

 

 

 

<body>

 

<div class="background">

 

</div>

 

<div class="usebackground"> 

 

</div>

 

</body>

 

 

Chcę aby głównym tłem był obrazek background.png

 

 

to ustawiam

 

 

<body>

 

<div class="background" style="background: url('background.png'); ">

 

</div>

 

<div class="usebackground"> 

 

</div>

 

</body>

 

 

 

I ok, tło diva background mam, (jest ono na całą szerokość strony i wysokość)

 

 

.background {

     

      width: 100%;

      height: 100%; 

 

}

 

 

 

 

Ale ja chcę jeszcze ustawić na tym tle tło diva usebackground, jednak jeżeli zrobię to tak jak zrobiłem w przypadku diva background (tylko zmienię w style szerokość z 100% na 960px) to 

to tło pojawia mi się po lewej stronie strony, w jaki sposób mogę wycentrować to tło? aby było na samym środku? (tak jak się robi to z tekstem <center> tekst </center> i pojawia się on na środku strony tak chciałbym zrobić z tłem, 

 

 

 

 

 

Za pewnie problem mam banalny jednak proszę o wyrozumiałość dopiero się uczę. 

AdaxPlaying Pasjonat

AdaxPlaying

Opublikowano
Pasjonat

AdaxPlaying

  • Autor
Opublikowano 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
      <title>test</title>
</head>

<body>


<style> 

.background {
  
  width: 100%;
  height: 1600px; 
  
}

.usebackground {
  
  width: 960px;
  height: 1600px; 
  
  
}


</style>








<div  class="background" style="background: url('background.png');">
 
 
 

</div>

<div  class="usebackground" style="background: url('backgrounduse.png') center;">
 
 
 

</div>




</body>
</html>

Nadal nie działa, wyżej wstawiłem cały kod - teraz na górze strony jest tło background.png a pod nim po lewej stronie (nawet nie na środku) jest backgrounduse.png 

RJ45 Nowicjusz

RJ45

Opublikowano
Nowicjusz

RJ45

Opublikowano

Nie działa, bo nie chcesz wyśrodkować tła, tylko diva ;)

ustaw:
 

.usebackground {
  width: 960px;
  height: 1600px; 
  margin: 0 auto;
}

Dzięki temu Div wyśrodkuje się.

takie pytanko, dlaczego div background, nie lepiej przypisać tło strony dla html, body?

AdaxPlaying Pasjonat

AdaxPlaying

Opublikowano
Pasjonat

AdaxPlaying

  • Autor
Opublikowano

Nie działa, bo nie chcesz wyśrodkować tła, tylko diva ;)

 

ustaw:

 

.usebackground {
  width: 960px;
  height: 1600px; 
  margin: 0 auto;
}

Dzięki temu Div wyśrodkuje się.

 

takie pytanko, dlaczego div background, nie lepiej przypisać tło strony dla html, body?

 

 

 

Dzięki, jak dopisałem do style margin: 0 auto; wyśrodkowało mi jednak nadal użytkowe tło było pod tłem zwykłym (nie nakładało się na nie), dopiero zobaczyłem to co napisałeś niżej i zamiast diva dałem <body background: "background.png"> i działa tak jak miało działać, wielkie dzięki ;D! 

 

 

 

Temat do zamknięcia

 

 

 

Jednak jeszcze jedno pytanie mam! 

 

 

- Jak zrobić aby pomniejszając stronę nie pokazywało 100xTło tylko jedno duże? Zaraz wrzucę SS'y o co mi chodzi 

 

 

post-905983-0-80750600-1397666897_thumb.png   Chciałbym aby tło po boku nie dzieliło się na te kwadraty, a tło użytkowe wydłużało się po pomniejszeniu 

RJ45 Nowicjusz

RJ45

Opublikowano
Nowicjusz

RJ45

Opublikowano

aby tło się rozciągało musisz użyć:
 

html, body {
	margin: 0;
	width: 100%;
	height: 100%;
	background: url('images/background.png');
	background-size: 100% 100%;
	background-attachment: fixed;
}

Dzięki temu tło zawsze będzie w jednej pozycji i rozciągnięte we wszystkie strony.

 

A żeby div .usebackground był zawsze rozciągnięty w wysokości to:

.usebackground {
  width: 960px;
  height: 100vh; 
  margin: 0 auto;
  background: url('images/usebackground.png') center;
}

Powinno być dobrze ;)

AdaxPlaying Pasjonat

AdaxPlaying

Opublikowano
Pasjonat

AdaxPlaying

  • Autor
Opublikowano

aby tło się rozciągało musisz użyć:

 

html, body {
	margin: 0;
	width: 100%;
	height: 100%;
	background: url('images/background.png');
	background-size: 100% 100%;
	background-attachment: fixed;
}

Dzięki temu tło zawsze będzie w jednej pozycji i rozciągnięte we wszystkie strony.

 

A żeby div .usebackground był zawsze rozciągnięty w wysokości to:

.usebackground {
  width: 960px;
  height: 100vh; 
  margin: 0 auto;
  background: url('images/usebackground.png') center;
}

Powinno być dobrze ;)

 

2 Pytania, jeżeli umieszczę w style.css:

html, body {


  background-size: 100% 100%;

}

To jeżeli nie dam .html wywala mi to jako błąd, więc muszę zrobić div class = html 

a jeżeli chodzi o background-size: 100% 100%  To nie ważne jak zrobię zawsze pokazuje mi to jako błąd 

Zarchiwizowany

Ten temat przebywa obecnie w archiwum. Dodawanie nowych odpowiedzi zostało zablokowane.

Tematy
×
×
  • Dodaj nową pozycję...