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

How to place my <p>texts</p> after the end of the background image, keeping leading <h1> as is? – Html

The url is https://sputnick.fr/

The HTML is:

body {
  background-color: #15141A;
  background-image: url("https://sputnick.fr/header.jpg");
  color: white;
  font-family: "Arial";
  font-size: 16px;
}
<h1>foobar</h1>
<p>lorem ipsum doloris</p>
<p>lorem ipsum doloris</p>
<p>lorem ipsum doloris</p>
<p>lorem ipsum doloris</p>

I searched MDN and other ressources, but I don’t get how to do this.

I want all <p>xxxx</p> after the background image.

Is it possible?

Tags:

4

Answers


  1. 0

    It’s not clear whether or not you want the repeating background images, but the foolproof way to say "I want X after Y" is to make them different, consecutive elements in the DOM order. Something like

    header{
  background-image: url("https://sputnick.fr/header.jpg");
  height: 200px;
  width: 100%;
}

h1{
  color: white;
}
    <header>
  <h1>
    Site Title
  </h1>
</header>
<main>
  <p>
    Some content
  </p>
  <p>
    Some more content
  </p>
</main>

    If you DO want the background-image to repeat throughout your entire webpage, you have lots of options, but I would probably do something like this

    .wrapper{
  background-image: url("https://sputnick.fr/header.jpg");
  height: 800px;
  width: 100%;
  color: white;
}

.content{
  margin-top: 650px;
}
    <div class="wrapper">
  <h1>
    Site Title
  </h1>
  <div class="content">
    <p>
    Some text
    </p>
  </div>
</div>

    This does rely on a hard-coded margin-top that matches the height of your background-image – if this height ever changes, then this code will break. If that is a likely scenario, then you could also consider doing kind of a tandem of both approaches

    body{
  background-image: url("https://sputnick.fr/header.jpg");
  color: white;
}
h1{
  position: absolute;
  top: 0;
}
    <body>
  <header>
  
    <img src="https://sputnick.fr/header.jpg">
    <h1>
      Site Title
    </h1>
</header>
  <main>
      <p>
      Some content
    </p>
    <p>
      Some more content
    </p>
  </main>
</body>

    This has the disadvantage of relying on position: absolute, but will behave better if you ever change your background image’s dimensions.

    Hopefully this gives you some ideas to work with!

    Login or Signup to reply.
  2. 0

    You can do it by adding padding or margin at the bottom of the h1 tag.

    Check this code pen: codepen.io/gd17/pen/LYJyoeM

    .heading { margin-bottom: 18%; }

    I have added a custom class "heading" to h1 and added % based CSS padding.

    Login or Signup to reply.
  3. 0

    You have set a background image on the <body> element which means the whole page. If you want to have content appear after an image, apply the background image to an element like <main> instead.

    main {
  background-color: #15141A;
  background-image: url("https://sputnick.fr/header.jpg");
  color: white;
  font-family: "Arial";
  font-size: 16px;
  background-size: cover;
  height: 200px;
}
    <header></header>
<main>
<h1>foobar</h1>
</main>
<aside>
<p>lorem ipsum doloris</p>
<p>lorem ipsum doloris</p>
<p>lorem ipsum doloris</p>
<p>lorem ipsum doloris</p>
</aside>
    Login or Signup to reply.
  4. 0

    I suppose you want that background-image only behind the h1 header? Well, then assign it only to the h1. Add padding to make it higher and set margin-top to 0 to make it start right at the top.

    body {
  background-color: #15141A;
  color: white;
  font-family: "Arial";
  font-size: 16px;
}
h1 {
  background-image: url("https://sputnick.fr/header.jpg");
  margin: 0;
  padding: 1em 0;
}
    <h1>foobar</h1>
<p>lorem ipsum doloris</p>
<p>lorem ipsum doloris</p>
<p>lorem ipsum doloris</p>
<p>lorem ipsum doloris</p>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search