1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Background Image Scale to Screen

Discussion in 'CSS' started by serialentre, Apr 2, 2015.

  1. #1
    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.
    SEMrush
    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!
     
    Last edited: Apr 2, 2015
    serialentre, Apr 2, 2015 IP
    SEMrush
  2. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #2
    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...
     
    PoPSiCLe, Apr 2, 2015 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,375
    Likes Received:
    1,853
    Best Answers:
    245
    Trophy Points:
    515
    #3
    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?
     
    deathshadow, Apr 3, 2015 IP
  4. serialentre

    serialentre Member

    Messages:
    123
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    30
    #4
    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...
     
    serialentre, Apr 7, 2015 IP
    deathshadow likes this.
  5. kk5st

    kk5st Prominent Member

    Messages:
    3,498
    Likes Received:
    377
    Best Answers:
    29
    Trophy Points:
    335
    #5
    YES!
    A splash screen tells the visitor, "I have nothing to say and I have no clue how to say it anyway."

    cheers,

    gary
     
    kk5st, Apr 7, 2015 IP
  6. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,375
    Likes Received:
    1,853
    Best Answers:
    245
    Trophy Points:
    515
    #6
    Smart move. REALLY smart move. I heartily endorse that decision.
     
    deathshadow, Apr 7, 2015 IP