autosizing Background image and index background like this site...

8bitash / 2012-10-15 14:28:02   

I'd like a home page much like this site - la-projects.com/

I've managed to get an auto sizing background image if I put this in the body

  1. background:url(viewphotography.co.uk/files/…) ; 
  2.         -webkit-background-size: cover;
  3. -moz-background-size: cover;
  4. -o-background-size: cover;
  5. background-size: cover;

But I only want it present in the homepage not across all exhibits.

And whats the correct way to have an index background colour like in the top link?

Ta.

PS is it just me or does the preview and insert buttons not work.

viewphotography.co.uk/

arsondpi / 2012-10-15 16:19:54   

...check this thread: indexhibit.org/forum/thread/16431/

It allows for different background images on each exhibit/section.
Thus you can leave the rest of the pages without a background image...

Vaska A / 2012-10-15 16:32:52   
  1. background-size: cover;

That, is super interesting.

8bitash / 2012-10-15 17:24:28   

hey Vaska is that sarcasm? I genuinely don't know as i'm Mr bobby Basic of the code world.
And cheers Arsondpi, I tried that first time round but can't get it to auto size properly with the browser that way.

Any hints on achieving a white box like in the la-projects.com/ site?

Vaska A / 2012-10-15 21:42:02   

No, not at all - it's a CSS3 rule I had not heard about. ;)

8bitash / 2012-10-16 11:54:17   

Most questions i've now answered but is there anyway of eliminating the drop in quality of an image when it resized with the browser and when using the backgrounder plugin I lose the top of the image.

Can be seen by comparing image in home and about -

viewphotography.co.uk.

Vaska A / 2012-10-16 12:20:58   

The images are not the same - I pulled both of them up separately and one is cropped differently.

8bitash / 2012-10-16 12:54:42   

They're definitely the same file. I've just double checked. Had the same issue when I tried it with a different file too.

this is happening when using the modified code from this thread-

indexhibit.org/forum/thread/16431/

Vaska A / 2012-10-16 12:59:15   

You changed them at one point didn't you?

Because, just a few minutes ago they were different - now they are not.

Shift + browser refresh to see if it updates.

But, uploading background images does not resize them - there is no way that Indexhibit is changing the proportions (not even worth discussing - it's not in the code).

8bitash / 2012-10-16 13:36:13   

They're still the same as they were - horizon sits lower on 'about' where its using this image -

  1. body {
  2.     font-size: 13px;
  3.     font-family: 'Helvetica Neue', Arial, Helvetica, Verdana, sans-serif;
  4.     background: url(viewphotography.co.uk/files/…);
  5.         color: #fff;
  6.     line-height: 1.3em;
  7.     /* font-weight: 300; */
  8. }

But when I try to upload it and use the backgrounder plugin (home) horizon sits higher. Think it might be something to do with the modified code arsondpi wrote for full browser background, so hopefully he might pop in and help me.

cheers

jonathangrevsen / 2012-10-16 15:09:48   

My guees is, that this all very normal. The autorezing function needs to crop your image, since its proportions dont fit the browser window. If you open the image in photoshop and crop some of the bottom, so that you will have a wider image and upload again, you will see more of the top of the image.

Vaska A / 2012-10-16 15:29:10   

When you upload a background image Indexhibit does not crop or resize at all...

jonathangrevsen / 2012-10-16 15:36:44   

I know. Wrong choice of words. But the image as it is now cant fit either and thats why you dont see the top of the image.

8bitash / 2012-10-16 20:55:35   

Thats done the trick jonathan cheers. Is the drop on sharpness something I will just have to live with when it autosizes? the image on -

la-projects.com/ seems to remain sharp despite the browser size.

jonathangrevsen / 2012-10-17 05:19:22   

Dont know, but I would upload a larger imager image than the one used now. Like 1600px wide.

This thread has been closed, thank you.