# How to replace an unsplash background in a template?

**URL:** <https://forum.pinegrow.com/t/how-to-replace-an-unsplash-background-in-a-template/10376>\
**Category:** Beginners\
**Tags:** css\
**Created:** [February 18, 2025, 11:32pm UTC](https://forum.pinegrow.com/t/how-to-replace-an-unsplash-background-in-a-template/10376 "2025-02-18T23:32:26Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![apples](https://avatars.discourse-cdn.com/v4/letter/a/71c47a/32.png) [@apples](https://forum.pinegrow.com/u/apples)\
**Post date:** [February 18, 2025, 11:32pm UTC](https://forum.pinegrow.com/t/how-to-replace-an-unsplash-background-in-a-template/10376/1 "2025-02-18T23:32:26Z")

</div>

I’d like to edit the image, and downloaded it, but seems unable to replace the following with what I thought would work. I consider that my simplistic attempts won’t mesh with the Bootstrap framework?  
How can I replace the following with a simple image call to a local folder? I’ve tried, but must be missing something.  
I’ve been working for a couple weeks with Pinegrow, and fully commend the dev team and leadership. Makes webdev fun.

background-image: url([https://images.unsplash.com/photo-1549948558-1c6406684186?ixid=MnwyMDkyMnwwfDF8c2VhcmNofDM5NXx8d2FsbHBhcGVyfGVufDB8fHx8MTYyNDMwMDQ1Nw&ixlib=rb-1.2.1q=85&fm=jpg&crop=faces&cs=srgb&w=1200&fit=max](https://images.unsplash.com/photo-1549948558-1c6406684186?ixid=MnwyMDkyMnwwfDF8c2VhcmNofDM5NXx8d2FsbHBhcGVyfGVufDB8fHx8MTYyNDMwMDQ1Nw&ixlib=rb-1.2.1q=85&fm=jpg&crop=faces&cs=srgb&w=1200&fit=max)) !important;

---

<div class="post-metadata">

**Author:** ![Blep](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/blep/32/6497_2.png) [@Blep](https://forum.pinegrow.com/u/Blep)\
**Post date:** [February 19, 2025, 6:40am UTC](https://forum.pinegrow.com/t/how-to-replace-an-unsplash-background-in-a-template/10376/2 "2025-02-19T06:40:29Z")

</div>

Hi @apples  
Select the element with the background you want to change. Go to properties panel and scroll down to find background area, then click on the folder icon and select a method to import an image :

 ![IMG_0858](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/c/cc82f52604b46c7065c1644501b0d6abfe08c67a.jpeg)

You can find complete documentation [here](https://docs.pinegrow.com/docs/).  
Hope that helps.

---

<div class="post-metadata">

**Author:** ![mxs](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/mxs/32/2943_2.png) [@mxs](https://forum.pinegrow.com/u/mxs)\
**Post date:** [February 20, 2025, 12:56pm UTC](https://forum.pinegrow.com/t/how-to-replace-an-unsplash-background-in-a-template/10376/3 "2025-02-20T12:56:07Z")

</div>

Create an image folder (if you don’t already have one) and place the edited image in that folder.  
Change the CSS to

> [@apples](#):
>
> background-image: url(images/your- edited-file.jpg) !important;

---

<div class="post-metadata">

**Author:** ![apples](https://avatars.discourse-cdn.com/v4/letter/a/71c47a/32.png) [@apples](https://forum.pinegrow.com/u/apples)\
**Post date:** [February 21, 2025, 3:35am UTC](https://forum.pinegrow.com/t/how-to-replace-an-unsplash-background-in-a-template/10376/4 "2025-02-21T03:35:37Z")

</div>

It works! Thanks to you both.

Next hiccup - the scaling of the background is different from the unsplash version.

The css attributes below no longer seem to function. The background actually repeats and does not resize with the frame.

background-size : cover;  
background-position: center center;  
background-repeat: no-repeat;  
position: absolute;  
content: " ";  
z-index: -1;

---

<div class="post-metadata">

**Author:** ![Blep](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/blep/32/6497_2.png) [@Blep](https://forum.pinegrow.com/u/Blep)\
**Post date:** [February 21, 2025, 6:09am UTC](https://forum.pinegrow.com/t/how-to-replace-an-unsplash-background-in-a-template/10376/5 "2025-02-21T06:09:39Z")

</div>

It looks like the issue with your background image not resizing properly might be due to the container not having a defined height or some conflicting styles. To fix this, make sure the container (like body or a div) has a height set, for example, height: 100vh; so it takes up the full screen. Then, use background-size: cover; background-position: center center; and background-repeat: no-repeat; to ensure the image covers the area without repeating.  
If it still doesn’t work, check if other CSS rules are overriding these settings. Also, remember that the order of CSS rules matters, as some can override others. For example, if you use background shorthand before background-size, it might reset background-size, so always place specific rules like background-size after shorthand ones. Make sure your image is optimized and has no extra spaces around it. 🤞