Umiejscawianie obrazków na tle zrobionego z obrazka :) html/css

pytanie zadane 13 grudnia 2017 w HTML i CSS przez Denis1705 Początkujący (320 p.)
zmienione kategorie 13 grudnia 2017 przez Patrycjerz

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

1	komentarz 13 grudnia 2017 przez Jacob99 Obywatel (1,840 p.) Niezbyt wiem co chcesz zrobić. Jeśli ten obrazek w tle ma być w div-ie .tlo i reszta ma być na tym obrazku, to musisz wsadzić resztę kodu HTML do tego diva, a nie pod niego.