Display Background-Image in CSS Under A Class

Question

I put the file under the "Styles" directory of my VS project, where my default sitemaster's CSS is located upon creation.

    body{
    background-image: url('..\Styles\Header.jpg');
    }

How can I use this properly to display the image in the background using external CSS?

Sohail Ali · Accepted Answer · 2014-02-24 04:51:02Z

1

try this in your css

body{
     background-image: url('~/Styles/Header.jpg');
}

or

 body{
         background-image: url('../Styles/Header.jpg');
    }

if your image is stored in Style forlder you can retrive by this code

answered Feb 24, 2014 at 4:51

Sohail Ali

4682 silver badges12 bronze badges

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

1 Comment

user3247075 Over a year ago

The first choice worked for me. For still some odd reason even with hard-tried research, not all of these codes work perfectly for everyone. I'm still not sure why. :( Anyhow thanks everyone!

Amit · Accepted Answer · 2014-02-24 04:53:15Z

1

Try this it works for me

 background-image: url(..\Styles\Header.jpg);

don't use single quote inside brackets.

answered Feb 24, 2014 at 4:53

Amit

15.4k8 gold badges49 silver badges69 bronze badges

2 Comments

Kheema Pandey Over a year ago

Amit, can you please explain why not use single "quotes"

Amit Over a year ago

@KheemaPandey I don't know but I face same problem and resolved after removing the single quote and one more important point it works on all browsers.

Amarnath Balasubramanian · Accepted Answer · 2014-02-24 05:01:01Z

1

HTML

<html>
<head>

<title> Your page Name </title>
<link rel="stylesheet" type="text/css" href="yourcssresourcefile">
</head>

<body>
</body>

</html>

CSS

   body{
    background-image: url('http://static3.businessinsider.com/image/52a0bbfd6bb3f7961363819e/the-most-amazing-satellite-images-of-the-year.jpg');
    }

Fiddle

Result

answered Feb 24, 2014 at 5:01

Amarnath Balasubramanian

9,5028 gold badges38 silver badges62 bronze badges

Comments

Baqer Naqvi · Accepted Answer · 2014-02-24 05:16:16Z

1

There are two approaches to do it;

when you are trying to access your resource (image) with relative path:

body{
         background-image: url('../Styles/Header.jpg');
    }

when you are trying to access you resource (image) with absolute path :

body{
     background-image: url('~/Styles/Header.jpg');
}

answered Feb 24, 2014 at 5:16

Baqer Naqvi

6,5703 gold badges54 silver badges71 bronze badges

Collectives™ on Stack Overflow

Display Background-Image in CSS Under A Class

4 Answers 4

1 Comment

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related