Problem z background-image scrollowanie w dół

pytanie zadane 21 grudnia 2017 w HTML i CSS przez ildan91 Użytkownik (630 p.)

Witam, Mój problem polega na tym, ze ustawiając zdjecie w rozdzielczosci full hd jako background-image i scrollując w dół z ctrl to ten obraz sie powiela. Ktoś zna rozwiązanie?

HTML:

<body>
<header>
Welcome to my portfolio
</header>
<naw>
<div class="naw">
<ol>
<li>Who am I?</li>
<li>What I can offer?</li>
<li>My Curriculum vitae</li>
<li>Contact me</li>
</ol>
<img class="img" src="szymon.png">
</div>
</naw>
   <main>
   <div id="content">
   <article>
   <section id="who">
   <header class="head">
   <h1>Who am I?</h1>
   <p>Hi! Welcome to my portfolio. My name is Simon. I finished Maria Curie-Sklodowska University in Lublin. In Poland well known as UMCS :). I graduated Management with Brand Image Strategic Management. Then I tried my hand at the army. It was fantastic experience. After that, meanwhile I worked in a few jobs as recruiter or customer service specialist. Unfortunately, I was not happy working there and I desired to change my life and do something new. Something what makes my life more valuable. I decided to be front-end developer. </p>
   </header>
   </section>
   <section>
   </section>
   <section>
   </section>
   <section>
   </section>
   </article>
   </div>
   </main>

</body>
</html>

CSS:

body
{background-image:url(http://www.wallpapers4u.org/wp-content/uploads/room_office_desk_chair_shelves_39161_1920x1080.jpg);
font-family: 'Josefin Sans', sans-serif;
margin:0;
}
header
{font-size:60px;
text-align:center;
font-weight:700;
color:#555;
margin-top:30px;
}

.naw
{height:80px;
width:100%;
background-color:#666567;
opacity:0.8;
text-align:center;

}

ol
{list-style-type:none;

}
ol>li
{display:inline-block;
   padding:22px;
   font-size:28px;
   padding-top:30px;
   border-right: 1px solid #dddddd ;
}

ol>li:first-child
{border-left: 1px solid #dddddd ;
}

.img
{
   border:ridge 2px #fdfdfd;
   width:130px;
   height:185px;
   dislpay:inline-block;

}

ol>li:hover
{background-color:#555247;
cursor:pointer;

}

#content
{background-image:url(http://www.wallpapers4u.org/wp-content/uploads/table_office_chairs_glass_window_39163_1920x1080.jpg);
   width:1920px;
   height:1080px;
   margin-top:890px;
   position:relative;
}

p
{
font-size:24px;

}

#who
{width:800px;
margin-left:auto;
margin-top:auto;
text-align:center;

}
.head
{margin-top:30px;
   position:absolute;
   text-align:center;


}

1 odpowiedź

odpowiedź 21 grudnia 2017 przez Chess Szeryf (76,710 p.)

Zastosuj taki styl:

background-repeat:no-repeat;

komentarz 21 grudnia 2017 przez ildan91 Użytkownik (630 p.)

Faktycznie obrazu nie powtarza, ale mój pasek nawigacji wychodzi dalej za obręb mojej strony. Ale dzięki za pomoc :) Jakbyś wiedział jak tego problemu się pozbyć to będę wdzięczny.

komentarz 21 grudnia 2017 przez Chess Szeryf (76,710 p.)
edycja 21 grudnia 2017 przez Chess

Chyba przez to, aczkolwiek pewien nie jestem:

#content{
   width: 1920px;
}

Nadaj temu ID szerokość na 100% lub 100vw lub tego typu jednostkę.

https://developer.mozilla.org/en-US/docs/Web/CSS/length

https://www.w3.org/TR/css-values-3/#relative-lengths

komentarz 21 grudnia 2017 przez ildan91 Użytkownik (630 p.)

Niestety to nic nie daje. Wtedy pokazują się 4 obrazy. Wygląda na to, że moje tło składa się z 12 obrazów po zescrollowaniu do 25%. Przy rozmiarze 100% w przeglądarce widzę całość. Sprawdzałem z ciekawości kod Pana Zelenta. Tam było wszystko ok. Spróbuje nadać to tło do jakiegoś Diva a nie do body. Może wtedy się uda

komentarz 21 grudnia 2017 przez ildan91 Użytkownik (630 p.)

Zadziałało aczkolwiek przy pomniejszeniu w przegladarce do 25% widać białe pole po prawej stronie i na dole otaczające moje portfolio. W każdym razie nav nie wychodzi za obręb mojej pracy- wszystko jest w divie :) Dzięki za chęć pomocy.

komentarz 21 grudnia 2017 przez Chess Szeryf (76,710 p.)

Jeśli chcesz mieć tylko jeden image dla wszystkich elementów, to nadaj im dla każdego elementu z osoba ten styl, który podałem w odpowiedzi (background: no-repeat).

Przykład:

div,span,p {
   background-repeat:no-repeat;
}

Równoważne z:

div{ 
   background-repeat:no-repeat;
}
span{ 
   background-repeat:no-repeat;
}
p{ 
   background-repeat:no-repeat;
}

Popatrz tutaj:

https://developer.mozilla.org/en-US/docs/Web/CSS/background

Jakie białe pole, może clear: both lub padding/margin pomogą?

komentarz 21 grudnia 2017 przez ildan91 Użytkownik (630 p.)

przetestuję ten sposób ale już wziałem to tego diva. Wystąpił wtedy problem bo ten div nie był dociągniety do góry i na górze był biały pasek o hight ok. 20px. Uzyłem position: absolute i stawiłem top:0 i mi dociągnęło do góry :) Pokombinowałem ale zamierzony efekt jest :D

