How to make a header with a background image

Question

How to make a header with a background image

Navigation

#1 by (3 votes)

2

I need to build a layout with the following structure.

Wherethebluepartisgoingtobeanimage.

<headerclass="header-bg">
<div class="logo">
  <span>Logo</span>
</div>

<nav class="menu">
  <ul>
    <li><a href="#sobre">Sobre</a></li>
    <li><a href="#produtos">Produtos</a></li>
    <li><a href="#contato">Contato</a></li>
  </ul>
</nav>
<p> BLA BLA BLA </p>

The menu part I think I can use flexbox , and put a space-between to leave logo and menu each in a corner, however do not know how to put a background image on it, (in the image above) and I do not know how to position P (BLA BLA BLA) in the middle, maybe using margin: 0 auto but I do not know if it is the best way.

css css3

asked by anonymous 18.12.2018 / 23:07

1 answer

Sending notification to external application ERP Doubt of how to capture the animation of the character in the Unity

score 3 · Accepted Answer

Here's an example, I know that some properties are repeated and could be optimized, but I prefer to leave them individually to make them easier to understand, even if I get a few more lines of code. Basically I used flex to do everything so I was pretty responsive.

Follow the code:

html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}
header {
	width: 100%;
	height: 40%;
	min-height: 250px;
	background-image: url(https://unsplash.it/300/200);
	background-size: cover;
    background-position: center;
	display: flex;
	flex-direction: column;
	position: relative;
}	
nav  {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: rgba(255,0,0,0.5);
}
nav ul {
	padding: 0;
	display: flex;
	align-items: center;
	color: #fff;
}
nav ul li {
	list-style: none;
}
header section {
	display: flex;
	align-items: center;
	justify-content: center;
	height: calc(100% - 50px);
}
header section h2 {
	text-align: center;
	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
	color: #fff;
    text-shadow: 0 0 5px rgba(0,0,0,0.5);
}
h1 {
	text-align: center;
	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

<header>
	<nav>
		<img src="https://placecage.com/100/50"alt="">
		<ul>
			<li>item 1</li>
			<li>item 2</li>
			<li>item 3</li>
		</ul>
	</nav>
	<section>
		<h2>Lorem ipsum dolor sit amet.</h2>
	</section>
</header>
<main>
	<h1>Lorem ipsum dolor sit.</h1>
</main>