dcsimg
Results 1 to 28 of 28

Thread: Background image won't show?

  1. #1

    Thread Starter
    PowerPoster
    Join Date
    Jan 2004
    Location
    Southern California
    Posts
    4,857

    Background image won't show?

    I have a webpage in which I use a background-image. Problem is that it's not showing and I've done everything I know to do and it still doesn't appear. Below is my code which seems to be obvious. But I'm definitely missing something. I've tried clearing the cache. The webpage uses PHP and I'm using Brackets as my editor.

    The location of the image has been triple-checked.
    Code:
    body {
        width: 100%;
        height: 100%;
        padding: 0;
        background-image: url("images/marble-2362262_640.jpg");
        background-repeat: no-repeat;
        background-size: cover;
        font-family: Arial, Helvetica;
    }
    HTML code.
    Code:
            <link rel="stylesheet" href="css/styles2.css">
    Thanks,
    Blake

  2. #2
    March 2015 Winner kfcSmitty's Avatar
    Join Date
    May 2005
    Location
    Kingston, Ontario
    Posts
    2,134

    Re: Background image won't show?

    That works with a basic page for me in IE 11, Chrome, and Firefox.

    If you open the network tab in your browser and reload the page, is it giving a 404 for anything?

  3. #3

    Thread Starter
    PowerPoster
    Join Date
    Jan 2004
    Location
    Southern California
    Posts
    4,857

    Re: Background image won't show?

    Network Tab? I'm using Chrome and I don't see what you are referring to...
    Blake

  4. #4
    MS SQL Powerposter szlamany's Avatar
    Join Date
    Mar 2004
    Location
    CT
    Posts
    17,762

    Re: Background image won't show?

    Using the debugger in the browser itself should show you the issue - error on file path or some CSS issue that's causing the problem.

    *** Read the sticky in the DB forum about how to get your question answered quickly!! ***

    Please remember to rate posts! Rate any post you find helpful - even in old threads! Use the link to the left - "Rate this Post".

    Some Informative Links:
    [ SQL Rules to Live By ] [ Reserved SQL keywords ] [ When to use INDEX HINTS! ] [ Passing Multi-item Parameters to STORED PROCEDURES ]
    [ Solution to non-domain Windows Authentication ] [ Crazy things we do to shrink log files ] [ SQL 2005 Features ] [ Loading Pictures from DB ]

    MS MVP 2006, 2007, 2008

  5. #5

    Thread Starter
    PowerPoster
    Join Date
    Jan 2004
    Location
    Southern California
    Posts
    4,857

    Re: Background image won't show?

    Yes...it did actually but it wasn't on CSS. It was on a <script> tag at the bottom of my HTML. It looked just like this: <script> and nothing else. I inserted "type=text/javascript" and the 404 went away. However, my background-image still isn't showing up.
    Blake

  6. #6
    March 2015 Winner kfcSmitty's Avatar
    Join Date
    May 2005
    Location
    Kingston, Ontario
    Posts
    2,134

    Re: Background image won't show?

    If you right click the page and select "Inspect"and then open the "Elements" tab and click on the "body" tag, does it show that it is loading your background image?

  7. #7

    Thread Starter
    PowerPoster
    Join Date
    Jan 2004
    Location
    Southern California
    Posts
    4,857

    Re: Background image won't show?

    No...I don't see anything in the <body> tag that should be loading the image but that style is in css/styles2.css file location. See below.

    Code:
        <head lang="en">
            <title>Test Page</title>
            <meta name="description" content="Some meaningful content describing the site.">
    
            <link rel="stylesheet" href="css/styles2.css">    
            <script type="text/javascript" src="scripts/resume_scripts.js"></script>
        </head>
    Blake

  8. #8

    Thread Starter
    PowerPoster
    Join Date
    Jan 2004
    Location
    Southern California
    Posts
    4,857

    Re: Background image won't show?

    No...I don't see anything in the <body> tag that should be loading the image but that style is in css/styles2.css file location. See below.

    Code:
        <head lang="en">
            <title>Test Page</title>
            <meta name="description" content="Some meaningful content describing the site.">
    
            <link rel="stylesheet" href="css/styles2.css">    
            <script type="text/javascript" src="scripts/resume_scripts.js"></script>
        </head>
    Blake

  9. #9
    PowerPoster techgnome's Avatar
    Join Date
    May 2002
    Posts
    31,829

    Re: Background image won't show?

    It wouldn't be in the body... it's in the css... do the rest of the styles show up?

    eeeeh.... try this:
    Code:
    body {
        width: 100%;
        height: 100%;
        padding: 0;
        background-image: url("/images/marble-2362262_640.jpg");
        background-repeat: no-repeat;
        background-size: cover;
        font-family: Arial, Helvetica;
    }
    Put a leading / on the front of the URIL for your image... it might be that it's trying to find it relative to the CSS file, which is in a CSS sub folder... that'll force it back to the images folder in the root.

    -tg
    * I don't respond to private (PM) requests for help. It's not conducive to the general learning of others.*
    * I also don't respond to friend requests. Save a few bits and don't bother. I'll just end up rejecting anyways.*
    * How to get EFFECTIVE help: The Hitchhiker's Guide to Getting Help at VBF - Removing eels from your hovercraft *
    * How to Use Parameters * Create Disconnected ADO Recordset Clones * Set your VB6 ActiveX Compatibility * Get rid of those pesky VB Line Numbers * I swear I saved my data, where'd it run off to??? *

  10. #10

    Thread Starter
    PowerPoster
    Join Date
    Jan 2004
    Location
    Southern California
    Posts
    4,857

    Re: Background image won't show?

    Tech,

    I already tried what your suggesting and that did not work. As to your second question...not all of the styles are working...which lead me to think that there was a syntax error in one or more of the styles. I went through each style with a fine tooth comb and couldn't find anything.
    Blake

  11. #11
    PowerPoster techgnome's Avatar
    Join Date
    May 2002
    Posts
    31,829

    Re: Background image won't show?

    At that point, I'd disable all styles, and add them back in one at a time, or in small chunks, making sure they work, until they don't...

    Not sure what else to suggest... debugging css can suck sometimes.

    -tg
    * I don't respond to private (PM) requests for help. It's not conducive to the general learning of others.*
    * I also don't respond to friend requests. Save a few bits and don't bother. I'll just end up rejecting anyways.*
    * How to get EFFECTIVE help: The Hitchhiker's Guide to Getting Help at VBF - Removing eels from your hovercraft *
    * How to Use Parameters * Create Disconnected ADO Recordset Clones * Set your VB6 ActiveX Compatibility * Get rid of those pesky VB Line Numbers * I swear I saved my data, where'd it run off to??? *

  12. #12

    Thread Starter
    PowerPoster
    Join Date
    Jan 2004
    Location
    Southern California
    Posts
    4,857

    Re: Background image won't show?

    Yeah, that's kinda what I was thinking of doing next!
    Blake

  13. #13
    March 2015 Winner kfcSmitty's Avatar
    Join Date
    May 2005
    Location
    Kingston, Ontario
    Posts
    2,134

    Re: Background image won't show?

    I meant inspect the body element and check the styles via Chrome's developer tools.
    Name:  body styles.jpg
