I've been looking for an answer for so many hours since yesterday and despite loads of tutorials that I've watched on youtube, I still don't have a solution to my problem. Here's the thing: I created 6 boxes of products, using array, that I styled in css, so they would stand in a row next to each other. Then I put a background image into my header and styled the background. At this point everything worked as planned but the background image was on the top of the website and the boxes with products were moved in the bottom (under the background image). I was trying to get the boxes over the background image, so they would overlay the background but no success. Then I added " top:0; " value to the 'position' attribute and it actually worked BUT now all of the 6 boxes stand in the left top of the site, at the very same spot, overlaying each other.
My code looks pretty wild now as I was trying to make this work. So I apologize in advance. Does any of you guys please have an advice how to make this work, so the 6 boxes with products would stand next to each other in a row and overlay the background image? Thanks a lot!
Here's my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Eshop</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#" ></a>Main menu</li>
<li><a href="#" ></a>About us</li>
<li><a href="#" ></a>Contact</li>
<li><a href="#" ></a>Delivery</li>
<li><a href="#" ></a>FAQs</li>
</ul>
</nav>
</header>
<main>
<div >
<?php
$TV = ["id" => "1", "name" => "TV", "img" => "<img src='img/TV.png'>", "price" => "1000 USD"];
$Computer = ["id" => "2", "name" => "Computer", "img" => "<img src='img/computer.png'>", "price" => "2000 USD"];
$Laptop = ["id" => "3", "name" => "Laptop", "img" => "<img src='img/laptop.png'>", "price" => "750 USD"];
$Camera = ["id" => "4", "name" => "Camera", "img" => "<img src='img/camera.png'>", "price" => "500 USD"];
$Phone = ["id" => "5", "name" => "Phone", "img" => "<img src='img/phone.png'>", "price" => "400 USD"];
$Smartwatch = ["id" => "6", "name" => "Smartwatch", "img" => "<img src='img/smartwatch.png'>", "price" => "300 USD"];
// echo "<img src='img/computer.jpg'>";
$catalog = array ($TV, $Computer, $Laptop, $Camera, $Phone, $Smartwatch);
// print_r($catalog);
foreach ($catalog as $item){
echo
"<div class='catalog-item'>
<div class='catalog-img'>
".$item ["img"]."
</div>
<div>
".$item ["name"]."
</div>
<div>
".$item ["price"]."
</div>
<div>
Buy
</div>
</div>";
// print_r($item);
// echo "<br>";
}
?>
</div>
</main>
<footer >
<div >
<div >
<p><a href="https://www.facebook.com/" target="_blank">Facebook</a></p>
<p><a href="https://www.instagram.com/" target="_blank">Instagram</a></p>
</div>
<div >
Copyright © 2023. All rights reserved.
</div>
</div>
</footer>
</body>
</html>
and here's my CSS:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
width: 1500px;
margin: 0 auto;
background-color: rgb(255, 255, 255);
}
/******* Header *******/
header {
background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url("img/macbook.jpg");
background-size: cover;
height: 100vh;
background-attachment: fixed;
color: white;
position: relative;
overflow: hidden;
}
/******* Main *******/
.catalog-item {
width: 200px;
height: 300px;
background: linear-gradient(rgba(4, 65, 85, 0.5), #12688580);
margin: 20px;
font-size: 15px;
font-family: Arial;
font-weight: bold;
color: white;
box-sizing: border-box;
text-align: center;
margin-top: 20px;
box-shadow: 20px 10px 20px gray;
border-radius: 15px;
padding-bottom: 80px;
display: inline-block;
position: absolute; top:0;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
img {
max-width: 140px;
max-height: 200px;
object-fit: cover;
padding-top: 50px;
}
.catalog-img {
height: 100%;
}
/* .catalog-item:link,
.catalog-item:visited {
background: #ff7c32;
} */
.catalog-item:hover,
.catalog-item:active {
transition: background 0.5s;
background: #6dc4e080;
}
/******* Footer *******/
.footer-page {
background-color: #12688580;
margin-top: 30px;
color: #fff;
font-family: Arial, Helvetica, sans-serif;
}
.social {
text-align: center;
margin: 10px 0px;
}
.social p {
display: inline;
margin-right: 20px;
}
.social p a:link,
.social p a:visited {
text-decoration: none;
color: #fff;
font-size: 22px;
}
.social p a:hover,
.social p a:active {
color: #08111480;
}
.footer-text {
text-align: center;
margin: 10px 0px;
font-size: 13px;
}
CodePudding user response：
The usual solution for your use case, is to specify a background image through CSS (e.g. with background-image property), instead of as an HTML <img> Element:
.container {
width: 1500px;
/* Background image defined in CSS */
background-image: url(https://upload.wikimedia.org/wikipedia/commons/f/fc/12-ClairDeTerre-Cropped.jpg);
}
.catalog-item {
width: 200px;
height: 300px;
background: linear-gradient(rgba(4, 65, 85, 0.5), #12688580);
margin: 20px;
color: white;
box-shadow: 20px 10px 20px gray;
border-radius: 15px;
padding-bottom: 80px;
display: inline-block;
/*position: absolute; top:0;*/
}
img {
max-width: 140px;
max-height: 200px;
object-fit: cover;
padding-top: 50px;
}<div >
<!--<img src='img/computer.jpg'>-->
<div class='catalog-item'>
<div class='catalog-img'>
<img src='https://upload.wikimedia.org/wikipedia/commons/9/91/1634_stad_lichtenvoorde.jpg'>
</div>
</div>
<div class='catalog-item'>
<div class='catalog-img'>
<img src='https://upload.wikimedia.org/wikipedia/commons/9/91/1634_stad_lichtenvoorde.jpg'>
</div>
</div>
</div>