How to make a background image full height and centred relative

Question

I have a background image with some text on top.

As you can see the image is cut off at around 70px. I can change the height of the section or main to be 700px and display the full background image, but then the background doesn't become responsive to the page-width.

I want the full height of the background-image to be display, like this:

But then I also want the image to always be centered to the screen, therefore, responsive!

Does anyone have any suggestions what I should try?

body {
  margin: 0;
  padding: 0;
}

html {
  width: 100%;
  height: 100%;
}

h1 {
  font-family: "LiberationSansRegular";
  font-style: normal;
  font-weight: 600;
  font-size: 55px;
}

section {
  height: 100%;
  width: 100%;
  background-image: url(https://picsum.photos/seed/picsum/1200/800);
  background-repeat: no-repeat;
  background-size: cover;
  text-align: center;
}


/* parliament */

.img3 {
  height: 100%;
  width: 100%;
}

<main>
  <section>
    <h1>Hungarian Services at your fingertips</h1>
    <h2>
      Online lessons for kids and adults. Verbal and written training, best tailored to your needs. Translation services. All from a native speaker
    </h2>
  </section>
</main>

Centered isn't responsive. Do you mean you want the background image to be the heigh tof the viewport and cropped for width? Why aren't you putting the background on the body element? — isherwood, Mar 14 '23 at 15:46
I want the centre of the image to be at the centre of the screen regardless of the page width (responsive). The image isn't in the body because there's other stuff in the body, that isn't displayed in this code, I will have 2 pictures after each other and if they are both in the body as background image, they will overlap, I think — Declan Davies, Mar 14 '23 at 15:52

score 1 · Accepted Answer · edited Mar 15 '23 at 12:50

1

Give height: 100vh to section class. That should resolve the issue.

body {
  margin: 0;
  padding: 0;
}

html {
  width: 100%;
  height: 100%;
}

h1 {
  font-family: "LiberationSansRegular";
  font-style: normal;
  font-weight: 600;
  font-size: 55px;
}

section {
  height: 100vh;
  width: 100%;
  background-image: url(https://picsum.photos/seed/picsum/1200/800);
  background-repeat: no-repeat;
  background-size: cover;
  text-align: center;
}


/* parliament */

.img3 {
  height: 100%;
  width: 100%;
}

<main>
  <section>
    <h1>Hungarian Services at your fingertips</h1>
    <h2>
      Online lessons for kids and adults. Verbal and written training, best tailored to your needs. Translation services. All from a native speaker
    </h2>
  </section>
</main>

edited Mar 15 '23 at 12:50

isherwood

58,414
16
114
157

answered Mar 14 '23 at 15:49

venky royal

1,860
2
11
19

Adding vh, or vw is definitely the solution! Although for me ~30 vw seemed better fit. – Declan Davies Mar 14 '23 at 16:09
@DeclanDavies, you seem to be trying to get your section to be the same shape as the image. This is a fragile strategy and is in no way responsive. Your requirements are contradictory and confusing. – isherwood Mar 15 '23 at 12:51

score 0 · Answer 2 · answered Mar 14 '23 at 15:57

You seem to just need background-position set. (Text alignment doesn't affect background.)

Protip: Use intuitive names for your style classes. img3 doesn't tell readers of your markup anything about what it does. Instead, use something like .full-height and .full-width to apply those styles (individually), and to make your CSS reusable.

body {
  margin: 0;
  padding: 0;
}

html {
  width: 100%;
  height: 100%;
}

h1 {
  font-family: "LiberationSansRegular";
  font-style: normal;
  font-weight: 600;
  font-size: 55px;
}

section {
  height: 100%;
  width: 100%;
  background-image: url(https://picsum.photos/seed/picsum/1200/800);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  text-align: center;
}


/* parliament */

.img3 {
  height: 100%;
  width: 100%;
}

<main>
  <section>
    <h1>Hungarian Services at your fingertips</h1>
    <h2>
      Online lessons for kids and adults. Verbal and written training, best tailored to your needs. Translation services. All from a native speaker
    </h2>
  </section>
</main>

Wasn't aware of background position property, this is useful knowledge however it cut off the sides of the background image when the width is decreased. — Declan Davies, Mar 14 '23 at 16:10
With adding vh or vw to the height property it doesn't have this problem — Declan Davies, Mar 15 '23 at 09:08
That makes no sense. No image is the same aspect ratio as every screen. There's something about your scenario you haven't explained very well. — isherwood, Mar 15 '23 at 12:48

How to make a background image full height and centred relative

2 Answers2