body background=

Reginald · #1 02-19-2003, 09:21 AM

When you have a <body> tag in html and you put an attribute in that tage lik this: background="bkg.jpg"> is there a limit to the size of the bkg.jpg? It should always be as small as possibler, right?

Suppose a client wants 4 images: one in the upper left corner, one in the upper righ, one in lower left and one in lower right corner, the only solution is to make one big background image, right? And of course making one big image, that will make it heavy. So it is better to advice him not to do this, right?

R.

DaveSW · #2 02-19-2003, 10:02 AM

Right. Only possible easy way is not to put it in the background - use a table and put one in each corner and align them to the edge. This may actually be better because text is harder to read over graphics.

Using a large image to cover a background is just about impossible because you don't know what screen resolution the user is using - if you made the image 640x480 to allow for the smallest screen size, your image would be tiled (repeated over and over) in a 1600x1200 screen resolution.

Dave

..::Bro::.. · #3 02-19-2003, 11:05 PM

what Dave said is abosultely right... I use images as "Backgrounds" in my "TABLES ONLY" ... in other words,

<td rowspan="2" colspan="2" align="left" height="144" background="(IMAGE)">

^^^ Then add whatever text on top you like!

cheers

..:: Bro ::..

Stefan · #4 02-20-2003, 04:40 AM

Actually, neighter of these people are right in the method the recomend.

You shouldn't abuse table for creating general site layout, CSS will do it much better.

Just do eg this

<img style="position:absolute; top:0; left:0;" ...>
<img style="position:absolute; top:0; right:0;" ...>
<img style="position:absolute; bottom:0; left:0;" ...>
<img style="position:absolute; bottom:0; right:0;" ...>

To make sure the text and images don't overlap you can do eg

<body style="margin-left:100px; margin-right:100px;">

There are many other solutions too, some which might be a better option in your case, depending on how the page you design looks like.

..::Bro::.. · #5 02-20-2003, 08:46 AM

Quote:

Originally posted by Stefan
Actually, neighter of these people are right in the method the recomend.

You shouldn't abuse table for creating general site layout, CSS will do it much better.

Just do eg this

<img style="position:absolute; top:0; left:0;" ...>
<img style="position:absolute; top:0; right:0;" ...>
<img style="position:absolute; bottom:0; left:0;" ...>
<img style="position:absolute; bottom:0; right:0;" ...>

To make sure the text and images don't overlap you can do eg

<body style="margin-left:100px; margin-right:100px;">

There are many other solutions too, some which might be a better option in your case, depending on how the page you design looks like.

^^^ ANF FOE PEOPLE THAT HAVE CSS BLOCKED?

what then?

pyro · #6 02-20-2003, 08:50 AM

Quote:

Originally posted by ..::Bro::..
ANF FOE PEOPLE THAT HAVE CSS BLOCKED?

How do you block CSS???

..::Bro::.. · #7 02-20-2003, 10:12 AM

Quote:

Originally posted by pyro
How do you block CSS???

OK I appoligize... what i meant was NON supported css2.

I fiddled with the idea of css before and since i've been coming to these forums only 4 or 5 days ago...

I get reffered to css time after time... guess it's time to
get back to the drawing board...

I'll post my question here as well as in the css board, what
about screen resolutions?

How do I position everything to "move" to the middle of
the screen?

Let's say, my template is 755px long & I want EVERYTHING
to move center justified for those who have a higher resolution?

sincerely,

..:: Bro ::..

nkaisare · #8 02-20-2003, 03:40 PM

If you need the four images to be backgrounds, you may use

<img src="imgname.gif" alt="" style="position: absolute; left: 0px; top: 0px; z-index: 1">
... and so forth for each image.

And for the body tag, use
<body style="z-index: 2">

What this does is it places the 4 images at the four corners (or where ever else you need them). z-index of body being higher, the text in the body will display on top of the images, making it look like a background.

MOVING THE TEXT TO THE MIDDLE
Thats a tricky question. "style: left: auto; right: auto" should work, but it doesn't in some browsers (read "IE")

Doing a "text-align: center" in IE incorrectly centers block level elements. Mozilla correctly centers inline elements. So basically, you need a workaround that tricks IE into using "text-align: center", while retains correct "style: left: auto; right: auto" for standards compliant browsers. I am not a pro at this, so don't take my word for it

Stefan, waiting for your reply

Strumey · #9 02-20-2003, 05:14 PM

I have been a frames user because I suck at layouts, but I am trying to move to a table layout with a graphics image background similar to

www.fftoday.com

I would like to know how to make the 'whole page' center like that and keep the integrity of the layout no matter what resolution of the user's browser.

Thanks in advance.

khaki · #10 02-20-2003, 07:31 PM

Nothing special going on at fftoday. it's just centered. it doesn't do anything special for varying resolutions.

Plus... aren't we a little out of season for fftoday (i mean, NO ONE needs this many months to prep for next season's draft, do they?)

reigning super bowl champ! (and I'm A GIRL!!!!!)
k

Strumey · #11 02-20-2003, 10:34 PM

Well, I spend a lot of time on that site for the message boards. I like the layout, and wish I could do something like that. I am trying to learn about css. I have Coffee Cup web dev software, and they have a css tool, but i am not sure how that helps me with my layout issue. If you want to look at my lame ass site I am trying to redo, it is

www.finalfourhoops.com

since march madness is just around the corner, I only have about 2 weeks to get it together.

DaveSW · #12 02-21-2003, 05:56 AM

The actual way these people have done this

<div align="center">
rest of html body code
</Div>

If it's a table, you can just

<table width="760" cellspacing="0" cellpadding="0" border="0" Align="Center">

Hope this helps

Stefan · #13 02-23-2003, 04:53 AM

Quote:

Originally posted by ..::Bro::..
[b]what i meant was NON supported css2.

For those the images will be placed where they are physically located in the markup.
However such browsers are quite rare nowdays.

Quote:

what about screen resolutions?

Positioning will work at any screenresolution.

Quote:

How do I position everything to "move" to the middle of
the screen?

Let's say, my template is 755px long & I want EVERYTHING
to move center justified for those who have a higher resolution?

You mean if you want the corner images to be placed in a centered "box"?

You just position a box into the center and from there use the exact same code. Being in a positioned box the top/left/right/bottom values will be relative the new box, not the page

Stefan · #14 02-23-2003, 05:03 AM

Quote:

Originally posted by Strumey
I am trying to learn about css. I have Coffee Cup web dev software, and they have a css tool, but i am not sure how that helps me with my layout issue.

Well, CSS is easy to learn but immensly powerfull and intricate in ways that are not easily programed.

I have not really seen any CSS capable editor software that will alow you to do anything but scratch the surface of what CSS can do.

Hand coding is pretty much required, but you don't have to learn everything at once. Lreaning as you go, picking up the stuff you need right at the moment you need it will work just fine.

To do a center layout with CSS you could eg do this

<body style="text-align:center">
<div style="width:700px; margin:0 auto; text-align:left">
The textalign lcenter on body is to work around an IE bug
</div>
</body>

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread:

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)