1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Fullscreen background image with padding

Discussion in 'HTML & Website Design' started by amagdk, Feb 27, 2012.

  1. #1
    Hi!

    I working on a site where i want a fullscreen background image - so it scales along with the browser window - but at the same time has 40 pix of space around it.
    The image is fulscreen now, but i have run into some problems with the space.
    If i do it like this: 40 px at y and x positions
    Screen shot 2012-02-26 at 11.47.00 PM.png
    it will look like this:
    Screen shot 2012-02-26 at 11.46.53 PM.jpg
    and i dont know how to do the same for the right side and bottom.

    I have tried adding a border or padding to the image, but did not succeed.

    I will be happy to hear your suggestions, thanks.
     
    amagdk, Feb 27, 2012 IP
  2. Jocaziggg

    Jocaziggg Greenhorn

    Messages:
    33
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    16
    #2
    Try to to reduce your picture size.... now your picture is 653*503 .... If I am right.Make et 613*463 ...
     
    Jocaziggg, Feb 27, 2012 IP
  3. amagdk

    amagdk Peon

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    I really hope that is not your serious answer.
     
    amagdk, Feb 27, 2012 IP
  4. amagdk

    amagdk Peon

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Would still like to hear suggestions - preferably about css.

    Jocaziggg: the img size is not 653x503, that is the size of the screenshot. The image is larger and scales to fit the size of the browser window.
     
    amagdk, Feb 27, 2012 IP
  5. xira

    xira Active Member

    Messages:
    315
    Likes Received:
    8
    Best Answers:
    4
    Trophy Points:
    68
    #5
    There are javascripts and other things out there that allow for background images to fill the screen.

    Anything you do with CSS and scaling should be done with percents, not pixels.
    You could therefore try putting the image in the background of the body tag. Make the body with percentage padding: 2% (or something like that).
    The problem with this approach is that your image won't be scaled.

    The other approach is to put your background image in a container <div> with a low z-index, absolute positioning, and your desired padding. Make the image <img> 100%.

    Good luck
     
    xira, Feb 28, 2012 IP
  6. amagdk

    amagdk Peon

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Thanks Xira,

    I will give the second approach a try!
     
    amagdk, Feb 28, 2012 IP