Member Offer
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Large background image?

Discussion in 'Website Coding & Programming Forum:' started by christophwells, Dec 10, 2010.

  1. christophwells

    christophwells Junior Member

    Hello all.
    I am currently using a large image for the background on my portfolio site. I was just curious as to what you thought of the use of a fairly large jpeg as a background and actually how it looks. I know this is sort of a trend thing that quite a few people did/do/are doing, but I just thought I'd give it a go.
    portfolio of christoph wells is the site.

    Edit! - Also I designed it using 1920 x 1080 resolution which looks good. I have tested it down to 1280 x 1024. If anyone can give me a screenshot at 1024 x 768 that would be awesome.
  2. Harry

    Harry Senior Member

    That image is far too big. Redo it at 1500xwhateverpx and then have:

    html{  height:101%;}body{  background:url(/your/image.jpg) top left no repeat fixed;  height:100%;  -moz-background-size:auto 100%;  -webkit-background-size:auto 100%;  background-size:auto 100%;}
  3. christophwells

    christophwells Junior Member

    Cheers, fixed background looks better actually. I just left the background size on auto as the width at 100% left a load of white space.
    .. and added the "-" in no repeat as it had me wondering what was going on at first :p
  4. Levi

    Levi Moderator Staff Member

    lets put it this way, on my browser of choice (ie firefox) the background image is auto resized to fit the screen and leaves a great big white space on the right hand side....

    And if I'm honest, you need to up the quality of the site, that's boring as anything and it's not really showing what you can do..
  5. christophwells

    christophwells Junior Member

    Yea sorry I just updated the css file, explained in my last post. Yes it's very boring at the moment. I have a lot of work to do but I only started it 3 hours ago, but cheers for your feedback.
  6. Harry

    Harry Senior Member


    I meant:

      -moz-background-size:100% auto;  -webkit-background-size:100% auto;  background-size:100% auto;
    My bad.
  7. Harry

    Harry Senior Member

    Further comments, I'm a bit of a type geek and I'm afraid I can't really see anything of any typographical merit… quite the opposite in fact :(
  8. christophwells

    christophwells Junior Member

    Give me a few more days and I'll finish it and I'm sure I won't disappoint you afterall :) .. I hope!
  9. ralphsaunders

    ralphsaunders Senior Member

    Might be worth putting what you have at the moment on one side and try wireframing some different layouts. Paper and pen to start. It will helps with proportions as well as other things.
  10. christophwells

    christophwells Junior Member

    You are correct. Designing stuff on a 32 inch tv is not very helpful as far as I can tell
  11. philjohns

    philjohns Senior Member

    Personally I think jpeg background images can look great - Yours seemed to load slightly slow for me (not sure if thats my interenet conenction or not but I doubt it as I dont normally have any problems.)

    Ive used large background images before - one on the site below which uses a php script to randomly pull 1 of 5 images... Loads alright me thinks? And certainly finished the design....

    Las Colinas Golf Properties – Apartments and Villas in Spain

    On a different note - add some padding to the top of your website so your nav text doesnt touch the top of my browser... and perhaps go for colours on your name other than what i call IE Blue and IE Red?

  12. Sunburn

    Sunburn Active Member

    Another method to speed up large background image websites is to reduce the file size with some serious compression but retaining the visual appeal by adding an overlay via another another image (repeated) which will help distract from any compression artefacts.

    ala .. Ana Hickmann - Site Oficial
    Oficiální stránky Davida Kollera
    (notice the hatching on the bground image)

    Or just generate the image with the hatching on but highly compressed.
    Also a good host is helpful.
  13. Harry

    Harry Senior Member

    That's clever, Geoff! Looks good and it's useful!

    Learn something new every day…
  14. Sunburn

    Sunburn Active Member

  15. Tom Sound

    Tom Sound Active Member

Share This Page