Background image

[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;
}

[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

[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.

[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

[RAC]

Hi Steve,
I have my image repeating throughout.
How would I achieve this?

[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?

[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.

[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");
}

[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

Code: Select all

../../

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.

[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%;
}