Adding a background image to my guide
If you were ever curious about how to add an image to your guides (for some extra flare) here's a quick 1-minute video on we add background images to some of our internal guides.
Below is the code that was used in the example, just keep in mind that this is simply an example of custom CSS we have used and that you will ultimately need to personalize it to your needs.
#pendo-guide-container {
border-left: 5px solid #A973F2 !important;
background-image: url("https://pendo-static-5668600916475904.storage.googleapis.com/NpHgADVgBO9SbYUeWFkiSSOzOZs/guide-media-821e8745-9ae2-49a3-a79f-6b5ede03ca3f") !important;
background-repeat: no-repeat !important;
}
4
Comments
Absolutely, wonderful. Thanks a lot, this was very helpful. I dont know how to work with CSS, can you please drop a few more of these gems here with some good background images, it would be really beneficial for all.
Jatin Khanna glad this is helpful! If you want to edit this, you'll just need to replace the background url I have in my example with another hosted image.
background-image: url("replace with your URL") !important;This was incredibly helpful.
Hi guys! This is awesome. However, when I active the guide, the imagem background don't appear. By any chance, anyone had the same problem?
I have the same issue. as Jessica.
I have the same problem. Uploaded image doesn't display
For those having issues with display...are you hosting the image on your own server or Pendo's? If your own maybe you are running into some kind of firewall issue? Something you could try is to create a "dummy" guide with an image block and upload your background there. Then grab the Pendo-hosted URL for the image that it creates and use that in your custom code. Of course syntax is essential with getting that custom code to work. Have you tried copying and pasting the actual sample code from above to see if you can get that to work? That image URL is still viable.
I am uploading an image to the "announcing a new feature" template guide. To do this, I delete the url for the default image, delete the default image, replace it by uploading a small JPG (<1 MB), and save changes.
The new image does not show in preview. It does show in the "edit imaging block" and in Pendo, under the guide settings.
Please sign in to leave a comment.