komentarz 21 grudnia 2017 przez ildan91 Użytkownik (630 p.)

Niestety sprawdzałem to Twoje rozwiązanie i dalej wychodzi nav poza obręb mojego portfolio. Musiałbym zmienić width: ze 100 proc na 1920px ale to i tak nie roziwązauje problemu pozycjnowania wielu elementów. Co do tego białego pola proszę wklep sobie kody, które teraz podam ale usuń: position:absolute;
    top:0; z klasy container na samej gorze pod body w css. Bez tej komendy jest taki efekt jakby zdjęcie nie wypełniało całego ekranu i jest biały pas na samej górze Na początku próbowałem usunąć margin-top z headera i faktycznie wypełniało całe tło ale znowu napis główny był przyklejony do górnej ramki przeglądarki.

HTML:

<body>
<div class="container">
<header>
<div class="lol">
  Welcome to my portfolio
  </div>
  </header>
  <naw>
    <div class="naw">
<ol>
<li>Who am I?</li>
<li>What I can offer?</li>
<li>My Curriculum vitae</li>
<li>Contact me</li>
</ol>
<img class="img" src="szymon.png">
    </div>
    </naw>
    <main>
    <div id="content">
    <article>
    <section id="who">
    <header class="head">
    <h1>Who am I?</h1>
    <p>Hi! Welcome to my portfolio. My name is Simon. I finished Maria Curie-Sklodowska University in Lublin. In Poland well known as UMCS :). I graduated Management with Brand Image Strategic Management. Then I tried my hand at the army. It was fantastic experience. After that, meanwhile I worked in a few jobs as recruiter or customer service specialist. Unfortunately, I was not happy working there and I desired to change my life and do something new. Something what makes my life more valuable. I decided to be front-end developer. </p>
    </header>
    </section>
    <section>
    </section>
    <section>
    </section>
    <section>
    </section>
    </article>
    </div>
    </main>
</div>
</body>
</html>

CSS:

body
{
  font-family: 'Josefin Sans', sans-serif;
  margin:0;

}

.container
{width:1920px;
    background-image:url(http://www.wallpapers4u.org/wp-content/uploads/room_office_desk_chair_shelves_39161_1920x1080.jpg);
    position:absolute;
    top:0;

}

header
{font-size:60px;
  text-align:center;
font-weight:700;
color:#555;

}

.lol
{
    margin-top:30px;
}
.naw
{height:80px;
  width:100%;
  background-color:#666567;
  opacity:0.8;
  text-align:center;

}

ol
{list-style-type:none;



}
ol>li
{display:inline-block;
    padding:22px;
    font-size:28px;
    padding-top:30px;
    border-right: 1px solid #dddddd ;
}

ol>li:first-child
{border-left: 1px solid #dddddd ;
}

.img
{
    border:ridge 2px #fdfdfd;
    width:130px;
    height:185px;
    dislpay:inline-block;

}

ol>li:hover
{background-color:#555247;
cursor:pointer;


}

#content
{background-image:url(http://www.wallpapers4u.org/wp-content/uploads/table_office_chairs_glass_window_39163_1920x1080.jpg);
    width:1920px;
    height:1080px;
    margin-top:890px;
    position:relative;
}

p
{
    font-size:24px;

}

#who
{width:800px;
margin-left:auto;
margin-top:auto;
text-align:center;

}
.head
{margin-top:30px;
    position:absolute;
    text-align:center;


}

komentarz 22 grudnia 2017 przez Chess Szeryf (76,710 p.)

<style>
body{ 
	background:grey;
}
nav{ 
	text-align:center;
	width:100%;
}
ul{ 
	margin:0;
	padding:0;
}
li {
	display:inline-block;
	border:1px solid orange;
	border-left:1px dashed rgb(154,193,62);
	border-right:1px dashed rgb(154,193,62);
	padding:2%;
	word-break:break-all;
}
li:hover { 
	background:orange;
	opacity:0.5;
	transition: 1000ms;
	border:1px solid transparent;
}
section{
	min-width:25%;
	border:1px solid brown;
	display:inline-block;
}
img[src]{ 
	display:block;
	margin-left:auto;
	margin-right:auto;
}
header{
	text-align:center;
	font-size:16pt;
	color:brown;
	font-weight:bold;
	text-decoration:underline;
}
</style>

<body>
 
<header>
	Welcome in Lorem Ipsum!
</header>
 
<!--
--><nav><!--
--><ul><!--
	--><li>first777777777777777777777777777777777777777777777777777777777777777777777777</li><!--
	--><li>second</li><!--
    --><li>third</li><!-- 
    --><li>fourth</li><!-- 
--></ul><!--
--></nav><!--
-->

<section>Lorem Ipsum. Lorem Ipsum. Lorem Ipsum.</section>
<section>Lorem Ipsum. Lorem Ipsum. Lorem Ipsum.</section>

<img src="rabbit.png"/>

<script>
var ElLi = document.querySelectorAll('nav > ul > li');

for(var i=0;i<ElLi.length;i++){ 
	ElLi[i].onmouseover = function() {
		for(var i=0;i<ElLi.length;i++){ 
			ElLi[i].style.border = '1px solid rgb(191,147,64)';
		}
	}
	ElLi[i].onmouseout = function(){ 
		for(var i=0;i<ElLi.length;i++){ 
			ElLi[i].style.border = '1px solid orange';
			ElLi[i].style.borderLeft = '1px dashed rgb(154,193,62)';
			ElLi[i].style.borderRight = '1px dashed rgb(154,193,62)';
		}
	}
}
</script>
  
</body>
</html>