# Text Over Image

**URL:** <https://forum.codewithmosh.com/t/text-over-image/25873>\
**Category:** HTML/CSS\
**Created:** [March 29, 2024, 7:00am UTC](https://forum.codewithmosh.com/t/text-over-image/25873 "2024-03-29T07:00:30Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![isabella](https://avatars.discourse-cdn.com/v4/letter/i/ecb155/32.png) [@isabella](https://forum.codewithmosh.com/u/isabella)\
**Post date:** [March 29, 2024, 7:00am UTC](https://forum.codewithmosh.com/t/text-over-image/25873/1 "2024-03-29T07:00:30Z")

</div>

Hi,

How can I make the background image shrink?

This is exactly what I am aiming for:

 ![goal](https://us1.discourse-cdn.com/flex020/uploads/codewithmosh/original/2X/c/cf1a05bd63d2fb668e39484d2b2eea88ac84a585.jpeg)

This is what I have so far:

 ![my work](https://us1.discourse-cdn.com/flex020/uploads/codewithmosh/original/2X/2/2a364044265b4ad2480e6f8c284d160d604c4740.jpeg)

CSS Code:

.background-image {  
width: 100%;  
}

Thanks in advance.

---

<div class="post-metadata">

**Author:** ![MTownsend](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.codewithmosh.com/mtownsend/32/6311_2.png) [@MTownsend](https://forum.codewithmosh.com/u/MTownsend)\
**Post date:** [April 2, 2024, 3:01am UTC](https://forum.codewithmosh.com/t/text-over-image/25873/2 "2024-04-02T03:01:37Z")

</div>

https://codepen.io/M-Townsend/embed/preview/gOyXBQN?default-tabs=css%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=gOyXBQN

Attached is an example of one way to set something like this up. You basically need to look into the background property(s). Have a read through this MDN page if you haven’t already. [MDN Background Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/background)