Views: 64
Size:  78.2 KB

    It will show you the styles actually being applied and if anything is overwriting your background.

  14. #14

    Thread Starter
    PowerPoster
    Join Date
    Jan 2004
    Location
    Southern California
    Posts
    4,857

    Re: Background image won't show?

    kfcSmitty,

    Based on what you image looks like my styles don't look like they're being loaded. I don't see anything like what your image represents. I don't see a list of styles. Yet, there are some styles still being applied. It really doesn't make sense to me.
    Blake

  15. #15

    Thread Starter
    PowerPoster
    Join Date
    Jan 2004
    Location
    Southern California
    Posts
    4,857

    Re: Background image won't show?

    kfcSmitty,

    Based on what you image looks like my styles don't look like they're being loaded. I don't see anything like what your image represents. I don't see a list of styles. Yet, there are some styles still being applied. It really doesn't make sense to me.
    Blake

  16. #16
    March 2015 Winner kfcSmitty's Avatar
    Join Date
    May 2005
    Location
    Kingston, Ontario
    Posts
    2,134

    Re: Background image won't show?

    If you open your CSS file via the browser, does it have the changes you expect? COuld be the CSS file is cached by the browser.

    If you open the full URL of the CSS file in the browser and it doesn't have your changes, try Ctrl + F5, or you can set developer tools to always load the page without cache as long as it is open.

  17. #17

    Thread Starter
    PowerPoster
    Join Date
    Jan 2004
    Location
    Southern California
    Posts
    4,857

    Re: Background image won't show?

    I've done CTRL+F5 several times. I'm not real savvy using the Chrome Developer tool. I'm sure if I knew it better, I would have figured this out by now. How can I set the page without cache in the developer tools?
    Blake

  18. #18
    Fanatic Member
    Join Date
    Dec 2014
    Location
    VB6 dinosaur land
    Posts
    900

    Re: Background image won't show?

    Quote Originally Posted by blakemckenna View Post
    Based on what you image looks like my styles don't look like they're being loaded. I don't see anything like what your image represents. I don't see a list of styles. Yet, there are some styles still being applied. It really doesn't make sense to me.
    Perhaps you should post a relevant image of what you do see.

    Anyway, are any errors reported in the Console tab (right of Elements tab)?

    If you drill down in the Sources tab (right of Console), do you find styles2.css listed and does it have the correct data shown?

  19. #19

    Thread Starter
    PowerPoster
    Join Date
    Jan 2004
    Location
    Southern California
    Posts
    4,857

    Re: Background image won't show?

    I still seem to getting the 404 error and it's on the background image file.

    One thing I just saw in the developer tools. I was in the "Sources" tab and it showed the file structure of my app under localhost. I have an "Images" subdirectory and the background image (marble-2362262_640.jpg) wasn't in the directory but when I check the directory through windows explorer...it's there! What does that mean?
    Blake

  20. #20
    Fanatic Member
    Join Date
    Dec 2014
    Location
    VB6 dinosaur land
    Posts
    900

    Re: Background image won't show?

    I would suspect your Images directory isn't on the proper level as tg alluded to in post #9. To remove any confusion perhaps you should reference the image by the absolute path for now instead of relative path as you have. Once you see the page looks like it should, then you can try to figure out the correct relative path for the image. You may need to have .. before the \ for example. Hard to say since we don't know what your directory structure looks like.

  21. #21
    Fanatic Member
    Join Date
    Dec 2014
    Location
    VB6 dinosaur land
    Posts
    900

    Re: Background image won't show?

    Trying to extrapolate your structure, using what you had in your OP, it would need to look like this:
    Code:
    test.html (or whatever you name this page)
     css
    --- styles2.css
    --- images
    ------ marble-2362262_640.jpg
    I'm betting that it really looks like this:
    Code:
    test.html (or whatever you name this page)
     css
    --- styles2.css
     images
    --- marble-2362262_640.jpg
    If that's true, either move the images folder under css or change the path to this
    background-image: url("../images/marble-2362262_640.jpg");
    Last edited by topshot; Sep 26th, 2018 at 12:23 PM.

  22. #22

    Thread Starter
    PowerPoster
    Join Date
    Jan 2004
    Location
    Southern California
    Posts
    4,857

    Re: Background image won't show?

    topshot,

    Your correct. That does show my background-image now. Thank you!
    Blake

  23. #23

    Thread Starter
    PowerPoster
    Join Date
    Jan 2004
    Location
    Southern California
    Posts
    4,857

    Re: Background image won't show?

    topshot,

    Your correct. That does show my background-image now. Thank you! But now I think the reason all of the styles aren't showing up is because of my iframe. Does my iframe have to access the same "styles2.css" file? If so, how do I do that?
    Blake

  24. #24

    Thread Starter
    PowerPoster
    Join Date
    Jan 2004
    Location
    Southern California
    Posts
    4,857

    Re: Background image won't show?

    This site is acting weird. My replies seem to be getting posted twice!
    Blake

  25. #25
    Fanatic Member
    Join Date
    Dec 2014
    Location
    VB6 dinosaur land
    Posts
    900

    Re: Background image won't show?

    Quote Originally Posted by blakemckenna View Post
    Does my iframe have to access the same "styles2.css" file? If so, how do I do that?
    Yes. It is just another HTML file so the same link tag you used in the original HTML file.

  26. #26

    Thread Starter
    PowerPoster
    Join Date
    Jan 2004
    Location
    Southern California
    Posts
    4,857

    Re: Background image won't show?

    Where do I put the <link> tag? Does it go in the pages that will be viewed in the IFrame?
    Blake

  27. #27
    Fanatic Member
    Join Date
    Dec 2014
    Location
    VB6 dinosaur land
    Posts
    900

    Re: Background image won't show?

    Yes. I have always treated pages in an iframe exactly like those that aren't so they are fully HTML compliant as if they were on their own.

  28. #28

    Thread Starter
    PowerPoster
    Join Date
    Jan 2004
    Location
    Southern California
    Posts
    4,857

    Re: Background image won't show?

    I actually did this before you sent this post and you are definitely right. Just need to iron out some things but things are starting to fall back into place!

    Thanks for your input!
    Blake

Posting Permissions

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



Featured


Click Here to Expand Forum to Full Width