Background image problem

Discussion in 'HTML & Website Design' started by photomoon, Nov 29, 2009.

  1. #1
    Hey.
    I am new at the forum, also newbie when it comes to on my own coding css.

    I have both checked out this forum´s posts and other forums and homepages, without luck finding what I´m looking for.
    AND I have tried to learn about positions and float (padding/margin), also without luck (I think that all places I´ve been there is not so much examples. I am more of a practical person than theory...:confused:).

    To get some help, still not got a homepage that I´m satisfied with, so I give you a printscreen of a background-image.

    [​IMG]

    I have been thinking of doing the page with
    - body
    -(div id=bg)
    - wrap
    - content
    (-maincontent)
    - sidebar (I haven´t decided do I need one or not)
    - footer

    Okey, to my problem(s).

    - The problem to understand positions and float (padding/margin)

    - I would like to know how I the best way can get my text to fit into the "white space"? Is it okey to get the padding/margin to over 150px or what´s the "righter" way?

    - I am confused about where is the best place to set the background image - in the body-tag or as a div tag (div id=bg)?
    Have tried to get an answer to the div-tag, looking around for solutions, but there is so many ways, and I don´t get how the position/float should be for the bg image and the other divs. :confused:
    - I don´t know what´s the way to do things, for example the (main)content-tag(s). Should they be height on them or not? It seems so "funny" at the index-site, where there is just a few senses, and good on other sides where there is more text? What is the common way to do this?

    - How to get a picture in the footer, that fits the layout? And actually same problem as the maincontent - how to get the footer to fit the layout?

    Okey, hopefully I get som help, (because I am desperate) .

    Thanx in advance!
     
    photomoon, Nov 29, 2009 IP
  2. graphicband

    graphicband Active Member

    Messages:
    413
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    58
    #2
    Well you have got to work with giving different backgrounds to multiple nested elements to get that perfect look.

    1. give the background color to body or a x-repeat image strip if you want shiny background
    2.Make a main_wrapper (or any name of ur choice) and set the background image - top portion of your graphic.
    background-repeat- no repeat; background-position:top;
    declare a width for this div and set the margin to auto - margin:auto; that will align it in center. No padding inside it.
    3.make header and content area div which are children of main_wrapper

    see the ttd. graphic. let me know if that confuses you more :p

    [​IMG]

    Thanks
     
    graphicband, Nov 29, 2009 IP
  3. photomoon

    photomoon Peon

    Messages:
    21
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Hey.

    Thanx for your answer. It helped a lot.

    Eventhough some parts are strange for me, but I have to try around a bit first. (Haven´t had time for it this week yet :()

    What did you mean in the 1. by "a x-repeat image strip if you want shiny background"?
    What do you mean by "see the ttd. graphic"?

    I´m now wondering about is how I do so I get (if I understood it right) three different pics?
    I suppose I can do it in photoshop (that I have)? Any suggestions?
    I don´t know how to get them "the right size"...?

    Thanx!

    Pssst. English is not my native languange... :cool:
     
    photomoon, Dec 2, 2009 IP
  4. photomoon

    photomoon Peon

    Messages:
    21
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Nobody?? :eek:

    One other thing about position/float (in general);
    Is it necessary to use position at all?
    Is it more position:absolut that´s used (against position:relative)?
    Can I just use float:left and/or right, and position absolut, and not at all relative?

    And again, is it okey to get the padding/margin to over 150px or what´s the "righter" way?
     
    photomoon, Dec 9, 2009 IP
  5. mrpaisa

    mrpaisa Guest

    Messages:
    741
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    It doesn't matter who or what does the html. At some point, html+css is served to the browser. we need to see what the browser see if nothing else work, view source.
     
    mrpaisa, Jan 13, 2010 IP