# Overlay text on image

**URL:** <https://forum.freecodecamp.org/t/overlay-text-on-image/122943>\
**Category:** General\
**Created:** [June 3, 2017, 4:25am UTC](https://forum.freecodecamp.org/t/overlay-text-on-image/122943 "2017-06-03T04:25:51Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![perezvenegas](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/perezvenegas/32/49751_2.png) [@perezvenegas](https://forum.freecodecamp.org/u/perezvenegas)\
**Post date:** [June 3, 2017, 4:25am UTC](https://forum.freecodecamp.org/t/overlay-text-on-image/122943/1 "2017-06-03T04:25:51Z")

</div>

I want to input text over and image I am using as a header for a webpage. the image is inside a div. should I leave either as is if so how do I put text over it. or should I use image as background and do it that way. my intention is to parallax all content under the image header when I scroll down the home page.

---

<div class="post-metadata">

**Author:** ![owel](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/owel/32/48425_2.png) [@owel](https://forum.freecodecamp.org/u/owel)\
**Post date:** [June 3, 2017, 7:17am UTC](https://forum.freecodecamp.org/t/overlay-text-on-image/122943/2 "2017-06-03T07:17:27Z")

</div>

Since nobody has replied yet, see this pen demo I made.

> **[parallax demo](https://codepen.io/owel/full/awbWZg/)**
>
> ...

Notes: using MaterializeCSS for parallax, using CSS for overlay.  
Scroll rate for image, and text overlay (and page text) are different.

---

<div class="post-metadata">

**Author:** ![perezvenegas](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/perezvenegas/32/49751_2.png) [@perezvenegas](https://forum.freecodecamp.org/u/perezvenegas)\
**Post date:** [June 3, 2017, 7:19am UTC](https://forum.freecodecamp.org/t/overlay-text-on-image/122943/3 "2017-06-03T07:19:16Z")

</div>

thank you , I am attempting to do something very similar to this

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [January 16, 2021, 6:00pm UTC](https://forum.freecodecamp.org/t/overlay-text-on-image/122943/4 "2021-01-16T18:00:39Z")

</div>


