Adding border to the background image

HTML-CSS
#1

I want to add a background image with border around it.

After searching here and there I found many codes but of no use.

Currently, my code looks like this:

My HTML File:

<!DOCTYPE html>
<html>
<head>
	<title>Survey Form</title>
	<link rel="stylesheet" type="text/css" href="survey-form.css">
</head>
<body>

	<div id="bg-border">
		<div id="bg"></div>
	</div>
	
</html>

My CSS code:

#bg-border {
	border: 5px solid red;
}

#bg {
	background: url(http://wallpoper.com/images/00/31/33/51/black-background_00313351.jpg);
	
}

But the result I’m having is:

Screenshot%20(50)
Screenshot%20(50)1366Ă—768 255 KB

Can you help me please ?

#2

not 100% certain but I would suggest your background image is wider than the bordered box you are putting it in - I dont think it will auto resize. I “think” you will need to add a margin left & right to the background that is the width of the border (ie 5px each) and then reduce the width of the image to account for the reduction in margin (easier if you use % as the total width would need to be 100%

am sure there is a much simpler way tho

1 Like
#3

Thanks @robwuk.
Yeah, I found another way of doing it.
I found awesome article on Medium explaining the same.
You can go through it if you want. Here’s the link:

1 Like