Background Image Scale to Screen

Hi all,

I am doing up a simple background image with CSS.

The issue is that I can't get it to fit to screen size as it scales down.

This is my CSS.

And this is the page - http://maxnathaniel.com/indigo/

img.splash {
            /* Set rules to fill background */
           
            /* Set up proportionate scaling */
            width: 100%;
            height:100%;
           
            /* Set up positioning */
            background: url(http://www.indigo.com.sg/wp-content/uploads/2015/03/Aresults-web.jpg) no-repeat center center fixed;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
        }

Code (markup):

Am I doing it correctly?

The other feasible solution would be to scale the images to a more portrait dimension for smaller screen sizes. That would be very manual but feasible in my opinion.

Appreciate any help. Thank you!

 

Uhm... you're using a BACKGROUND on an IMAGE-tag... perhaps a better choice would be to use a... let's say a DIV? With perhaps an image tag inside it, if you need to use another image on top of the background one...

 

The image's parent has no positioning, so the 100% width and height should be (and is) ignored.

Though your link now goes to a blank page of incomplete/buggy markup... with things like anchors wrapping DIV and so forth.

GENERALLY speaking full screen size images are a waste of bandwidth, and since you're saying "splash" that's pointless bandwidth wasting garbage that is common to most every "how not to build a website" list.

That said, is there some reason you aren't putting that image on BODY and instead are wasting extra markup on it?

 

Thanks for your replies! Yeah i should have done it on BODY.

In any case, I decided not to go ahead with the SPLASH page. doesn't make sense to have a page before homepage...

 

YES!
A splash screen tells the visitor, "I have nothing to say and I have no clue how to say it anyway."

cheers,

gary

 

Smart move. REALLY smart move. I heartily endorse that decision.