Tło - zmienia się

Question

Witam, czy mógłby ktoś doradzić? Chodzi mi o to, żeby 4 blok w tle nie zjeżdzał pod , kiedy zmiejszam stronę (tzn. na mniejszą szerokość, mniejszy monitor).

* {margin:0px; padding: 0px;}

body, html{
	background-color: #191919;
	font-family: Open Sans;
	width: 100%;
}

.width{
	width: 100%;
	overflow:hidden;
	margin: 0 auto;
}

/* KOMPUTERY */

@media (min-width: 950px) {

.bg_1{
	width: 20%;
	height: 100%;
	margin-left: -60px;
	background-color: #1c1c1c;
	transform: skewX(20deg);
	float: left;
}

.bg_2{
	width: 25%;
	height: 100%;
	margin-left: 50px;
	background-color: #1e1e1e;
	transform: skewX(20deg);
	float: left;
}

.bg_3{
	width: 25%;
	height: 100%;
	margin-left: 50px;
	background-color: #222222;
	transform: skewX(20deg);
	float: left;
}

.bg_4{
	width: 25%;
	height: 100%;
	margin-left: 50px;
	background-color: #222222;
	transform: skewX(20deg);
	float: left;
}

<div class="width">
<div class="bg_1"></div><div class="bg_2"></div><div class="bg_3"></div><div class="bg_4"></div>
</div>

 

Comments

Już sobie poradziłem, ale dalej mam problem z tym, że nie wiem jak ustawić tło jakby pod wszystkim - z-index, ani overflow hidden mi nie działa.

Answer 1

jak ustawić tło jakby pod wszystkim - z-index, ani overflow hidden mi nie działa.

z-index działa tylko wtedy gdy na dany element jest ustawione także position.

 

przykład

<div class="width">
  <div class="bg bg_1"></div>
  <div class="bg bg_2"></div>
  <div class="bg bg_3"></div>
  <div class="bg bg_4"></div>
</div>
<div class="content">
  <section>
    <h3>Czym jest Lorem Ipsum?</h3>
    <p>
      Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym. Został po raz pierwszy użyty w XV w. przez nieznanego drukarza do wypełnienia tekstem próbnej książki. Pięć wieków później zaczął być używany przemyśle elektronicznym, pozostając praktycznie niezmienionym. Spopularyzował się w latach 60. XX w. wraz z publikacją arkuszy Letrasetu, zawierających fragmenty Lorem Ipsum, a ostatnio z zawierającym różne wersje Lorem Ipsum oprogramowaniem przeznaczonym do realizacji druków na komputerach osobistych.
    </p>
    <h3>Do czego tego użyć?</h3>
    <p>
      Ogólnie znana teza głosi, iż użytkownika może rozpraszać zrozumiała zawartość strony, kiedy ten chce zobaczyć sam jej wygląd. Jedną z mocnych stron używania Lorem Ipsum jest to, że ma wiele różnych „kombinacji” zdań, słów i akapitów, w przeciwieństwie do zwykłego: „tekst, tekst, tekst”, sprawiającego, że wygląda to „zbyt czytelnie” po polsku. Wielu webmasterów i designerów używa Lorem Ipsum jako domyślnego modelu tekstu.
    </p>
    <p>Lorem Ipsum</p>
  </section>
</div>

* {
  margin:0px; 
  padding: 0px;
} 
html, body {
  background-color: #191919;
  font-family: Open Sans;
  width: 100%;
  height: 100%;
  color: white;
} 
.width {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  overflow: hidden;
  z-index: 0;
}
   
/* KOMPUTERY */
   
@media (min-width: 950px) {
  .width .bg {    
    height: 100%;
    transform: skewX(20deg);
    float: left;
  }
  .width .bg_1 { 
    width: 21%;
    margin-left: -60px;
    background-color: #1c1c1c;
  }
  .width .bg_2 {
    width: 22%;
    margin-left: 50px;
    background-color: #1e1e1e;
  }
  .width .bg_3 {
    width: 23%;
    margin-left: 50px;
    background-color: #222222;
  }
  .width .bg_4 {
    width: 24%;
    margin-left: 50px;
    background-color: #222222;
  }
}
  
.content {
  position: relative;
  z-index: 1;
}
.content section {
  width: 95%;
  margin: 0.5em auto;
}
.content section p {
  margin: 1em 0;
}
.content section p:last-child {
  background-color: rgba(255, 255, 255, 0.5);
  height: 1000px;
}

 

Comments

[ UPDATE ]

<div class="width">
  <div class="bg bg_1"></div>
  <div class="bg bg_2"></div>
  <div class="bg bg_3"></div>
  <div class="bg bg_4"></div>
</div>
<div class="content">
  <section>
    <h3>Czym jest Lorem Ipsum?</h3>
    <p>
      Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym. Został po raz pierwszy użyty w XV w. przez nieznanego drukarza do wypełnienia tekstem próbnej książki. Pięć wieków później zaczął być używany przemyśle elektronicznym, pozostając praktycznie niezmienionym. Spopularyzował się w latach 60. XX w. wraz z publikacją arkuszy Letrasetu, zawierających fragmenty Lorem Ipsum, a ostatnio z zawierającym różne wersje Lorem Ipsum oprogramowaniem przeznaczonym do realizacji druków na komputerach osobistych.
    </p>
    <h3>Do czego tego użyć?</h3>
    <p>
      Ogólnie znana teza głosi, iż użytkownika może rozpraszać zrozumiała zawartość strony, kiedy ten chce zobaczyć sam jej wygląd. Jedną z mocnych stron używania Lorem Ipsum jest to, że ma wiele różnych „kombinacji” zdań, słów i akapitów, w przeciwieństwie do zwykłego: „tekst, tekst, tekst”, sprawiającego, że wygląda to „zbyt czytelnie” po polsku. Wielu webmasterów i designerów używa Lorem Ipsum jako domyślnego modelu tekstu.
    </p>
    <p>Lorem Ipsum</p>
  </section>
</div>

* {
  margin:0px; 
  padding: 0px;
} 
html, body {
  background-color: #191919;
  font-family: Open Sans;
  width: 100%;
  height: 100%;
  color: white;
} 
.width {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  overflow: hidden;
  z-index: 0;
}
   
/* KOMPUTERY */
   
@media (min-width: 950px) {
  .width .bg {    
    height: 100%;
    transform: skewX(20deg);
    float: left;
    animation: wiggle 10s infinite;
  }
  .width .bg_1 { 
    width: 21%;
    margin-left: -60px;
    background-color: #1c1c1c;
  }
  .width .bg_2 {
    width: 22%;
    margin-left: 50px;
    background-color: #1e1e1e;
  }
  .width .bg_3 {
    width: 23%;
    margin-left: 50px;
    background-color: #222222;
  }
  .width .bg_4 {
    width: 24%;
    margin-left: 50px;
    background-color: #222222;
  }
  @keyframes wiggle {
    10% { transform: skewX(20deg); }
    40%, 60% { transform: skewX(-20deg); } 
    90% { transform: skewX(20deg); }
  }
}
  
.content {
  position: relative;
  z-index: 1;
}
.content section {
  width: 95%;
  margin: 0.5em auto;
}
.content section p {
  margin: 1em 0;
}
.content section p:last-child {
  background-color: rgba(255, 255, 255, 0.5);
  height: 1000px;
}

 

---

Dzięki wielkie, poźniej to sprawdzę, ale póki co pozostałem przy opcji bez tła.