Linking to an image from Media Folder in CSS

[mowen10]

Hi, I have managed to migrate my site from 3.9 to 4.4 and I am now trying to get my site up and running using the Cassiopeia template. I have my articles, modules with there positions and I have changed these over to the new positions and these are all showing up. The issue I am having is with images within my media folder and a banner that I have.

I have added a user.css file and within there for example I have the following which used to work in my old site:

#mainbox {
float: left;
position: relative;
background: url(../images/box.png) no-repeat;
height: 249px;
max-width: 100%;
}

When I refresh my site, the image does not load, but I can see the URL of the image which is incorrect and this shows:

http://localhost/mynewsite/media/templa ... es/box.png

The URL of the image in the Media Folder is:

http://localhost/mynewsite/images/box.png

I tried changing the URL in the CSS to:

background: url(./images/box.png) no-repeat;
background: url(/images/box.png) no-repeat;

but none of this works.

Can somebody please advise on how I should be writing this? Thanks.

[Per Yngve Berg]

You have traverse up several steps

../../../images/box.png

[mowen10]

Thanks Per Yngve Berg, the problem is the media/templates/ when I check the URL for the image in the media folder just shows:

http://localhost/mynewsite/images/box.jpg

but when I set what you have mentioned:

http://localhost/mynewsite/media/templa ... es/box.png

[Pavel-ww]

Hi. If the image is located here http://localhost/mynewsite/images/box.jpg in the css should be url(/images/box.jpg).

If this does not work, provide a link to the site (upload on real hosting), because we can guess endlessly.

And by the way, I will assume that the reason may be in this httр://localhost/mynewsite/images...

Even on localhost, the site folder should have the appearance of a domain, for example mynewsite.loc

[mowen10]

Hi. If the image is located here http://localhost/mynewsite/images/box.jpg in the css should be url(/images/box.jpg).

If this does not work, provide a link to the site (upload on real hosting), because we can guess endlessly.

And by the way, I will assume that the reason may be in this httр://localhost/mynewsite/images...

Even on localhost, the site folder should have the appearance of a domain, for example mynewsite.loc

Hi Pavel, thanks for your help, whilst messing around with the code I have managed to sort the issue.

I needed to write it like this:

/mynewsite/images/box.jpg

and that fixed it. Can close this post now, thank you so much.

[Pavel-ww]

I needed to write it like this:

/mynewsite/images/box.jpg

Not fixed. This means that your localhost is incorrectly configured, since after transferring to real hosting you will need to change it back to
/images/box.jpg.

[Per Yngve Berg]

Create a new Virtual Host in your web server.