PDA

View Full Version : Border Background Image

Andy92
09-09-2007, 08:16 PM
Hey,

I know how to put colours as the border, but is there any way to put an image as the border background, rather than a colour?

:D
effpeetee
09-09-2007, 08:47 PM
Hey,

I know how to put colours as the border, but is there any way to put an image as the border background, rather than a colour?

:D
http://www.w3schools.com/css/css_background.asp

This will probably help you.

Frank
Jutlander
09-09-2007, 08:50 PM
No, but you can use a background image instead, although only one background image is allowed per selector. The CSS3 specification will support images on borders though, but it isn't supported yet. Let's hope IE will support it once it gets released.
coothead
09-09-2007, 09:16 PM
Hi there Allsortgroup,

you can see an example here...
http://mysite.orange.co.uk/azygous/hearts.html
...and here is the code...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>hearts as a border</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
body {
background-color:#fee;
color:#f00;
}
#container {
width:225px;
height:225px;
padding:2px;
border:1px solid #f00;
margin:50px auto;
}
.side {
width:15px;
height:225px;
background-image:url(../images/heart.jpg);
float:left;
display:inline;
}
#center {
width:195px;
height:225px;
float:left;
display:inline;
}
.center_top_and_bottom {
height:15px;
background-image:url(../images/heart.jpg);
font-size:0;
}
#center_middle {
height:189px;
background-image:url(../images/big_heart.jpg);
border:1px solid #f00;
margin:2px;
}
</style>

</head>
<body>

<div id="container">

<div class="side"></div>

<div id="center">
<div class="center_top_and_bottom"></div>
<div id="center_middle"></div>
<div class="center_top_and_bottom"></div>
</div>

<div class="side"></div>

</div>

</body>
</html>
coothead
Andy92
09-09-2007, 09:25 PM
When is CSS v3 coming out?
coothead
09-09-2007, 09:31 PM
When is CSS v3 coming out?
Tomorrow morning 9 o'clock sharp. ;)
Andy92
09-09-2007, 09:41 PM
Are you joking?

Tomorrow morning 9 o'clock sharp. ;)
coothead
09-09-2007, 09:52 PM
Are you joking?
Is the Pope a catholic? :)
oldcrazylegs
09-10-2007, 05:25 PM
There are two ways to use an image as a border in HTML & CSS.

The CSS Way uses two nested div tags. Thisway looks easier but it really isn't since Internet Explorer has a Box Model bug and will display it differently than all of the other browsers.

<div style="padding:4px; background-image:url(yourimage.gif);">
<div style="width:300px; height:200px;">
Place your Content here. This will have a 4 pixel wide image border.
</div></div>

The HTML Way uses two nested tables and requires a lot more source code. See this work here in the right frame. http://dwight.clickthesky.com/hhelper/ All browsers will display this pretty much the same.

<table width="90%" align="center" bgcolor="orange" background="yourimage.gif" cellspacing="0" cellpadding="0">
<tr><th>
<table width="100%" align="center" cellspacing="6" cellpadding="10">
<tr><td bgcolor="black">

Place your content here.

</td></tr></table>
</th></tr></table>

The Photoshop Way

The best way to make such a thing work in all modern browsers (except text-only browsers) is to make an image in Photoshop or some other image editor with the image border and your text right on that image. This allows you many other possibilities that are difficult or impossible in HTML and/or CSS.

Doing it this way means you can use unusual fonts that most people don't have on their hard drive.
Andy92
09-10-2007, 11:49 PM
Ok,

Also, another question...

Check out this page...

http://www.kedoa.com/wsurl/

Can you see the black curved border, and the white background?

Basically, that is a 10px black solid border. How can i get that border to be transparent, but make the white background stay in place?

So it will look exactly the same, but the black background will be transparent and still acting as a border?
oldcrazylegs
09-11-2007, 01:10 AM
replace the 10px border with a 10px margin.
Andy92
09-11-2007, 07:12 AM
No, because then it will loose the small white edge round effect, and it will be larger.

The border taks away some of the white round edges.

How can i do this???