Calling HTML & CSS Wizz Kids.

eastonch

Hey LET,

Got a quick question for a Wizz Kid or Pro Elder, I'm trying to create a specific sort of effect on a website using an image as a body border... Here's something that's doing the same thing I want to' but I want to have my own image:

http://partygodmother.com/

(You can see the characters on the outside?)

I sort of want to re-create that 'look' buy changing it instead of fancy dress crap, Alloy wheels for a new site i'm designing for a local friend.

I looked through their code but found some horrific methods; there must be another way than this:

 
.mainbg {
    background-image: url(../IMAGES/Portal%20Page%203.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    padding: 0px;
    height: 1600px;
    width: 1000px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
}

To have this:

I'm not even wanting to have all of that styling, literally, Just want to have a border around my Body tag but as an image on the top half of it. Is this possible? Or do I have to do some really hacky methods, since i'm not even aware what this effect is called, I can't find anything online about it.

Thanks in advance,
Chris.

mojeda

Put a div table inside of another div table with the Parent div table having the background image? Unless you just want the top portion of the picture shown above then just do one div table ontop of another and set the background or use the img tag.

<div id="container"> <div id="content"> </div> </div>

Set #container to have the background you want, and then #content to have a background of #FFFFFF. You would also have to do margins or padding to get it to properly appear otherwise the content div will just cover the container.

Look at: http://www.mojeda.net/404/ as an example as to what I mean.

sleddog

@mojeda said: Put a div table inside of another div table

That'll do the basics. Then you need to figure out how to get the hands to hang over

mojeda

@sleddog said: That'll do the basics. Then you need to figure out how to get the hands to hang over

http://i.imgur.com/JbKnu.png

eastonch

Don't want to do that; I'm having alloy wheels of different colours (for respray site) around the outside; so I'll have the container looking like it's "ontop" of the wheels, I may just float it...

mojeda

Then snip the part of the image that would be where #content would be and make it the background image of #content.

Edit: Like so: http://www.mojeda.net/wheels/

eastonch

@Mojeda thanks for clearlying that up;;

But in: http://www.mojeda.net/wheels/xbg.png.pagespeed.ic.AA1OzSNEbU.png

You already have a partition cut out; how do you measure that for your webpage? Is there a specific method?

mojeda

That is just where I had planned for the content to be.

eastonch

How do you plan that?

mojeda

Depends how big you want your content area to be. For the example I had randomly picked 577 pixels wide so I cut that out of the background but copied what was there and made that its own picture.

http://www.mojeda.net/wheels/xinnerbg.png.pagespeed.ic.NKn5YbZvfE.png