Witam. mam problem z rozmieszczeniem 6 grafik na stronie, ponieważ chciałbym je umieścić na tle, które też jest obrazkiem tylko dużo większym.
O to kody:
HTML
<!DOCTYPE HTML>
<html lang="pl">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Denis</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="stylesheet" type="text/css" href="main.css">
<link href="https://fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet">
</head>
<body>
<div class="tlo">
</div>
<header>
<div class="container">
<img src="logo.png" alt="logo" class="logo">
<nav>
<ul>
<li><a href="#">Grafiki</a></li>
<li><a href="#">Gry</a></li>
<li><a href="#">Cennik</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</nav>
</div>
</header>
<div class="gallery">
<img src="slider/1s.png">
<img src="slider/2s.png">
<img src="slider/3s.png">
<img src="slider/4s.png">
<img src="slider/5s.png">
<img src="slider/6s.png">
</div>
</body>
</html>
Oraz CSS
body {
margin: 0;
background: #222;
font-family: 'Work Sans', sans-serif;
font-weight: 400;
}
.container {
width: 80%;
margin: 0 auto;
}
header {
background: rgb(255, 206, 0);
position: fixed;
top: 0;
width: 100%;
}
header::after {
content: '';
display: table;
clear: both;
}
.logo {
float: left;
padding: 9px 0;
}
nav {
float: right;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-left: 70px;
padding-top: 25px;
position: relative;
}
nav a {
color: #444;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
}
nav a:hover {
color: #000;
}
nav a::before {
content: '';
display: block;
height: 5px;
background-color: #444;
position: absolute;
top: 0;
width: 0%;
transition: all ease-in-out 400ms;
}
nav a:hover::before {
width: 100%;
}
.tlo
{
height: 3500px;
width: 1620px;
background: url(slider/bg.png);
background-position: right;
position: relative;
margin: auto;
}
.gallery{
margin: 10px 50px;
}
.gallery img{
padding: 50px;
top: 100px;
left: 50px;
position: absolute;
}
z góry dzięki