Sign in Register
Go to solution
Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Alistair Jenkins 92 posts 315 karma points
    Sep 02, 2017 @ 10:12
    Alistair Jenkins
    0

    Div background-image not displaying

    Hi,

    Does anyone have any idea why:

    <div id="container" style="backround-image: url("@CurrentPage.bannerImage.Url");">

    is not displaying an image, when:

        <div id="container">
   <img src="@CurrentPage.bannerImage.Url">
   </div>

    does work? Div is a flexbox, if that helps.

    Thanks, Alistair

    Copy Link
  • Chriztian Steinmeier 2800 posts 8791 karma points MVP 8x admin c-trib
    Sep 02, 2017 @ 19:53
    Chriztian Steinmeier
    0

    Hi Alistair,

    It might just be because of the typo - you have backround-image instead of background-image (missing a 'g').

    If that's not the case, let us know and we'll see what we can do to help you debug it...

    /Chriztian

    Copy Link
  • Alistair Jenkins 92 posts 315 karma points
    Sep 02, 2017 @ 20:34
    Alistair Jenkins
    0

    Hi Chriztian,

    The embarrassing typo is actually in my original code, I looked at it enough times but somehow missed it. However, correcting it didn't help. Still no image.

    When you look at the source code of the page using the Chrome browser, you can see that the url is being inserted:

    <div id="container" style="background-image: url("/media/1032/houses.jpeg");">

    but still no image on the page.

    Cheers, Alistair.

    Copy Link
  • Bo Jacobsen 610 posts 2409 karma points
    Sep 02, 2017 @ 20:57
    Bo Jacobsen
    100

    Hi Alistar.

    try

    <div id="container" style="background-image: url('/media/1032/houses.jpeg');"></div>
    Copy Link
  • Chriztian Steinmeier 2800 posts 8791 karma points MVP 8x admin c-trib
    Sep 02, 2017 @ 21:21
    Chriztian Steinmeier
    0

    Alright,

    1. First, try loading the URL directly to see if the image exists and is publicly accessible.
    2. Next, inspect the <div> and see if it has a height - you say it's a flexbox - so you might need to set height (or min-height) if there's no content in it.

    /Chriztian

    Copy Link
  • Alistair Jenkins 92 posts 315 karma points
    Sep 03, 2017 @ 09:08
    Alistair Jenkins
    0

    Hi,

    Bo - thank-you, switching the quotes for apostrophes worked. I had tried that, but of course I now realise that the last time I tried it I still had the 'backround' typo so it didn't work. Doh.

    Chriztian, thanks for your help too.

    Regards, Alistair

    Copy Link
Please Sign in or register to post replies

Write your reply to:

Draft