How to place my
texts
after the end of the background image, keeping leading
as is?

Question

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?

What do you mean by "after"? Like, after it in the DOM flow? Z-index? I went to your link but I don't immediately see anything wrong or broken. Do you want all of your text to be physically below/underneath your first header image? — Jake, Mar 04 '23 at 01:10
Post edited accordingly, and yes @Jake: `Do you want all of your text to be physically below/underneath your first header image? ` — Gilles Quénot, Mar 04 '23 at 01:14
You can do it by adding padding or margin at the bottom of the h1 tag. Check this code pen: https://codepen.io/gd17/pen/LYJyoeM .heading { margin-bottom: 18%; } I have added a custom class "heading" to h1 and added % based CSS padding. — dostogircse171, Mar 04 '23 at 01:21
@dostogircse171 Very nice, add it in answer, I will accept it — Gilles Quénot, Mar 04 '23 at 01:30
By adding background-repeat: no-repeat; I have updated the codepen you may check. But the problem is the image you used is smaller in size. The image can be extended using CSS with background-size:cover but this will stretch the image wider. Try image size 1920x1080 — dostogircse171, Mar 04 '23 at 01:31
I will accept the one that works on smartphone ;) And yes, I use now 'no repeat' — Gilles Quénot, Mar 04 '23 at 01:42

score 2 · Accepted Answer · answered Mar 04 '23 at 01:33

2

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.

answered Mar 04 '23 at 01:33

dostogircse171

1,006
3
13
21

score 1 · Answer 2 · answered Mar 04 '23 at 01:31

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!

score 1 · Answer 3 · answered Mar 04 '23 at 01:36

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>

score 1 · Answer 4 · answered Mar 04 '23 at 01:41

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>

How to place my texts after the end of the background image, keeping leading as is?

as is?

4 Answers4

How to place my
texts
after the end of the background image, keeping leading
as is?