Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › CSS Background Image won't load

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • July 4, 2014 at 9:34 am #174601
    Cosmonaut_99
    Participant

    Hi,

    I’m working on a site, where I want a large banner image at the top of the screen, (where I’m trying to use the (external) CSS background-image to make it work.

    (I plan to use the CSS img protocol to subsequently add other images on top of the banner later, using absolute positions.)

    I also plan to have multiple (external) CSS files to cover the different screen resolutions used by different device types.

    The htm file, external css file and image are all currently in the same folder.
    I’m using a smaller image called ‘tester.png’ to see if I can make this work.

    Unfortunately the background image just never appears which is really grinding my gears at the moment. Any help would be great. (I’m wondering if the page is loading the image off the side of the screen.)

    (I’m using a screen with the resolution at 1,920x 1,080 where the browser width is 1536 pixels.)

    Here’s the very simple HTML :

    <!DOCTYPE html>
    <link rel=”stylesheet” media=”(min-width: 1200px)” href=”desktop.css” />
    p class = “bannerimg”

    (I know there’s a < missing … but it won’t let me enter the line otherwise)
    Here’s the CSS code in desktop.css :

    .bannerimg{
    background-image: url(tester.png);
    background-repeat: no-repeat;
    background-attachment: scroll;
    ”’background-position: 200px 20px;”’
    }

    Thanks..
    Andy.

    July 4, 2014 at 9:58 am #174606
    Cosmonaut_99
    Participant

    Hi,

    At the moment, all of these files are still on my c: drive.. so I can’t really send you a link unfortunately (which in hindsite might have been a smarter thing to have done).

    At the moment all I get is a blank white screen on the browser (Firefox 30.0).

    I get the below message in the console inspector.
    _
    The character encoding of the HTML document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must be declared in the document or in the transfer protocol._

    However, (given that I’d declared at the start of the htm file “<!DOCTYPE html>” (as usual), I don’t understand why the browser is unclear that the encoding is in HTML.(?)

    Cheers,
    C99

    July 4, 2014 at 10:22 am #174609
    Cosmonaut_99
    Participant

    Here’s the Index.htm :
    (https://gist.github.com/anonymous/9f42f684af9469513796#file-index-htm “Index.htm External CSS Background Image Test”)

    Here’s the External CSS File contents of Desktop.css :

    (https://gist.github.com/anonymous/9f42f684af9469513796#file-bannercsstester&#8221; title=”External CSS Background Image – CSS File”)

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.