/    Sign up×
Community /Pin to ProfileBookmark

CSS background-image not working.

This is frustrating. I am messing around learning HTML and CSS and can not get the background image to work. I have made a folder on my desktop called “test”. created an index.html and style.css and put those in the folder accompanied by a background image from google. its is 1920×1200. These are all in the same test folder.
I have tried adding .jpg at the end but still no luck.
Here is my HTML and CSS code, both created with notepad++.
Please help!
What am i doing wrong?

///HTML CODE///
<!DOCTYPE html>
<html>
<head>
<title>JDM</title>
<link href=”style.css” rel=”stylesheet” type=”text/css”>
</head>

<body>

HELP!

</body>
</html>

and my ///CSS code///
/* [url]http://meyerweb.com/eric/tools/css/reset/[/url]
v2.0 | 20110126
License: none (public domain)
*
/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;

}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}s
body {

background-image:url(“background”); <——— have also tried (“background.jpg”)———->
background-repeat:no-repeat;
background-attachment:fixed;
background-size:cover;
line-height: 1;

}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: ”;
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
table
{
border-spacing: 5px;
}
#text
{
color:green;

Thank you for your help. I really am stuck!
-JD

to post a comment
CSS

4 Comments(s)

Copy linkTweet thisAlerts:
@rtretheweyOct 30.2013 — The 'url' parameter requires an actual URL. It can use relative or absolute addressing (ie. "http://www.example.com/some-dir/some-file.png"). If the background image didn't appear then either (a) the <link> tag isn't loading your stylesheet at all, (b) the URL in the background-image rule is incorrect, or (c) the image file doesn't exist at that address. So, if your stylesheet is set to:
<i>
</i>body {
background-image:url("background.jpg");
background-repeat:no-repeat;
background-attachment:fixed;
background-size:cover;
line-height: 1;
}

your image file "background.png" must reside on the server in the same directory as your "style.css" stylesheet file.

Just keep plugging away at those three potential issues and you'll fix it.
Copy linkTweet thisAlerts:
@jdeprattiauthorOct 30.2013 — Little confused. Thank you for your reply.

So I took the pictures and saved image as jpg. under "background.jpg in the same folder as my index.html.

you said background.png? png got me confused in your reply. did you mistype?

the url should go to my folder on my desktop shouldnt it?
Copy linkTweet thisAlerts:
@jdeprattiauthorOct 30.2013 — ok. even when i put in a real url

background-image:url("http://&#1082;&#1072;&#1088;&#1090;&#1080;&#1085;&#1082;&#1080;.cc/img/4/8/7/%D0%A7%D1%91%D1%80%D0%BD%D1%8B%D0%B9,%20%D1%82%D0%B5%D0%BA%D1%81%D1%82%D1%83%D1%80%D0%B0,%20%D0%BE%D0%B1%D0%BE%D0%B8,%20%D1%84%D0%BE%D0%BD,%201920x1200.jpg");

it still not not work.

but im sure of my style.css is linked because my reset is working correctly.
Copy linkTweet thisAlerts:
@Kevin2Oct 30.2013 — [CODE]article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}s[/CODE]


The last "s" is a stray character. Browsers combine this with the next characters (line returns don't count). "sbody" is not an element so all of your CSS instructions for "body" are getting ignored. Delete the "s" and make absolutely sure the file name for your background image is entered correctly, with the file extension!

Good luck,

Kevin
×

Success!

Help @jdepratti spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.2,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...