SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,094
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    100% height! Background image?

    I need to make a new website and this is what was sent to me by the clients Photoshopper. I was just currious, If the best way to do this would be with a background image. As you can see a 100% height is required. So what would be the best way.

    Thank you in advance.
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,338
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    It looks like the only 100% high element is the blue and gray vertical stripe and that could be done by repeating a slice on the body background. You can position it centrally by making sure the image is the layout width and not just the stripe width (e.g. include the body background colour on the right of the stripe until the image is the layout width). Then you can just center it on the body and repeat on the y-axis.

    I would put the overlapping flourishes in the background of a 100% wide wrapper so that it doesn't hold the page wide.

    That then just leaves the main page layout to be done and will determine the real page width.

    If you need the footer at the bottom then use the sticky footer technique (css faq). You could even do the stripe with the absolute overlay technique (that demo uses the old sticker footer code so don't use it) but I don't think you need it here anywa as the body background image will suffice for your design.


Bookmarks

Posting Permissions

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