Page 1 of 2
Background image
Posted: Tue Nov 04, 2025 1:40 pm
by RAC
Hello all, I am trying to get a background image to show with no success.
The image has been uploaded to the images folder.
I copied the below user.css file from my old oscommerce site to the override/static folder for the image to show, along with a change in font, the font seems to work fine but the image does not. Any ideas
body {
background-image: url("dir/images/background.png");
}
body {
font-family: "Comic Sans MS", Verdana, "Times New Roman", Georgia, Serif;
}
p {
font-size: 14px;
}
Re: Background image
Posted: Tue Nov 04, 2025 3:05 pm
by burt
The CSS file is located at; /templates/override/static/user.css
Therefore any reference inside that CSS file would ref /static/
In that file you have background-image: url("dir/images/background.png");
Thus, I believe that this would need an image located at;
/templates/override/static/dir/images/background.png
--
To use an image from the standard /images/ directory, change the CSS to;
../../../images/background.png
--
../ means down a `folder`.
So from /templates/override/static/
../ - you are now in override
../ - you are now in templates
../ - you are now in `root`
images/ you are now in images
Re: Background image
Posted: Fri Nov 07, 2025 1:51 pm
by RAC
Hello Burt,
Sorry for the slow reply, but this has had me scratching my head.
Just for clarity, the background image is my own 75kb png image.
How I initially had it set up, the font had changed but the image background.png did not work.
Now following your instructions the image still does not work, the font works in product descriptions, but not the titles, or information links.
Re: Background image
Posted: Fri Nov 07, 2025 3:08 pm
by 14Steve14
Hi
This may be different in later versions but in 1.0.9.0 this works.
Save your image in the images folder
In your override css file try adding the following, which can be adjusted if required
Code: Select all
.{
background-image: url('/images/your image.jpg');
background-repeat: no-repeat;
background-position: center;
position: relative;
}
Then create a copy of your \templates\override\includes\components\header.php in your override components folder and change
Code: Select all
<div class="row">
<?= $Template->get_content('header') ?>
</div>
to
Code: Select all
<div class="bgImgCenter row">
<?= $Template->get_content('header') ?>
</div>
Doing it that way I have an image of a train fully behind all the header as per the attached image on my test site
Re: Background image
Posted: Sun Nov 09, 2025 5:19 am
by RAC
Hi Steve,
I have my image repeating throughout.
How would I achieve this?
Re: Background image
Posted: Tue Nov 25, 2025 1:32 pm
by RAC
OK, so the font has been sorted, this was done by installing summernote WYSIWYG in the admin.
However no matter how I attempt to show this background image, nothing seems to work.
Any other ideas?
Re: Background image
Posted: Tue Nov 25, 2025 2:00 pm
by burt
I can say with near-certainty that your bg image is probably not located at the place where the CSS says it ought to be.
Sharing a link to your site might help someone to diagnose further for you.
Re: Background image
Posted: Tue Nov 25, 2025 2:40 pm
by RAC
I expect you are right!!! I can't seem to see the wood for the trees!
Site link :
https://development.retro-antiques-curi ... /index.php
templates/override/static/user.css
/* user.css ----------------------------------------------------------------- */
body {
background-image: url("dir/images/background.png");
}
Re: Background image
Posted: Tue Nov 25, 2025 3:29 pm
by burt
https://development.retro-antiques-curi ... /index.php
says the CSS is at;
https://development.retro-antiques-curi ... c/user.css
says the bg image is at;
dir/images/background.png
--
Therefore the image file needs to be called background.png
and located at
Code: Select all
https://development.retro-antiques-curios.co.uk/dir/templates/override/static/dir/images/background.png
--
Whereas you have saved it at;
Code: Select all
https://development.retro-antiques-curios.co.uk/dir/images/background.png
--
In as plain english as I can...
copy this file:
/dir/images/background.png
to:
/dir/templates/override/static/dir/images/background.png
OR
add
to the CSS part that calls the bg image.
Do one or the other, not both. If ../../ does not work, add another ../
Remember to hard refresh your browser in between changes to ensure it picks up the CSS data.
Re: Background image
Posted: Tue Nov 25, 2025 9:50 pm
by Omar_one
you can try it like this
Code: Select all
body {
background-image: url("https://development.retro-antiques-curios.co.uk/dir/images/background.png");
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
}