How to make a header with background image

Question

How to make a header with background image

Asked 5 years, 11 months ago

Viewed 3,505 times

2

I need to assemble a layout with the following structure.

Where the blue part will be an image.

<header class="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 the logo and the menu each one in a corner, but I don’t know how to put a background image in it, which ends at the beginning of the site content (image or over) and I don’t know how to position the P (BLA BLA BLA) in the middle, maybe using a margin: 0 auto but I don’t know if it’s the best way.

1

background-image: url(caminho_da_imagem);

– Sam

2018/12/18 at 22:08
Are you using some Bootstrap framework or are doing it all by hand?

– hugocsl

2018/12/18 at 22:16
@hugocsl All in hand, but I can use BS without problems

– Guilherme Rigotti

2018/12/18 at 22:17
@Sam Put the image I know, do not know how to do the way I said in the post

– Guilherme Rigotti

2018/12/18 at 22:17
Okay young rs... is that in the question you are quite blunt to say that you do not know how to put a background image. : D

– Sam

2018/12/18 at 22:20
I’ll make a template in hand, because for this you don’t need the BS, it’s also more fun at hand :D. But if your project is large sometimes a Framework can be interesting...

– hugocsl

2018/12/18 at 22:20
@Sam Truth, I expressed myself badly. What I really meant was to put the background image even :D with the elements on top of it

– Guilherme Rigotti

2018/12/18 at 22:23
1

@hugocsl Thanks friend, but if it looks better with a framework without problems too, I thought maybe the Bulma for the matter of being lighter, I find the BS too heavy.

– Guilherme Rigotti

2018/12/18 at 22:24

Show 3 more comments

1 answer

Browser other questions tagged css css3

You are not signed in. Login or sign up in order to post.

by hugocsl • **65,517** points · Answer 1 · 2018-12-18T23:25:31+00:00

Follow an example, I know that some properties are repeated and could be optimized, but prefer to leave individually to facilitate your understanding, even with a few extra lines of code. I basically used flex to do everything then became well responsive.

Follows 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>