[ANSWERED] html – Header Background Image Won’t Show

Question 1

Please see the below code

header{
    height: 600px;
    width: 100%;
    background: url("https://image.shutterstock.com/image-photo/summer-beach-holiday-online-shopping-260nw-461355724.jpg") no-repeat;
    background-size: cover;
}
.header-bar{
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.logo{
    width: 10em;
}
nav{
    vertical-align: middle;
}
nav ul{
    list-style: none;
}
nav ul li{
    display: inline;
}
nav ul li a{
    font-size: 1.2em;
    color: #80797F;
    padding: 1em;
    text-decoration: none;
}
nav ul li a:hover{
    color: #5CC6FF;
}

<header>
    <div class="header-bar">
    <div class='logo'><a href='index.html'><img src="img/logo.svg" alt="Logo"></div>
    <nav>
      <ul>
        <li><a href='#Services'>Services</a></li>
        <li><a href='#Portfolio'>Portfolio</a></li>
        <li><a href='#About'>About</a></li>
        <li><a href='#Team'>Team</a></li>
        <li><a href='#Contact'>Contact</a></li>
      </ul>
    </nav>
  </div>
    <div class='header-text'>
      <h3>Welcome to our studio</h3>
      <h1>It's Nice To Meet You</h1>
      <button>Tell Me More</button>
    </div>
  </header>

Please Update below css and header Background Image Show

header{
height: 600px;
width: 100%;
background: url(images/headerbg.jpg) no-repeat;
background-size: cover;

}

Question 2

I think the html code is seems wrong.. Please close the anchor tag..

<div class='logo'><a href='index.html'><img src="img/logo.svg" alt="Logo"></a></div>

Question 3

Try this:

header{
    height: 600px;
    width: 100%;
    background: url("img/headerbg.jpg") no-repeat;
    background-size: cover;
}

Error in HTML

<div class='logo'><a href='index.html'><img src="img/logo.svg" alt="Logo"></a></div>

Question 4

I have a header with a background url however it won’t show. Code is below.

The desired result is to have the header have a background image with the logo and nav displayed on top of it. So the text is written over the background image.

header {
  height: 600px;
  width: 100%;
  background: url("img/headerbg.jpg") cover no-repeat;
}

.header-bar {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.logo {
  width: 10em;
}

nav {
  vertical-align: middle;
}

nav ul {
  list-style: none;
}

nav ul li {
  display: inline;
}

nav ul li a {
  font-size: 1.2em;
  color: #80797F;
  padding: 1em;
  text-decoration: none;
}

nav ul li a:hover {
  color: #5CC6FF;
}

<header>
  <div class="header-bar">
    <div class='logo'>
      <a href='index.html'><img src="img/logo.svg" alt="Logo"></div>
    <nav>
      <ul>
        <li><a href='#Services'>Services</a></li>
        <li><a href='#Portfolio'>Portfolio</a></li>
        <li><a href='#About'>About</a></li>
        <li><a href='#Team'>Team</a></li>
        <li><a href='#Contact'>Contact</a></li>
      </ul>
    </nav>
  </div>
  <div class='header-text'>
    <h3>Welcome to our studio</h3>
    <h1>It's Nice To Meet You</h1>
    <button>Tell Me More</button>
  </div>
</header>

Bollate

[ANSWERED] html – Header Background Image Won’t Show

By

Solution 1 :

Solution 2 :

Solution 3 :

Problem :

Comments

Comment posted by Paulie_D

Comment posted by Rafael Tavares

Comment posted by Mac Hooper

Comment posted by Alexandr

Comment posted by Alexandr

By

Related Post

[ANSWERED] java – How to send dropdown value to servlet NOT the option text

[ANSWERED] html – How to include a clickable image behind a link

[ANSWERED] html – Move list item to the left in header/navigation menu

You missed

[ANSWERED] javascript – Text box to display updated text and save on button click

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Bollate