www.webdeveloper.com
Results 1 to 14 of 14

Thread: body background=

  1. #1
    Join Date
    Feb 2003
    Posts
    3

    body background=

    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.

  2. #2
    Join Date
    Feb 2003
    Location
    Wales, UK
    Posts
    3,147

    Arrow Images

    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

  3. #3
    Join Date
    Feb 2003
    Posts
    34

    and also...

    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 ::..

  4. #4
    Join Date
    Nov 2002
    Posts
    984
    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.
    Last edited by Stefan; 02-20-2003 at 03:43 AM.
    // Stefan Huszics

  5. #5
    Join Date
    Feb 2003
    Posts
    34
    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?

  6. #6
    Join Date
    Dec 2002
    Location
    High on life
    Posts
    10,104
    Originally posted by ..::Bro::..
    ANF FOE PEOPLE THAT HAVE CSS BLOCKED?
    How do you block CSS???

    Personal website http://www.ryanbrill.com/
    Business website: http://www.infinitywebdesign.com/
    TypeSpace http://www.typespace.org/

    I reject your reality and substitute it with my own!

  7. #7
    Join Date
    Feb 2003
    Posts
    34
    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 ::..

  8. #8
    Join Date
    Jan 2003
    Location
    Atlanta, GA
    Posts
    571
    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

  9. #9
    Join Date
    Feb 2003
    Location
    Austin, TX
    Posts
    4

    More background questions

    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.

  10. #10
    Join Date
    Jan 2003
    Location
    Jersey Girl
    Posts
    1,198
    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

  11. #11
    Join Date
    Feb 2003
    Location
    Austin, TX
    Posts
    4
    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.

  12. #12
    Join Date
    Feb 2003
    Location
    Wales, UK
    Posts
    3,147
    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
    In a world without walls and fences - who needs Windows and Gates?! - Unknown Author
    "And there's Bill Gates, the...most...famous...man in the...ah...Microsoft." -- A TV commentator for the 2000 Olympics.


    Web Design Faq? | W3C | Validator | Accessibility testing | Speed up your PC | Wura | Box Model Research

  13. #13
    Join Date
    Nov 2002
    Posts
    984
    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.

    what about screen resolutions?
    Positioning will work at any screenresolution.

    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 Huszics

  14. #14
    Join Date
    Nov 2002
    Posts
    984
    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>
    // Stefan Huszics

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles