Question 263471 in Html Question posted in
Some basic documentation can be found here.

Html – How do I get an image to appear behind the header?

I am currently working in HTML and CSS. I need to make an image the background of the header.

#banner {
  padding: 60px;
  text-align: center;
  background-image: url("https://via.placeholder.com/800x300");
  background-color: #1abc9c;
  color: white;
  font-size: 30px;
}
<div id="banner">
  <h1>AlexArgent</h1>
  <p>My Personal Homepage</p>
</div>
Tags:

2

Answers


  1. 0

    The background shorthand property overrides the background-image property. Use background-color instead of the former, or include the color value in it.

    See https://developer.mozilla.org/en-US/docs/Web/CSS/background.

    #banner {
  padding: 60px;
  text-align: center;
  background: #1abc9c url("https://via.placeholder.com/300x100");
  /* or this:
  background-image: url("https://via.placeholder.com/300x100");
  background-color: #1abc9c;
  */
  background-repeat: no-repeat; /* for demo only */
  color: white;
  font-size: 30px;
}
    <div id="banner">
  <h1>AlexArgent</h1>
  <p>My Personal Homepage</p>
</div>
    Login or Signup to reply.
  2. 0 
    .header {
  padding: 60px;
  text-align: center;
  color: white;
  font-size: 30px;
  
  background-color: #1abc9c;
  background-image: url("https://via.placeholder.com/300x100");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
    <div class="header">
  <h1>AlexArgent</h1>
  <p>My Personal Homepage</p>
</div>

    i would suggest to use "header" some where in code example so those who answer can understand where exactly you want to use picture as background, also highly reccomended not use id as a selector, this is bad practice you can find out yourself why, also just as @isherwod i suggest drop using background property, use for each property it is own – background-color, background-img etc. Use such properties as background-position and background-size – they will help you to adjust your picture. the code from @isherwood works – you might missing something in your project

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search