Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Border around a background-image

Status
Not open for further replies.
Omicron

Omicron

Technical User
Jul 15, 2001
32
US
I'd like to set a fixed background image using CSS. No problem there. However, I'd also like to be able to add a border to this background-image. Can that be done? If so, can someone explain to me the method needed?
Thanks,
- Omicron -


- Omicron -
Compuset Portal
 
Sort by date Sort by votes
No, you cannot put a border around a background picture. I suggest you draw a border on the picture using a picture handling program like Paint Shop pro.
 
Upvote 0 Downvote
BillyRay,
The element that contains the background-image is the body. And styling the body with a border doesn't do anything.
So I'm still stuck. Others in the forumn say it can't be done. I'm thinking of hand-painting it in with Adobe or something like that.


- Omicron -
Compuset Portal
 
Upvote 0 Downvote
Try this for size:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html>
<head>
	<style type="text/css">
		html {
			border: 2px solid #FF0000;
		}
	</style>
</head>
<body>
</body>
</html>

For IE (in standards compliant mode - which you get with a valid DOCTYPE), and most other newer browsers, the BODY is only as big as the content it contains... So assigning the border to the HTML element does the job.

If you only want the border to go around the body, and not the whole browser, simply change the "html" for "body" in the CSS.

Hope this helps,
Dan
 
Upvote 0 Downvote
Hi BillyRay,
Yeah, I had tried that concept but it puts a border around the entire viewing field. I only want the border around the background image which is only a small, fixed picture, about 100x100 px in size.


- Omicron -
Compuset Portal
 
Upvote 0 Downvote
Short of moving your background image to its own fixed-sized, absolutely-positioned DIV, and putting the border on that instead (which is a good solution), your only hope is to draw the border on yourself, as Vragabond has suggested.

Hope this helps,
Dan
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
790
3esolar
3
jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
usarmycwo
  • Locked
  • Question
Any FrontPage users still around? 1
Replies
4
Views
937
feherke
feherke
Alt255
  • Locked
  • Question
Searching for a string that contains brackets
Replies
0
Views
238
Alt255
Alt255
waubain
  • Locked
  • Question
Prevent user from getting a 404 error if click on a hover text displaying a hidden image. 1
Replies
5
Views
274
jjgupta915
jjgupta915

Part and Inventory Search

Sponsor

Back
Top