More in this section

Forums / Developing with Sitefinity / Displaying Images from CSS File

Displaying Images from CSS File

5 posts, 0 answered
  1. Paul Dench
    Paul Dench avatar
    19 posts
    Registered:
    26 Oct 2009
    28 Oct 2009
    Link to this post
    I have a master page from an existing web site that includes multiple images that are controlled from the CSS file, and I can't get them to display in my pages. I know that I am using the correct CSS file, since if I make a change to the background color the preview of my pages shows that change. I have put the image files under an images directory in the folder for the theme I am using, and also in the images folder right beneath the site I created. In the CSS file, I have tried the paths "~/images", "/images", and "images" but none work for me. I know I'm missing something really basic here (this is my first attempt at Sitefinity) so I hope someone can point me in the right direction. Thanks. Paul
  2. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    29 Oct 2009
    Link to this post
    Hello Paul Dench,

    Thank you for using our services.

    Can you attache a screenshot of your solution folder structure, where the css file is located and where the image files are located, plus a sample line from your css file to let us see how you are mapping images? This way we will be able to tell you what is the appropriate way to map image paths.

    Regards,
    Radoslav Georgiev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  3. Paul Dench
    Paul Dench avatar
    19 posts
    Registered:
    26 Oct 2009
    29 Oct 2009
    Link to this post
    I've attached the screen shot; here are a couple lines from the CSS file:

    #header {background-imageurl(/images/headerBar.gif);width753px;height:   
    77px;positionrelative;top11px;margin-left9px;border0px solid   
    red;z-index:100;} <BR>.header1 {background-image:   
    url(/images/headerBar.gif);width753px;height77px;positionrelative;top:   
    11px;margin-left9px;border0px solid red;z-index:100;} <BR>.header2   
    {background-imageurl(/images/headerBar.gif);width753px;height:   
    77px;positionrelative;top11px;margin-left9px;border0px solid   
    red;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  
  4. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    29 Oct 2009
    Link to this post
    Hi Paul Dench,

    For images located in the images folder located in your theme ~/App_Themes/GL Advisor try using the following:
    background-image: url(images/headerBar.gif);

    For images located in ~/Images try using:
    background-image: url(../../images/headerBar.gif);

    Greetings,
    Radoslav Georgiev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  5. Paul Dench
    Paul Dench avatar
    19 posts
    Registered:
    26 Oct 2009
    30 Oct 2009
    Link to this post
    That worked! Thanks!
Register for webinar
5 posts, 0 answered