Forums

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

Home Forums CSS Image background displays during preview, but not once uploaded to server

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #278109
    OblivionSkull21
    Participant

    Hey, I’m new to html and css. This project I’m working on is for a required class I’m in.

    Just a short summary of what the project is supposed to be:
    -Three full (100% height, 100% width) sections that each have their own background image.
    -Three subsections (25% height, 100%width) that proceed each full section, these just have lorem ipsum text.

    So, each full section is supposed to be completely filled by a background image.

    My css code for each of the background images looks like this:

    #home{
    background-image: url(../images/myimage.jpg);
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center;
    background-attachment: fixed;
    background-color: none;
    }

    Now this is absolutely fine. When I go preview the page (I’m using dreamweaver), the pictures pop up perfectly. No problem right?

    Well, that’s when I go to turn in the assignment… but first I need to check to make sure the page looks good on the actual server. So I upload it to my school’s server and type in the url…

    The page loads fine. But 2 of the 3 background images aren’t there. Only one of the background images successfully displays. The other two are just blank, white space.

    I’ve searched google for this problem, but it all seemed to be related to accessing the right files, blahblahblah, and that the images weren’t showing up in the PREVIEW. That’s not the issue.

    My images ARE showing up in the preview, but NOT the final, online product in my school’s server. I don’t know how to solve this and I know if I don’t fix it I’m going to get points deducted. Please help!

    #278120
    Beverleyh
    Participant

    Tip: Check letter-case in paths, filenames and extensions ;)

    The reason — and I know I fell foul of this too when I uploaded my first website to a real server — is that most new devs start developing on a Windows computer, and Windows isn’t a case-sensitive environment. But, here’s the kicker, most (particularly budget) web hosts don’t use Windows for their server environments… they use Unix because, amongst other reasons, it’s free… and Unix is case-sensitive. So those times when your image is called “Picture.JPG” but you’ve typed “picture.jpg” in your code, it’s going to work fine locally on your home computer, but fall over on a web host’s server, where Unix is most likely being used as the OS.

    So, check all paths, filenames and extensions of all your resources to make sure that your code matches them exactly. Also, try to get in the habit of only using lower-case if you can cos it gives you one less thing to worry about!

    This might not be the answer to your question, but it’s a lesson that will most likely help you at some point in your web development.

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