How to replace an unsplash background in a template?

Beginners
1

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) !important;

2

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
IMG_0858631×1210 97.2 KB

You can find complete documentation here.
Hope that helps.

3

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

4

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;

5

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. :crossed_fingers:

1 Like