Splash Page Image Background - How do I center fluidly?

Discussion in 'HTML & Website Design' started by Altug, Oct 17, 2012.

  1. #1
    Hey DP'ers,

    hope everybody is well today.

    I may not have worded this right in the title but hopefully I can explain it better here with a demonstration. I'm creating a simple splash page for my friend's business out of an image that he has sent me.

    Here it is : http://al2web.com

    I have managed to center it and it looks good on the two screens I've viewed it on but he is viewing from a humungous Mac screen and said he can see the white borders where the image ends.

    Is there a way that I can have the background a solid colour and then have the image centered on top of the background colour?

    Also is there a way for the image to resize to fill up a certain portion of the screen? What I mean by this is that on his mac, he asked me to increase the size of the image because the image looked really small to him..but on the two monitors I viewed on, it appeared perfectly. In fact any bigger would have been too much. Is there a way to, for example, make the image fill up 75% of whatever monitor it is opened on?

    Thanks very much in advance for any answers or help. Really appreciate it.
     
    Altug, Oct 17, 2012 IP
  2. xXxpert

    xXxpert Well-Known Member

    Messages:
    604
    Likes Received:
    34
    Best Answers:
    9
    Trophy Points:
    165
    Digital Goods:
    7
    #2
    use this css property.

    body
    {
     background:url(images/bg.jpg) center top #000;
    }
    Code (markup):
     
    xXxpert, Oct 17, 2012 IP
  3. Altug

    Altug Active Member

    Messages:
    188
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    53
    #3
    Thanks for your help xxxpert!

    I put that code in but it seems to push the image down outside of the center. Check it out http://al2web.com

    Also does anyone know if it is possible to expand or reduce the picture size depending on the size of the monitor viewing? So that it fills about 75% of the monitor? Any css code for this? Thanks :)
     
    Altug, Oct 18, 2012 IP
  4. technolabsoftware

    technolabsoftware Peon

    Messages:
    53
    Likes Received:
    1
    Best Answers:
    2
    Trophy Points:
    0
    #4
    Hi, I have checked it in MAC its working fine, pls can you take screen shot from your friend.
     
    technolabsoftware, Oct 20, 2012 IP