Trying to center a logo in a full page background image but nav bar is pushing it down
I’m a bit of a newbie so this might be something fairly straight forward. I’m trying to position a logo in the center of a full background image landing page. However my nav bar keeps pushing the logo down.
I believe this is because both elements are within the same container. However, I’ve tried moving the nav out of the container but it then pushes my background image down. I’ve tried playing around with position but this then messes up my flex properties for the logo and the nav icons.
Any advice/tips and a brief explanation would be very helpful, thanks.
Here is my code below
Also a codepen: https://codepen.io/LeccaUK/pen/GRodYMO
* { margin: 0; padding: 0; } .icon { width: 50px; } .logo { width: 250px; } .hero-container { background-image: url(https://images.wallpaperscraft.com/image/road_highway_asphalt_146464_1920x1080.jpg); background-position: center center; background-size: cover; height: 100vh; } nav { padding: 30px; display: flex; justify-content: space-between; } .hero-content { height: 100vh; display: flex; justify-content: center; align-items: center; }<div class="hero-container"> <nav> <img src="https://image.flaticon.com/icons/svg/846/846551.svg" class="icon"> <img src="https://image.flaticon.com/icons/svg/2099/2099153.svg" class="icon"> </nav> <div class="hero-content"> <img src="https://image.flaticon.com/icons/svg/3121/3121628.svg" class="logo"> </div> </div>
Simply insert two div with a css backround img. And thats it.
* { margin: 0; padding: 0; } .icon { width: 50px; } .logo { width: 250px; } .hero-container { background-image: url(https://images.wallpaperscraft.com/image/road_highway_asphalt_146464_1920x1080.jpg); background-size: cover; background-position: center center; height: 100vh; } nav { padding: 30px; display: flex; justify-content: space-between; } .hero-content { background-image: url(https://image.flaticon.com/icons/svg/3121/3121628.svg); height: 100vh; background-repeat: no-repeat; background-position: center center; background-size: 250px; } <div class="hero-container"> <div class="hero-content"> <nav> <img src="https://image.flaticon.com/icons/svg/846/846551.svg" class="icon"> <img src="https://image.flaticon.com/icons/svg/2099/2099153.svg" class="icon"> </nav> </div> </div>
