Background Images Setting to 100%

Discussion in 'HTML & Website Design' started by stockhola, Jul 20, 2008.

  1. #1
    Hi Everyone,
    Sean here, I am looking to set a background image I have just made that is 800x1 pixels I want to set it that no matter what size your window is it fills 100% of the screen what would be the code or how would I set it up to make the background image behave in this manner?
    Thanks!
     
    stockhola, Jul 20, 2008 IP
  2. Website Design Perth

    Website Design Perth Peon

    Messages:
    66
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Is the 800x1px vertical or horizontal?

    Do you want it to repeat-x or repeat-y or both?

    Is it a solid colour? A pattern? A gradient?

    A link is always useful so we can 'see' what you're talking about.
     
    Website Design Perth, Jul 20, 2008 IP
  3. stockhola

    stockhola Guest

    Messages:
    361
    Likes Received:
    15
    Best Answers:
    0
    Trophy Points:
    0
    #3
    800 width by 1 height repeating I want it to stretch 100% no matter if your looking at it on a 1000x width screen or 800x screen. It is a gradient white to black.
     
    stockhola, Jul 20, 2008 IP
  4. rebelagent

    rebelagent Well-Known Member

    Messages:
    876
    Likes Received:
    46
    Best Answers:
    0
    Trophy Points:
    165
    #4
    repeat-y repeats it vertically.

    so <body style="background: url('image address'); background-repeat: repeat-y;">
    As far as the stretching background for any resolution computer repeating via x axis, I'm not sure.

    I'd probably set a default background as the fade out color. So black for the fadeout color and make sure your background is aligned top left.

    So if the background goes on it'll be black like the gradient.
     
    rebelagent, Jul 20, 2008 IP
  5. stockhola

    stockhola Guest

    Messages:
    361
    Likes Received:
    15
    Best Answers:
    0
    Trophy Points:
    0
    #5
    stockhola, Jul 20, 2008 IP
  6. rebelagent

    rebelagent Well-Known Member

    Messages:
    876
    Likes Received:
    46
    Best Answers:
    0
    Trophy Points:
    165
    #6
    If it's an advertisement like that make it two columns and divide the background.

    Or try this for css

    body
    {
    background-image: url('image here');
    background-repeat: no-repeat;
    background-attachment:fixed;
    background-position: top left
    }
     
    rebelagent, Jul 20, 2008 IP
  7. stockhola

    stockhola Guest

    Messages:
    361
    Likes Received:
    15
    Best Answers:
    0
    Trophy Points:
    0
    #7
    it works fine i dont have any issues other then I need the background to adjust if the size of the window is larger or smaller then the 800 pixel image i have now
     
    stockhola, Jul 20, 2008 IP