Forums

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

Home › Forums › CSS › CSS/HTML background image not displaying Windows 10

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 17 total)
1 2
  • Author
    Posts
  • October 25, 2016 at 6:28 am #247015
    swankles
    Participant

    I’m having trouble getting a background image to display using CSS for a HTML file. I’m trying to get an image from my Pictures folder to display and it just won’t show up.
    Here’s the portion of CSS coding that is giving me this problem:

    body {
    background-color: rbga(189,184,184,0.1);
    background-image: url(C:\Users\Chris\Pictures\yeahboi.jpg);
    background-attachment: fixed;
    background-position: top right;
    background-repeat: no-repeat;
    overflow: auto;
}

    If anyone would like the html code to be posted then let me know

    October 25, 2016 at 6:46 am #247019
    Paulie_D
    Member

    Does the body have a height?

    Does the image show up in a div (that has height)?

    Otherwise this could be a path issue or a Textcase issue.

    October 25, 2016 at 6:52 am #247023
    swankles
    Participant

    i’ll show the full css and html coding if that helps
    html:

    <!doctype HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>CSS - Images</title>
    <link href="css/images.css" rel="stylesheet">
</head>
<body>
    <p>The first image demonstrates border properties:</p>
    <p><img src="C:\Users\Chris\Pictures\banta.jpg" alt="" width="379" height="250" class="img_1"/></p>
    <p>The second image demonstrates the transformation property with the rotate method:</p>
    <p><img src="C:\Users\Chris\Pictures\johnoliver.jpg" alt="" width="250" height="378" class="img_2"/></p>
    <p>The third image demonstrates the transformation property and includes the box-shadow property:</p>
    <p><img src="C:\Users\Chris\Pictures\yakkage.jpg" width="377" height="250" alt="" class="img_3"/></p>
</body>
</html>

    css:

    /* defining overall image style */
img {
    padding: 5px;
    margin: 5px;
.img_1 {
    border-style: dotted;
    border-width: medium;
    border-color: rgba(220,25,28,0.5)
}
.img_2 {
    margin-left: 30px;
    transform: rotate(10deg);
    -ms-transform: rotate(10deg);
}
.img_3 {
    margin-left: 20px;
    margin-top: 20px;
    padding: 0;
    transform: rotate(10deg);
    -ms-transform: rotate(10deg);
    box-shadow: 10px 10px 5px rgba(188,186,186,1.00);
}
/* defining the background in the body element */
body {
    background-color: rbga(189,184,184,0.1);
    background-image: url(C:\Users\Chris\Pictures\yeahboi.jpg);
    background-attachment: fixed;
    background-position: top right;
    background-repeat: no-repeat;
    overflow: auto;
}

    the images in the html coding display correctly, and the “defining overall image style” part of the code all works fine

    October 25, 2016 at 6:56 am #247024
    Paulie_D
    Member

    Unfortunately, that’s not really going to be much help.

    It should work but make sure that the path is exactly

    background-image: url(C:\Users\Chris\Pictures\yeahboi.jpg);

    .JPG is not the same as .jpg etc.

    The only other thing I can think of is adding a background-size.

    October 25, 2016 at 7:01 am #247025
    swankles
    Participant

    i’ll try the “background-size”
    as for the file path, i copied and pasted the direct file path so it should be working
    the file is a .jpg (not .JPG)

    cheers for the help otherwise :)

    October 25, 2016 at 7:08 am #247026
    bearhead
    Participant

    If your html and css files are located anywhere other than your local machine (i.e. on their on the internet) you won’t be able to point to files on your local machine.

    October 25, 2016 at 7:17 am #247028
    swankles
    Participant

    background-size didn’t produce any results, if i can’t get it working through this forum i’ll have to ask my lecturer tomorrow when i get the chance

    all of my html and css files are located on a usb stick, and the pictures i use are on my local memory, never had a problem with it before until now

    October 25, 2016 at 7:43 am #247029
    bearhead
    Participant

    In the full css you posted it looks like you’re missing a closing bracket on your img selector

    October 25, 2016 at 9:25 am #247031
    swankles
    Participant

    ohhh you’re right, i’ll fix that up and see if it works

    October 25, 2016 at 9:27 am #247032
    swankles
    Participant

    i always make simple little mistakes like that ahaha fml

    October 26, 2016 at 7:31 am #247066
    swankles
    Participant

    nope nvm just realised that was a copy&paste mistake on my part, there is a closing bracket in the original css file, idfk what the problem is

    October 26, 2016 at 7:35 am #247067
    Paulie_D
    Member

    You’re not floating the pargraphs are you?

    Does the fallback color show up or just nothing?

    October 26, 2016 at 10:05 am #247073
    teear
    Participant

    Have you tried using forward slashes in the file path:

    background-image: url(C:/Users/Chris/Pictures/yeahboi.jpg);

    October 26, 2016 at 3:09 pm #247087
    Shikkediel
    Participant

    Here’s some more clues as well:

    http://stackoverflow.com/q/6401865/3168107

    October 26, 2016 at 9:58 pm #247092
    swankles
    Participant

    @paulie_d nah i’m not floating the paragraphs, and when i open the html file it just displays a white background, but all of the html and some of the css displays (pictures being rotated due to css etc.)


    @teear     i’ll give it another shot. i tried doing the ol’ (../images/sample.jpg) but that didn’t produce any results (ignore the sample.jpg)


    @shikkediel     cheers, i’ll have a look into that

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