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


Tags: css,localhost,xampp,background-image

Problem :

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!



Solution :

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);

    CSS Howto..

    How to make transparent arrow? [duplicate]

    How to have multiple borders on div using css

    jquery mobile data-filter css styling--how to?

    How to correctly add nested divs

    How to put padding on SPAN only when not empty

    How to get an li to expand to fit thumbnail content?

    How to open a bootstrap modal when checked a chec-box (when a tick is placed on a check box)

    How to conditionally adjust paddings using css only?

    How to remove
      unordered list's last
    • list item's border using css without changing anything in HTML code?

    How can i override css property

    How to put a ribbon image on another image with css?

    How to give different content to every td in the table

    How to transition overlay menu on clicking button

    How to call css into div class inner div class? [closed]

    php- How to strip CSS in the text

    How to replace non-existing images with a default one in css?

    How to use CSS to control the style of an HTML unordered list?

    how to add class with animation?

    How to use bootstrap on Jquery easy ui [closed]

    How do I keep a fixed header on top if there's a small strip on top of it?

    CSS Sprites - How to leave Hover button in depressed state

    How to assign CSS to images which have specific extension, height and width?

    CSS - How to pad an elements width by 50% of itself?

    how to load different css files with different screen sizes?

    How to force CSS @media style from JS regardless of screen size?

    How to center list

    How to center a navbar

    how do I add equal gap on each side of the text with css?

    How do I align my radio button with associated text?

    How to wrap text in css