# Resize background image of a scroll-over

**URL:** <https://forum.pinegrow.com/t/resize-background-image-of-a-scroll-over/4702>\
**Category:** General\
**Created:** [November 19, 2020, 6:32pm UTC](https://forum.pinegrow.com/t/resize-background-image-of-a-scroll-over/4702 "2020-11-19T18:32:40Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![randyrie](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/randyrie/32/2103_2.png) [@randyrie](https://forum.pinegrow.com/u/randyrie)\
**Post date:** [November 19, 2020, 6:32pm UTC](https://forum.pinegrow.com/t/resize-background-image-of-a-scroll-over/4702/1 "2020-11-19T18:32:40Z")

</div>

I’ve created a scroll-over that changes the background image as you scroll up. Is there away to have the backround images resize to the media viewpot? Now my backgrounds size remain static (please see my site at [https://rjrwebz.com/untying/education.html](https://rjrwebz.com/untying/education.html)) and my CSS:

 ![Screen Shot 2020-11-19 at 12.30.38 PM](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/d/da2b594c1641929478c478e39876e46d87e21c84.png)

Is there someway to change the css so these background images will resize to fit the viewport?  
[Also - how do I copy/include my html or CSS code here?]

---

<div class="post-metadata">

**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\
**Post date:** [November 19, 2020, 7:44pm UTC](https://forum.pinegrow.com/t/resize-background-image-of-a-scroll-over/4702/2 "2020-11-19T19:44:17Z")

</div>

Hi @randyrie,  
Not sure exactly the look you are going for. Generally you can use ‘background-size’. That can be used to set a width based on the container like `background-size: 100vw;`  
As for adding code to the forum, just surround it by backticks (below the tilde on most keyboards).  
Hope this helps,  
Bob

---

<div class="post-metadata">

**Author:** ![randyrie](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/randyrie/32/2103_2.png) [@randyrie](https://forum.pinegrow.com/u/randyrie)\
**Post date:** [November 19, 2020, 10:34pm UTC](https://forum.pinegrow.com/t/resize-background-image-of-a-scroll-over/4702/3 "2020-11-19T22:34:53Z")

</div>

Thanks for your advice @RobM … I’ll add this to my CSS style sheet and see if it will resize.

---

<div class="post-metadata">

**Author:** ![randyrie](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/randyrie/32/2103_2.png) [@randyrie](https://forum.pinegrow.com/u/randyrie)\
**Post date:** [November 22, 2020, 11:38pm UTC](https://forum.pinegrow.com/t/resize-background-image-of-a-scroll-over/4702/4 "2020-11-22T23:38:15Z")

</div>

I added your suggestion and I am now getting the resizing I want. Thanks again @RobM