Photoshop Question posted in
The official user guide can be found here.

Place text behind background image – Photoshop

Right now I am having trouble placing a paragraph behind a background image. I have tried using z-index and position relative, but have not found any success. How could I do this?

.pageone {
  background-image: url(headerhalf.png);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  width: 100vw;
  height: 100vh;
}

#aboutme {
  text-align: center;
  font-size: 5vw;
  margin-top: 6vh;
    color: #81af66;
  text-shadow: 2px 2px 3px rgba(129, 131, 131, 0.25);
}

.pagecontainer {
  width: 50vw;
  height: 100vh;
  display: flex;
  justify-content: center;

}

#aboutcopy {
  font-size: 1.25vw;
  margin: 1.5em;
}
<div class="pageone">
  <div class="pagecontainer">
    <div class="aboutreal">
      <p id="aboutme">About Me</p>
      <p id="aboutcopy">I run a YouTube channel on which I benchmark the performance of computer hardware. I've been uploading content to YouTube for upwards of one year, and have amassed over 80 thousand views in that time period. While I'm not managing my channel I design graphics for others and myself. I design product advertisements, avatars and banners for YouTube, websites, logos, and more. I am comfortable with a wide variety of softwares such as: Adobe Photoshop, Adobe After Effects, Adobe Premiere Pro and, Unreal Engine 4. I am also learning HTML and CSS.</p>
    </div>
  </div>
</div>

Here is a link to the site: site

Thanks!

Tags:

2

Answers


  1. 0

    Try the CSS :after selector:

    .pageone {
  background-image: url(headerhalf.png);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  width: 100vw;
  height: 100vh;
  position:relative;   
}

.pageone:after {
  content:"Your text here";
  position: absolute;
  top:20px;
  right:20px;
}
    Login or Signup to reply.
  2. 0

    The problem is that your trying put an element behind its parent element, which is not possible in the regular page flow. One option is create another <div> at the same level of the about element and put the image there:

    .pageone {
  /* moved to #headerhalf */
  /*background-image: url(headerhalf.png);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;*/
  width: 100vw;
  height: 100vh;
  position: relative; /*needed because of absolute positioning of #headerhalf */
}

#headerhalf {
  /*background-image: url(headerhalf.png);*/
  /* simulating semi-transparent PNG for the sample snippet*/
  opacity: 0.9;
  background-color: ForestGreen;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  width: 100%;
  height: 100%;
  position: absolute; /*removed element from normal flow to make it full size*/
  z-index: 1;
}

.pagecontainer {
  width: 50vw;
  height: 100vh;
  display: flex;
  justify-content: center;
}

#aboutme {
  text-align: center;
  font-size: 5vw;
  margin-top: 6vh;
    color: #81af66;
  text-shadow: 2px 2px 3px rgba(129, 131, 131, 0.25);
}

#aboutcopy {
  font-size: 1.25vw;
  margin: 1.5em;
}
    <div class="pageone">
  <div class="pagecontainer">
    <div id="headerhalf"></div>
    <div class="aboutreal">
      <p id="aboutme">About Me</p>
      <p id="aboutcopy">I run a YouTube channel on which I benchmark the performance of computer hardware. I've been uploading content to YouTube for upwards of one year, and have amassed over 80 thousand views in that time period. While I'm not managing my channel I design graphics for others and myself. I design product advertisements, avatars and banners for YouTube, websites, logos, and more. I am comfortable with a wide variety of softwares such as: Adobe Photoshop, Adobe After Effects, Adobe Premiere Pro and, Unreal Engine 4. I am also learning HTML and CSS.</p>
    </div>
  </div>
</div>

    I think that it could be possible achieve this without using absolute positioning, but this method is quite straightforward.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search