• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Large background image?


#1
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.
 

Harry

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

Code:
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
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
 

Levi

Moderator
Staff member
#4
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
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.
 

Harry

Senior Member
#6
EDIT!!!

I meant:

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

Harry

Senior Member
#7
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 :(
 
#9
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.
 

philjohns

Senior Member
#11
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?

Phil
 

Sunburn

Active Member
#12
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.