CODEWITHSUNDEEP
csslocalhostxamppbackground-image
Joel
Joel

Reputation: 2721

How to make CSS URL background images show up in localhost?

I just installed xampp and I brought one of my live sites into it to be able to start working from localhost.

So to view my site, I navigate to localhost/example.com

I noticed some issues with images when on my html, I had for example:

<img src="/new_pictures/05.jpg" alt="Central Market"/>

Image wouldn't show up, but then I removed the / and this works:

<img src="new_pictures/05.jpg" alt="Central Market"/>

I seem to have a similar problem with the CSS background image, but I can't get it to work-if I remove the / there, the image doesn't show up on the live site. How do I make the background image show up on localhost?

Example CSS (works in live site but not localhost):

.outeremailcontainer {
height:60px;
width: 275px;
background-image:url(/images/feather_email2.jpg);
text-align:center;
float:right;
position:relative;
z-index:1;
}

Thanks!

Upvotes: 7

Views: 42612

Answers (3)

user312650
user312650

Reputation:

You can try the base tag - supported in most popular browsers - and then supply paths relative to the href attribute of the base tag. Or make sure you supply correct paths relative to the CSS stylesheet

Upvotes: 1

Sarfraz
Sarfraz

Reputation: 382841

Try using ./ instead of / and make sure that you are specifying the correct path.

Upvotes: 0

Nick Craver
Nick Craver

Reputation: 630579

The image paths in your stylesheet should be where the image is relative to the stylesheet, for example if your .css file is in a directory like this on your site:

/css/styles.css

Your path should look like this (go up a directory, then into images)

background-image:url(../images/feather_email2.jpg);

Upvotes: 18

Related Questions