Text won't centre vertically within scroll effect background-image

Question

I'm struggling to have text vertically centred within a background image which has a scroll effect.

I have Top: 34%; at the moment to centre the text on my screen however, that is 34% from the top of the navigation menu. Is there a way for me to set it to 50% from the image that is showing? I'm fine with centring text on a normal image with no scroll effect, however, I feel having background-image (css) with scroll effect rather than a normal img tag on the html page is effecting the result.

This is how I would like it to look like but done with proper margins that make it stay centred. Left: 50%; Top: 34%; That is the margins set in the following image:

.home-section-image {
  /* The image used */
  background-image: linear-gradient(
    rgba(8, 8, 8, 0.05), 
    rgba(8, 8, 8, 0.25)
  ),url("../images/pexels-photo-258109.jpg");
  opacity: .80;
  border-top: 1px solid #000;
  
  /* Set a specific height */
  min-height: 505px; 
  max-height: 505px;
  margin: auto;
  
  /* Create the image scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.home-section-image h2 {
  position: absolute;
  top: 34%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  -webkit-text-stroke: black 2px;
  text-align: center; 
  font-size: 5vw;
} /* Edits text overlaying image positioning, colour of text and adds stroke */

<section id="home" class="home-section">
  <div class="home-section-image">
      <h2>Kay Park Memorials</h2>
  </div>
</section>

score 0 · Answer 1 · answered Feb 03 '21 at 16:58

0

You can use in home-section-image

display: flex;
align-items: center;

reference : here

answered Feb 03 '21 at 16:58

Talha Can

95
1
2
8

That doesn't entirely centre it for me but it prevents it from moving outwith the div which is good. I've removed the top:34%; and replaced it with margin-top:7.5%; which roughly centres it's position within the div. Is there a way to avoid me having to use the margin-top? Thanks. – Nathan Bayne Feb 03 '21 at 17:09
You should remove `top: 34%; ` from your home-section-image – Talha Can Feb 03 '21 at 17:16

Gunal Bondre · Answer 2 · 2021-02-03T17:28:36.520

0

When the background is fixed top is calculated from top of navbar.

what you can do is the give padding of 50-60px check in chrome devtool first to main div containing image

then give the text position relative

.home-section-image{
  padding-top : 60px (you need to check first in devtools in my case its 60px)
}

.home-section-image h2
{
     position:relative;
     top:50%;
     left:50%;
     transform:translate(-50%,-50%)
  }

alternate approach

.home-section-image h2
{
     padding-top:60px;
     position:relative;
     top:50%;
     left:50%;
     transform:translate(-50%,-50%)
  }

edited Feb 03 '21 at 17:28

answered Feb 03 '21 at 17:06

Gunal Bondre

94
2
12

This is also a good way of slightly adjusting the positioning of the text, however, It adds more height to the image which I intend not to do. The image must remain at the height of 505px. Thanks for your suggestion. – Nathan Bayne Feb 03 '21 at 17:21
then do little tweak and give little top padding to text itself. and use rest of the logic – Gunal Bondre Feb 03 '21 at 17:25

Text won't centre vertically within scroll effect background-image

2 Answers2