Hello im trying to fit image for main tag perfectly in but i cant make it work. First, it wont resize properly, its put verticaly instead of horizontaly how it was supposed to be, changing dimensions in photoshop didnt help. Using height: 100% instead of padding-bottom: 100% is not working, same for width: 100%. Any ideas how it perfectly fit image as background for individual section on web site? Also how to get rid of space between blue background of navigation and background image of main tag?
Here’s my html:
<!doctype html>
<html lang="en">
<head>
<title>HTML Stranica</title>
<meta charset="utf-8">
<link rel=stylesheet type="text/css" href="style.css">
</head>
<body>
<div id="wrapper">
<nav>
<h1 id="logo"><a id="logostyle" href="#">ISMAR HTML SITE</a></h1>
<ul id="navigation">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<main>
<div id="content1">
<h2>THE ART OF FOOD</h2>
<h3>Photography</h3>
<button>View More</button>
</div>
</main>
</div>
</body>
</html>
CSS:
body {
font-family: sans-serif;
background-color: azure;
}
nav {
background-color: blue;
height: 50px;
}
nav h1#logo a {
text-decoration: none;
float: left;
margin-left: 50px;
}
nav h1#logo a#logostyle {
color: black;
font-weight: normal;
}
nav #navigation {
list-style: none;
}
nav #navigation a {
text-decoration: none;
float: right;
margin-right: 50px;
margin-top: 8px;
color: black;
}
nav #navigation a:hover {
color: gray;
}
main {
margin-right: 50px;
margin-left: 50px;
padding-bottom: 100%;
background-image: url("Images/food.jpg");
background-repeat: no-repeat;
background-size: cover;
}
Image of my website: