12 replies [Last post]
dakev
Offline
newbie
Last seen: 16 years 25 weeks ago
Joined: 2006-04-08
Posts: 6
Points: 0

I've got this sniplet of code...

BODY
{border-style:solid;
border-top-width:45px; 
border-bottom-width:45px;
border-left-width:0px;
border-right-width:0px;
border-color: 373737;}

and it works. But I'd like to add an image in top and bottom. I've searched and read the faq to no avail. So if I'm missed it, please excuse me and point me in the right direction.

Here is what I'd like to get in the border-top

background-image:url("http://dakev.com/myspace/top.gif"); background-repeat:no-repeat; background-position:center;

Here is what I'd like to get in the bottom-top

background-image:url("http://dakev.com/myspace/bottom.gif"); background-repeat:no-repeat; background-position:center;

I've tried everything... what am I doing wrong?

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 22 weeks 1 day ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Border question...

Use the top image on the body and the bottom image on the HTML element. Let us know how you get on Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies

dakev
Offline
newbie
Last seen: 16 years 25 weeks ago
Joined: 2006-04-08
Posts: 6
Points: 0

Thanks

Thanks for the quick reply.

unfortunately, I'm not really following you.

This is actually a template I hijacked for my myspace account.

http://www.myspace.com/jameskever

Anyhow... I was able to locate the code that makes the top and bottom border... but I want images in there.

Can you please explain a little more detailed how you suggest I do that?

Isn't there an easy way to just add the image after the dimension property of the border tag?

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 37 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Border question...

Quote:
I've tried everything... what am I doing wrong?


Can you explain what you have tried!

TPH explained what to do, do you understand how to add background images to elements? if not then let us know and we'll show you the code.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

dakev
Offline
newbie
Last seen: 16 years 25 weeks ago
Joined: 2006-04-08
Posts: 6
Points: 0

Here is what I've done.

I've tried...

BODY
{border-style:solid;
border-top-width:45px; 
border-top-image:url("http://dakev.com/myspace/top.gif"); background-repeat:no-repeat; background-position:center center; 
border-bottom-width:45px; 
border-bottom-image:url("http://dakev.com/myspace/bottom.gif"); background-repeat:no-repeat; background-position:center center; 
border-left-width:0px;
border-right-width:0px;
border-color: 373737;}

I've tried...

BODY
{border-style:solid;
border-top-width:45px; image:url("http://dakev.com/myspace/top.gi9f"); background-repeat:no-repeat; background-position:center center; 
border-bottom-width:45px; image:url("http://dakev.com/myspace/bottom.gif"); background-repeat:no-repeat; background-position:center center; 

border-left-width:0px;
border-right-width:0px;
border-color: 373737;}

and multiple variations inbetween.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 37 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Border question...

You should really look up the background property it would save you a lot of wasted time Smile

You could try:

background: url(image.gif) no-repeat center top;

on the body ruleset, but you will have problems with trying to get it to overlay the border, you may be better off setting the background in a new div and positioning that absolute on the body.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 22 weeks 1 day ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Border question...

Don't worry Laughing out loud

body
{background: url(http://dakev.com/myspace/top.gi9f) no-repeat top left;

html {
background: url(http://dakev.com/myspace/bottom.gif) no-repeat top left; }

And don't use quotes, it's evil Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies

dakev
Offline
newbie
Last seen: 16 years 25 weeks ago
Joined: 2006-04-08
Posts: 6
Points: 0

thanks for all the help...

But this isn't really working. I like the borders because the page scrolls inside of them. In other words, when I scroll, I still see the top and bottom border.

But when try what you guys say... the graphic does appear at the top, but when I scroll down... the graphic scrolls away.

Is there a way to use an image as a border?

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 22 weeks 1 day ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Border question...

Nope.

You can set the images as position: fixed; which will do precisely what you want - but need I say that a certain piece of crap browser doesn't support it :roll:

Verschwindende wrote:
  • CSS doesn't make pies

dakev
Offline
newbie
Last seen: 16 years 25 weeks ago
Joined: 2006-04-08
Posts: 6
Points: 0

okay

So that is closer. The image appears on top, and stays fixed... but stuff goes over it.

Nothing goes over the borders.

You mentioned compatibility... do you think what I'm trying to do is impossible with IE?

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 22 weeks 1 day ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Border question...

IE6 only supports fixed positioning on the background image of body. That's pretty much it.

Saying that, I'm sure there are ways of achieveing what you want.

Verschwindende wrote:
  • CSS doesn't make pies

dakev
Offline
newbie
Last seen: 16 years 25 weeks ago
Joined: 2006-04-08
Posts: 6
Points: 0

okay...

Can you throw some ideas my way? I'll hunt down anything...

Is there a way to manually position an image over a border and make it fixed?

There isn't an image property in border?

I'm at a loss for any other ideas.

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 22 weeks 1 day ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Border question...

There is no image border property.

You can play around with creating a div, using the background on that, setting it as position: absolute, and messing around with z-index.

Have a read on faking position:fixed; in IE and see if you get any ideas.

Verschwindende wrote:
  • CSS doesn't make pies