Image Bordering around Another image

Hi. So I am doing this assignment for an online class, and I need help figuring out how I put an image as a border around another image. I have tried, but it always either goes around the entire web page, or it just acts like a background image. Could you help me with the needed code for this? Here is a link to my website. Could you help me figure out what I did wrong?

Which image are you using as a border?Please link to the image directly so we can see what it is and what you are trying to do.

Also which is the image that will be inside the border? Can you link to that also.

I saw a number of images on your page but could not work out what you were attempting :slight_smile:

Note that you can’t just add a background to an image unless the image was transparent. If you wanted something to show outside the image then you’d apply a background to the div that holds the image but you would need to create some space around the image with padding on the div and then cover the area with your image. You’d also need to shrink the div to match the image size (or vice versa) depending on what it is you want to achieve.

Remember that images are essentially rectangles so you can’t trace around a shape (if that’s what you were thinking).

You can also use border-image to crreate image borders but is wuite complicated and I doubt that is what you were attempting anyway. but you can see the details here.

What I need to do was put the tic-tac-toe image around the football image, but, again, I do not understand how to do so. You say that I need to make the image transparent. I have not learned how to do this just yet. Is there a way to do it in CSS or HTML without disrupting it?

I gave you a codepen example of that and also pointed you to a resource that shows how ti implement a border-image. You need to define a border-width for the image and then you can display the border-image in the space that the original border defined…Please read the documentation but border-image is quite an advanced concept to grasp. View the codepen I gave you as that has a minimal example in place. Did you not look at it?

I didn’t say that. I said if you wanted to see the background then the image would have to be transparent which would be pointless.

If you just want a normal repeated background you can do this:

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.