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

How to make a background image full height and centred relative – Html

I have a background image with some text on top.

background-image with text

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:
Ideal Background Size

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>
Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search