Templates for Joomla! 4.x • Linking to an image from Media Folder in CSS

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.

Statistics: Posted by mowen10 — Tue Apr 23, 2024 11:22 am

---