Odpowiednie ustawienia tła.

pytanie zadane 2 marca 2017 w HTML i CSS przez Mateusz Bogumił Obywatel (1,380 p.)

Witam. Przybywam z kolejnym problemem. Tym razem po dodaniu zdjęcia na tło wkleja się ono w każdego diva oddzielnie. Chciałbym by wyglądało to w taki sposób, że po lewej i po prawej stronie jest tło. Zaś w całym divie note białe tło. Div footer by miał tło połączone wraz z tłem po lewej i po prawej. Po prostu by nie był to znów nałożony obrazek, bo to brzydko wygląda. Jakbym mógł prosić to opiszcie też co robię źle, bo ostatnio ktoś przy pomocy mi z innym problemem napisał od początku kod i nawet nwm czemu, nic nie wytłumaczył :/

HTMl:


<html lang="pl">
<head>
<title>Redaktor Seed1212 </title>
 
<meta name="description" content="Redaktor Seed1212 - czyli co Seed sdzi o tym i o tam tym!" />
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" tyle="text/css" />
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans|Lato&subset=latin-ext" rel="stylesheet">
 
<script src="timer.js"></script>
</head>
<body>
<div class="container">
<div class="left"></div>
<div class="wrapper">
<div class="topbar">
<div class="title">
<img src="seed.png" width="1000" height="250" /> 
</div>
<nav class="navbar">
  <div class="navbar-link">Strona gwna</div>
  <div class="navbar-link">Kontakt</div>
  <div class="navbar-link">O mnie</div>
</nav>
</div>
  <div class="note">
    <div class="notetittle">notettile</div>
    <div class="notetext">notetext
  </div>
</div>
<footer class="footer">footer</footer>
</div>
<div class="right"></div>
</div>
</body>
 
</html>

CSS


* {
box-sizing: border-box;
margin: 0;
padding:0;
font-family: 'Josefin Sans', sans-serif;
background-image: url("oko.jpg");
color: white;
}
 
.left, .right
{
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
 
.container{
display: flex;
flex-flow: row nowrap;
}
 
.wrapper
{
flex: 1;
min-width: 1000px;
}
 
.title
{
justify-content: center;
align-items: center;
height: 250px;
}
 
.navbar
{
width: 100%;
display: flex;
flex-flow: row nowrap;
}
 
.navbar-link
{
height: 50px;
flex: 1;
display: flex;
justify-content: center;
align-items: center;
background-color: red;
cursor: pointer;
clear: both;
}
 
.note
{
min-height: 400px;
background-color: white;
}
 
.footer
{
height: 50px;
display: flex;
justify-content: center;
align-items: center;
background-color: yellow;
}
 
.notetittle
{
height: 50px;
width: 1000px;
text-align: center;
font-size: 40px;
font-weight: bold;
margin-bottom: 30px;
background-color: white;
}
 
.notetext
{
	background-color: red;
	height: 50px;
	width: 1000px;
	font-family: 'Lato', sans-serif;
}

1 odpowiedź

odpowiedź 2 marca 2017 przez imklau Nałogowiec (42,090 p.)
wybrane 3 marca 2017 przez Mateusz Bogumił

Najlepsza

masz teraz tło przy * to oznacza że wszystkie elementy będą je miały.
Ustaw:

.container{
display: flex;
flex-flow: row nowrap;
background-image: url(oko.jpg");
background-repeat: no-repeat; 
background-size: cover;
}
.footer
{
height: 50px;
display: flex;
justify-content: center;
align-items: center;
background-image: url("oko.jpg");
background-repeat: no-repeat;
background-size: contain;
}

komentarz 2 marca 2017 przez Mateusz Bogumił Obywatel (1,380 p.)

Niby wszystko fajnie spoko. Ale niestety na dole mam biały pasek i w footerze jest taki mały kwadracik z całym obrazkiem oko

komentarz 2 marca 2017 przez MałyAleWariat Bywalec (2,830 p.)

Spróbuj wywalić tą linię z footera:

background-image: url(oko.jpg");

komentarz 3 marca 2017 przez Mateusz Bogumił Obywatel (1,380 p.)

No i znów fajnie, ale znów też nie fajnie. Na dole mam linie białą :/

komentarz 3 marca 2017 przez imklau Nałogowiec (42,090 p.)

jaką białą linię?
wstaw cod na codepen i pokaż o co Ci chodzi
poza tym: prawy przycisk myszy i "zbadaj element" czy coś podobnego pomaga w takich sytuacjach