My goal is to create a bakery website, hence the title and image, and the site will not be published to any servers. I would like to have an image at the top of my page beneath a navigation menu that keeps the same aspect ratios when I resize the window, but it would require there to not be a height specification, or the image will crop when I enlarge the window, as well as horizontally repeat. Here is the code I have so far:
window.onscroll = function() {myFunction()};
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
.header-img {
height: 370px;
width: 100%;
background-repeat: no-repeat;
background: url('https://static.dezeen.com/uploads/2019/12/flourist-bakery-ste-marie-vancouver-canada_dezeen_hero-b.jpg');
background-size: contain;
}
body {
background-color:white;
margin: 0;
padding: 0;
text-align:center;
}
.sticky + .content {
padding-top: 60px;
}
.content {
padding: 16px;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.menu {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #000000;
}
.li {
float: left ;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
.liname {
float: left;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 26px
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
body {
margin: 0;
text-align: center;
}
<link rel="icon" href="https://cakesreanimated.com/wp-content/uploads/2020/01/favicon-cakes-reanimated.png">
</br>
<div id="navbar">
<nav>
<ul class="menu">
<li class="liname">
<a>Bakes n' Cakes</a>
</li>
<li class="li">
<a href ="bakerysite.html">Home</a>
</li>
<li class="li">
<a href ="about.html">About</a>
</li>
<li class="li">
<a href ="prices.html">Prices</a>
</li>
<li class="li">
<a href ="contact.html">Contact</a>
</li>
</ul>
</nav>
</div>
<main>
<div class="header-img" id=#header></div>
</main>
</br>
You need to set the background-size to cover in your css like shown below.
You can change the position of the image with the background-position property.
Further information:
https://www.w3schools.com/cssref/css3_pr_background-size.asp https://www.w3schools.com/cssref/pr_background-position.asp
window.onscroll = function() {myFunction()};
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
.header-img {
height: 370px;
width: 100%;
background-repeat: no-repeat;
background: url('https://static.dezeen.com/uploads/2019/12/flourist-bakery-ste-marie-vancouver-canada_dezeen_hero-b.jpg');
background-size: cover;
}
body {
background-color:white;
margin: 0;
padding: 0;
text-align:center;
}
.sticky + .content {
padding-top: 60px;
}
.content {
padding: 16px;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.menu {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #000000;
}
.li {
float: left ;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
.liname {
float: left;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 26px
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
body {
margin: 0;
text-align: center;
}
<link rel="icon" href="https://cakesreanimated.com/wp-content/uploads/2020/01/favicon-cakes-reanimated.png">
</br>
<div id="navbar">
<nav>
<ul class="menu">
<li class="liname">
<a>Bakes n' Cakes</a>
</li>
<li class="li">
<a href ="bakerysite.html">Home</a>
</li>
<li class="li">
<a href ="about.html">About</a>
</li>
<li class="li">
<a href ="prices.html">Prices</a>
</li>
<li class="li">
<a href ="contact.html">Contact</a>
</li>
</ul>
</nav>
</div>
<main>
<div class="header-img" id=#header></div>
</main>
</br>
To maintain aspect ratio while width:100%, use a regular image inside your .header-img div and fix the css like this:
.header-img {
width: 100%;
}
.header-img img {
width:100%;
height:auto;
}
Sorry if I missunderstood.