Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Background image not working Css

    Hi, This is my first post here! I am stuck with some CSS, I am trying to link an image to my stylesheet but it does not work unless it is in the style sheet folder bearing in mind that the image is in a diffrent folder. My folder structure is:
    - As > Css > style.css
    - As > images > banner.jpg

    when I do <img src="..\images\banner.jpg"> the image works perfectly fine, when I put that into my css nothing comes up:
    background-image:url('..\images\banner.jpg');

    tried a lot of diffrent things such as:
    background-image:url('\images\banner.jpg');
    background-image:url('..\images\banner.jpg');
    background-image:url('..\..\images\banner.jpg');

    I'd be very grateful if someone is willing to help me fix my issue!
    Thanks!!!
    Last edited by Yaz1994; 11-09-2012 at 03:05 AM.

  • #2
    New Coder
    Join Date
    Jun 2012
    Location
    Burnley, Lancashire UK
    Posts
    12
    Thanks
    0
    Thanked 3 Times in 3 Posts
    try

    background-image:url('images/banner.jpg');

  • #3
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,927
    Thanks
    6
    Thanked 1,041 Times in 1,014 Posts
    If your directory structure looks like this:
    Code:
    /css
      style.css
    /images
      banner.jpg
    page.html
    … i. e. the HTML file is at the same level as the directories, your relative file paths must look like this:
    Code:
    <img src="images/banner.png" …>
    
    or
    
    background-image: url(../images/banner.jpg);
    Note the forward slashes.

  • #4
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Thanks

    Hmm, the folder structure is
    As> css > style.css
    As> images> banner.jpg
    As > html > index.htm

    + this is not on a server this is on my computer but none of them work :/ anything else?

  • #5
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    the urls you are using are nto working becuase you are jsut viewing the page from your web broswer without a server, so you will have to use local file links instead Im nto even sure if this will work in css but you can try :



    background-image: url('file://c:/localfoldertofiles/images/banner.jpg');

    ( honestly you should get a test server or a temporary site to post your code on because its not going to look and react how it should without the support of a web server and when you finally have to upload your work to a server, none of the links will work)

  • #6
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Or install xampp on your PC.

  • #7
    vjm
    vjm is offline
    New Coder
    Join Date
    Nov 2012
    Location
    PH
    Posts
    16
    Thanks
    1
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by Yaz1994 View Post
    Hmm, the folder structure is
    As> css > style.css
    As> images> banner.jpg
    As > html > index.htm

    + this is not on a server this is on my computer but none of them work :/ anything else?


    I see that all your files are in the folder named "As" and inside it are the folders named css, images & html. The file "style.css" is inside the css folder, then the "banner.jpg" file is inside the images folder and lastly the "index.htm" file is inside the html folder. If this is correct, I suggest this:

    *In the HTML file, use this href where you link your css file:
    href="../css/style.css"

    *In the CSS file, use this in your background-image tag (always use forward slashes):
    url(../images/banner.jpg)

    Note: You don't need to install xampp. As long as you're not using server-side language for your web pages.
    Last edited by vjm; 11-09-2012 at 06:20 PM. Reason: Grammar

  • Users who have thanked vjm for this post:

    Yaz1994 (11-10-2012)

  • #8
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Thanks

    Thanks everyone for having a go at helping me! VJM, I am very grateful for you solving my problem! Thank you and thank everyone that contributed! Really appreciate it!

  • #9
    Regular Coder
    Join Date
    Jul 2008
    Posts
    157
    Thanks
    9
    Thanked 13 Times in 13 Posts

    slant?

    What am I missing?

    Why are your slashes \ slanting backward,
    Code:
    <img src="..\images\banner.jpg">
    instead of forward / ?
    Code:
    <img src="jmWEB/floral/57PurinaPoster.jpg"  />
    Basically, in HTML, you use ../folder to "dig out of a nested folder" so, if its nested two folders down, you use two ../../folder.

  • #10
    vjm
    vjm is offline
    New Coder
    Join Date
    Nov 2012
    Location
    PH
    Posts
    16
    Thanks
    1
    Thanked 2 Times in 2 Posts
    You're welcome Yaz1994! I'm happy that I helped you with your problem.


  •  

    Posting Permissions

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