CODEWITHSUNDEEP
css
Noah Goodrich
Noah Goodrich

Reputation: 315

Apply a border to background image

I have some divs, and they have their backgrounds set as images using this:

background:url(myimage.jpg);

Now what I'm looking to do is set a border on that image that is set to the background.

I don't want to set a border on the div as this does not give the desired result, it must be a border on the image.

Not sure if this is possible, is it?

Upvotes: 1

Views: 430

Answers (2)

DidoSaidi
DidoSaidi

Reputation: 131

You could try using multiple backgrounds, by setting your base bg image and a second one as a border.

#container {
background-image: url(Main-bg), url(Border-img.png); 
background-position: center center, left bottom; /* border bottom in this case */ 
background-repeat: no-repeat; 
}

Upvotes: 4

KatieK
KatieK

Reputation: 13853

It is not possible to do it precisely as you've mentioned. Since the background image is styling, rather than content, no additional styling can be added to it.

The best option would be to create a different image file to serve the bolder border.

Upvotes: 2

Related Questions