CSS with relative URL to background image?

Question

I have a file structure of:

home.html
img/bg_damask1.jpg
css/style.css

When I set my body background image I can't get it to load. I've tried:

background-image: url('../img/bg_damask1.jpg');
background-image: url('/img/bg_damask1.jpg');
background-image: url('img/bg_damask1.jpg');

But none are working. How do I get my css to reference the background image?

ETA: In browser dev tools I see that no matter what file path I put in, the browser is only referencing 'bg_damask1.jpg' without the file path. If I edit it in dev tools the image shows up using option #1. Now I'm stumped as to what's causing the breakdown.

The first method should work. Check in developer tools of your browser if any other rule overwrite this one. — Sotiris
– Sotiris, Commented Nov 4, 2015 at 0:52

ZgrKARALAR · Accepted Answer · 2015-11-04 01:03:36Z

1

If you try to use for this body.

Your css must be like this

body {
    background-image: url(../img/bg_damsk1.jpg);
}

Also for you example is

body {
	background-image: url(http://www.radioviva.fm.br/images/backgrounds/bg-squares-3d.jpg);
}

<!DOCTYPE html>
<html>
<head>
	<title>Example</title>
</head>
<body>

</body>
</html>

That example you must just change url path to yours.

answered Nov 4, 2015 at 1:03

ZgrKARALAR

4999 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

paradizzee · Accepted Answer · 2015-11-04 00:54:39Z

0

Third option should be working, check the source code in your webbrowser and check if the image is actually found. If not try reuploading the image, renaming it or placing it in another folder.

answered Nov 4, 2015 at 0:54

paradizzee

1111 silver badge9 bronze badges

1 Comment

alexwc_ Over a year ago

if the OP's CSS is in style.css, the third option won't work.

Collectives™ on Stack Overflow

CSS with relative URL to background image?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related