Image background not loading with CSS

Question

Okay I can't comment on any other questions that's why I am posting a new question.

I've tried all solutions suggested in this answer, this as well.

#head {
    text-align: center;
    font-family: roboto;
}

body, html {
    height: 100%;
}

.parallax {

    background-image: url('.../pics/parallax.jpg');

    height: 100%; 

    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

  <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/animate.css">
    <link rel="stylesheet" href="css/text.css">
    <script src="scripts/jquery-3.1.0.min.js"></script>
    <script src="scripts/jquery.animate-color.js"></script>
    <script src="scripts/custom_scripts.js"></script>
    <title>Yadullah.me</title>
    </head>
    <body>
    <h1 id="head"> Hi there!</h1>
    
    </body>
    </html>

Pretty simple right? But for some reason the background image just refuses to show up.
I have tried with my CSS, HTML, and image in the same folder with no success. Tried in different sub-directories, no success.

I have checked file name, extension and all of that stuff. Tried without quotes and what not. Tried different images even. Tried removing all other CSS files as well, nothing works.

To elaborate on GCyrillus's comment, `url('.../pics/parallax.jpg');` should be `url('../pics/parallax.jpg');` — Tyler Roper, Dec 15 '16 at 19:28
@YaddyVirus Tell us a bit more about your file structure. Where is your CSS file in relation to the image you're trying to retrieve? — Tyler Roper, Dec 15 '16 at 20:47
@Santi I have a folder on my f: drive by the name of Yadullah.me, that folder has 3 sub folders namely, css, scripts and pics. The html is in the root folder (i.e Yadullah.me folder) — , Dec 15 '16 at 21:34
And I assume that the `css` is in the `css` folder. When you go to console, are you getting any errors? Any 404's? — Tyler Roper, Dec 15 '16 at 21:37
@Santi no not at all. The CSS works just fine except for this error. — , Dec 16 '16 at 06:44

score 3 · Answer 1 · answered Dec 15 '16 at 19:29

3

You have a few too many stops in your style property. Your css should look like this:

.parallax {
    background-image: url('../pics/parallax.jpg');
    ...
}

answered Dec 15 '16 at 19:29

Bryant Makes Programs

1,493
2
17
39

Just to rule out the obvious, what is the name of your css file? And what folder is it located in? – Bryant Makes Programs Dec 15 '16 at 20:11
it is located in a folder named css. The file's name is text.css – Dec 15 '16 at 21:35

score 0 · Answer 2 · answered Dec 15 '16 at 19:32

#head {
    text-align: center;
    font-family: roboto;
}

body, html {
    height: 100%;
}

.parallax {

    background-image: url('.../pics/parallax.jpg'); // In Here try put absolute URL or change .../ in ../

    height: 100%; 
width:100%; //and try add width
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

score 0 · Answer 3 · answered Dec 15 '16 at 20:53

You can try add base tag for example like this 

<!doctype html>
    <html>
    <head>
    <base href="http://YourSite.com/"> 
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/animate.css">
    <link rel="stylesheet" href="css/text.css">
    <script src="scripts/jquery-3.1.0.min.js"></script>
    <script src="scripts/jquery.animate-color.js"></script>
    <script src="scripts/custom_scripts.js"></script>
    <title>Yadullah.me</title>
    </head>
    <body>
    <h1 id="head"> Hi there!</h1>

    </body>
    </html>

Image background not loading with CSS

3 Answers3