Search code examples
htmlcssbackground-image

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

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?

Solution

  • 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.