I want to create a div that behaves as a background using an external image not hosted in Webflow using the URL of that image.
I have tried the HTML embed element, adding a custom CSS style in the custom code area but not being a coder doesn’t help much.
Does anyone can pointing me in the right direction?
Hello @aaronocampo
Here’s a simple way to add a background image that is hosted somewhere else:
<img src="https://yt3.ggpht.com/-v0soe-ievYE/AAAAAAAAAAI/AAAAAAAAAAA/OixOH_h84Po/s900-c-k-no-mo-rj-c0xffffff/photo.jpg" alt="HTML5 Icon">
<style>
img {
position: fixed;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -5;
background-size: cover;
transition: 1s opacity;
}
.stopfade {
opacity: .5;
}
</style>
Here an example preview link: Webflow Preview Link
Here is a link to more info on HTML Images
Let me know if that helps 
Thank you for the quick response @Scott_Van_Zandt
It helps a lot, because I’m starting to understand more about html embed and a little bit of code.
The only thing is that I don’t quite get the result that I want.
Let me explain to give you a better understanding of what I want to achieve…
I have a CMS collection that is populated via a form on protected page, the idea is that the people that has the password for that protected page send their blog posts to the blog post CMS collection. As part of the form submission I added the uploadcare widget so the members can upload their image of those blog posts.
When they fill the form and Zapier makes their magic I get a CMS item with the information they sent and in that information comes a link to the image the uploaded to uploadcare.
In the blog post template page I have a div containing the image and I want to use the link for the image that they sent through uploadcare.
Here is my preview link:
https://preview.webflow.com/preview/womensinspire?preview=cff16f2afd5e109cbdc6a512f1aeabfa
I tried to embed the code that you sent but it messes with my logo in the Nav Bar.
Thank you again for your help.
Thanks for the extra info Now I get it.
So you’re going to want to add a DYNAMIC EMBED instead of just embedding static code.
To do this, drag a Embedded block into the Div on your Blog Post Template Page.
Highlight the LINK URL you put inside the embedded block. Click +field in the upper right-hand corner of the embedded block, it should be a purple hyperlink.
Select a dynamic element that you would want to replace that URL with. I am guessing your Uploadcare link is the item labeled “Image Link”
Now that you’ve got your Upload Care Image URL injecting into the Div, you’ll just need to style the image.
Let me know if that works, or if you need anything else
So simple! Thanks!
For some reason I thought that I tried that but now that I did it again it works just for one thing.
The image takes the dimensions from itself. I tried giving the embed element a class and using a fixed height but its not working, plus I need the image to fill the div as a cover background not fixed. I know that is a matter of playing with the code you just gave me before but every time a add that code for some reason put the main logo image in top of everything.
I think I got it man!!! You rock 
I tried giving the embed element a class and using a fixed height but its not working, plus I need the image to fill the div as a cover background not fixed. I know that is a matter of playing with the code you just gave me before but every time a add that code for some reason put the main logo image in top of everything.
To style the Image inside of your embed element your going to want to use custom code, not by visually editing the styles of the embedded block
Here is another way to do it as well:
Instead of placing an Image inside of the Div by using an embedded block, like you are now, and then styling that image using some CSS to fill the Div… you could also write a line of code to simply select the class of the Div you want to fill with the image as a background, and assign the image or dynamic field (in this case) as the background Img for the Div. Then style the background-image as needed.
Example:
I figured another example might help.
Do whatever works best for you
@Scott_Van_Zandt I thought I got it 
but its not working entirely.
And for some reason if I use the code that you sent just adding the CSS style the image doesn’t show at all.
Well make sure you have image links in the “image link” field inside your cms or it’s not going to work. Right now it’s just empty. When you are on a template page, from the top left of the designer there is a drop down where you can switch through your collection and select a blog. Use this to navigate to a blog post that contains an image link in the image field.
Then you can test if it works. Please let me know if that helps!
Thanks @Scott_Van_Zandt I’m aware of those kind of things, I have just one blog post that has a link and I’ve testing that specific one and like I said it doesn’t work.
The only blog post that has a link is a post called “Prueba de fuego”
The thing that I would like to know is why if I use this code:
all the images in the page are affected.
@Scott_Van_Zandt I’m stuck on this exact same issue currently!
Im doing something similar, where we are pulling Instagram images from Zapier and adding the image into a HTML Embed
However with the img src command, I cannot get the image to cover fill the div I have placed it inside.
I have so far managed to get it so it either stretches to the dimensions which looks awful, or it leaves empty space in the frame when going down the browser sizes.
What would be the Custom code to use in order to pull in the Image URL as a background image and ‘cover’ fill the div I have placed it in? Currently the Div i have placed it in has no styling and is only a ‘Block element’
I have spent a fair of time playing with it using various snippits I found online before eventually waving the white flag lol. My coding knowledge isn’t great enough to understand the short hand stuff alot of people have posted elsewhere.
It would be nice if you could share the solution you found, at the end this community is about that right? 
Thanks
Hi Aaron, no worries I have attached the screenshot of the custom code I used to style the HTML embed, pulling in the image I wanted as a background image, which covers the div block it is inside of
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.
