Member Avatar for tqmd1

Dear Experts

I have following codes

<html>

<style type="text/css">

#box1	{
	width:400px;
	height:400px;
	background:e3eeff;
	color:blue;
	padding:10px;
	text-align:center;
	margin-top:100px;
	margin-left:300px;
	vertical-align:middle; 
	{
</style>

<body>
<div id="box1"><h1>Div <br>with<br> four<br> border<br> images</h1></div>
</body>
</html>

I want to apply attached images as border.

For example bg_left.gif will be display on left border of div.

Please help

bg_bottom.GIF 2.37 KB bg_left.gif 2.37 KB bg_right.gif 2.37 KB bg_top.GIF 2.37 KB
  • 2 Contributors
  • 3 Replies
  • 84 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by Dandello

Recommended Answers

All 3 Replies

Member Avatar for Dandello

That's one nested div for each one of your border graphics set as a background image with the background color set to transparent.

<div id="inner_top" style="background:transparent url(bk_top.gif) top left no-repeat">
Member Avatar for tqmd1

Dear Sir,
Could you please provide some more details?

Member Avatar for Dandello

Each graphic is set in its own div with background-color set to transparent. Each div can be made to fit the graphic and independently positioned or simply nested, one on top of the other, with identical sizes.

Edited by Dandello because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.