www.webdeveloper.com
Results 1 to 5 of 5

Thread: CSS background-image not working.

Hybrid View

  1. #1
    Join Date
    Oct 2013
    Posts
    4

    Unhappy CSS background-image not working.

    This is frustrating. I am messing around learning HTML and CSS and can not get the background image to work. I have made a folder on my desktop called "test". created an index.html and style.css and put those in the folder accompanied by a background image from google. its is 1920x1200. These are all in the same test folder.
    I have tried adding .jpg at the end but still no luck.
    Here is my HTML and CSS code, both created with notepad++.
    Please help!
    What am i doing wrong?

    ///HTML CODE///
    <!DOCTYPE html>
    <html>
    <head>
    <title>JDM</title>
    <link href="style.css" rel="stylesheet" type="text/css">
    </head>

    <body>

    HELP!

    </body>
    </html>

    and my ///CSS code///
    /* http://meyerweb.com/eric/tools/css/reset/
    v2.0 | 20110126
    License: none (public domain)
    */

    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed,
    figure, figcaption, footer, header, hgroup,
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;

    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure,
    footer, header, hgroup, menu, nav, section {
    display: block;
    }s
    body {


    background-image:url("background"); <--------- have also tried ("background.jpg")---------->
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-size:cover;
    line-height: 1;


    }
    ol, ul {
    list-style: none;
    }
    blockquote, q {
    quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
    content: '';
    content: none;
    }
    table {
    border-collapse: collapse;
    border-spacing: 0;
    }
    table
    {
    border-spacing: 5px;
    }
    #text
    {
    color:green;


    Thank you for your help. I really am stuck!
    -JD

  2. #2
    Join Date
    Mar 2011
    Posts
    1,133
    The 'url' parameter requires an actual URL. It can use relative or absolute addressing (ie. "http://www.example.com/some-dir/some-file.png"). If the background image didn't appear then either (a) the <link> tag isn't loading your stylesheet at all, (b) the URL in the background-image rule is incorrect, or (c) the image file doesn't exist at that address. So, if your stylesheet is set to:
    Code:
    body {
    background-image:url("background.jpg");
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-size:cover;
    line-height: 1;
    }
    your image file "background.png" must reside on the server in the same directory as your "style.css" stylesheet file.

    Just keep plugging away at those three potential issues and you'll fix it.
    Rick Trethewey
    Rainbo Design

  3. #3
    Join Date
    Oct 2013
    Posts
    4
    Little confused. Thank you for your reply.
    So I took the pictures and saved image as jpg. under "background.jpg in the same folder as my index.html.
    you said background.png? png got me confused in your reply. did you mistype?
    the url should go to my folder on my desktop shouldnt it?

  4. #4
    Join Date
    Oct 2013
    Posts
    4
    ok. even when i put in a real url
    background-image:url("http://картинки.cc/img/4/8/7/%D0%A7%D1%91%D1%80%D0%BD%D1%8B%D0%B9,%20%D1%82%D0%B5%D0%BA%D1%81%D1%82%D1%83%D1%80%D0%B0,%20%D0%BE%D 0%B1%D0%BE%D0%B8,%20%D1%84%D0%BE%D0%BD,%201920x1200.jpg");
    it still not not work.
    but im sure of my style.css is linked because my reset is working correctly.

  5. #5
    Join Date
    Oct 2013
    Posts
    368
    Code:
    article, aside, details, figcaption, figure, 
    footer, header, hgroup, menu, nav, section {
    display: block;
    }s
    The last "s" is a stray character. Browsers combine this with the next characters (line returns don't count). "sbody" is not an element so all of your CSS instructions for "body" are getting ignored. Delete the "s" and make absolutely sure the file name for your background image is entered correctly, with the file extension!

    Good luck,
    Kevin

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles