Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 4 of 4
  1. #1
    Junior Member
    Join Date
    Nov 2014
    Posts
    1
    Member #
    40733

    Can't get background-size: cover; or background-size: contain; to work

    I want a picture to cover the whole screen of a browser window. I found this code at: <!--

    Playit

    div {
    background-image:url('smiley.gif');
    background-repeat:no-repeat;
    background-size:contain;
    }

    I switched out smiley.gif with my image, background_picture.png, but the page shows up blank. My full HTML code is:

    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Background Test</title>
    <meta name="description" content="The HTML5 Herald">
    <meta name="author" content="SitePoint">
    <style>
    div {
    background-image: url("background_picture.png") no-repeat;
    /* background-position:center; */
    background-color: #cccccc;
    -o-background-size:contain; /* Opera */
    -webkitbackground-size:contain; /* Safari */
    -khtml-background-size:contain; /* Konqueror */
    background-size:contain;


    }
    </style>
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    </head>
    <body>
    <div></div>
    </body>
    </html>

    I have the page and assets posted to: Background Test

    I tried putting in some placeholder text inside the <div> tag, but it still is blank. I'm not sure why background images are so stubborn about not appearing in places where there is no content. It seem to me to defeat the purpose. Anyway, I thought that the w3schools site would be about as good a place as any to find correct code. I apologize if this has been asked and answered. I did search the previous posts, but either I couldn't find a match, or, when I did, the coding (which often matched this) did not work. I did switch out "contain" with "cover" in the background-size, but without success. Very grateful for any attention.

  2.  

  3. #2
    Member
    Join Date
    Oct 2010
    Location
    Philadelphia
    Posts
    82
    Member #
    24186
    Liked
    8 times
    Missed the hyphen in webkit, Also need to set a height and width for it to fill.

  4. #3
    Senior Member sasha_bolcina's Avatar
    Join Date
    Sep 2014
    Location
    Serbia
    Posts
    274
    Member #
    40099
    Liked
    47 times
    Div has no size. And check the path to your image.

  5. #4
    Senior Member Vapr_Arts's Avatar
    Join Date
    Oct 2013
    Location
    California
    Posts
    1,930
    Member #
    37412
    Liked
    544 times
    Is the image located in the same folder as the page you are trying to display it? Is it inside of a folder?


    Regretfully sent from my iPhone using Tapatalk during lunch and other breaks


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Tags for this Thread

All times are GMT -6. The time now is 05:56 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com