I've got this awesome parallax image on my website (the majestic nature one) Here's how the page looks normally
But sadly, it's not properly sized. When I check in Chrome dev tools, it appears like the image below, which is how I want it to be. This is how I want the image to look (the nature image)
So what I'm aiming for: I want the nature image, as seen in the first picture, to be displayed just like in the second picture (with dev tools). I know the image isn't sized right for the box. However, I'm struggling to fix it and can't seem to find a solution online.
Can someone assist me with this issue? If my question isn't clear enough, please let me know what I should add!
Here is the CSS code linked to the image-parallax:
.header{
background-image: url("nav-bg.png"); //The background image
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
.parallax-2 {
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
The HTML code:
<div class="header parallax-2">
<div class="logo fade-in-3"><img src="logo.png" alt="BeldrProductions" width="500"></div>
<!-- The nav-items go here. but I left them out to save space-->
</div>
Looking forward to your response! Beldr
Note: Suggestions from the responses below:
- background-size: contain no-repeat; (doesn't work)
- object-fit: contain and object-fit: cover (also doesn't work)
- width&height 100% (no success)
Check out my code on JSfiddle: https://jsfiddle.net/BeldrProductions/k5f70dy9/