0

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.

HTML:

.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">
  <!--<h1 class="home-section-title"><span>PositiveTalkwithAJ</span></h1>-->
  <div class="home-section-image">
      <h2>Kay Park Memorials</h2>
  </div>
</section>
Nathan Bayne
  • 190
  • 12
  • I take it that you are referring to vertical centring, rather than horizontal? Can you give a clear image of what you want to achieve, perhaps use arrows to indicate where you want 'centring' to take place? – Paul Feb 03 '21 at 15:03
  • Yes It's the vertical centring that I need help with. I would like for the text to be in the centre of the image (horizontally and vertically). I'm able to horizontally centre it, however, I'm having issues centring it vertically. – Nathan Bayne Feb 03 '21 at 15:05

0 Answers0