How can I use a background image with Protostar?

[sinister7]

I am using the default protostar template and I want to use a background image in place of the blank space around the content container. Where would I be able to put this?

[AMurray]

I think you would specify the ''background" property in your user.css file. There's no template option to set the background image in Protostar (at least I don't believe there is)..

yThe image would go somewhere easy to remember, such as your "images" folder (upload with FTP or your the media manager).

Something like

Code: Select all

body {
   background-image: url("paper.gif");
   background-color: #cccccc;
}

You may have to include the full file path pointing to the image like "/images/your-pic.jpg".

Not sure why it would have background color as well but maybe if the images don't work (such as a a user turning off displaying images in the browser, it degrades 'gracefully' with a suitable background color and doesn't leave you with plain white in the absence of the image. The example #cccccc is a medium shade of grey, but change it to your liking. There are sites on the web that can give you the 'hex' code for the colors.

I think this is right, but someone else will correct me if I'm wrong.

You use the "user.css" file (create it if it doesn't exist) so the next joomla update doesn't overwrite it. You could put this in the template's template.css file, but the next core update will overwrite it and wipe-out your change.

For more on HTML and CSS tips for page background images, see https://www.w3schools.com/cssref/pr_bac ... -image.asp.

[venci]

Hi
In the JED there is a plugin with which you can put a background image of the body.
https://extensions.joomla.org/extension ... -image-sv/
Hope this helps

[sinister7]

I think you would specify the ''background" property in your user.css file. There's no template option to set the background image in Protostar (at least I don't believe there is)..

yThe image would go somewhere easy to remember, such as your "images" folder (upload with FTP or your the media manager).

Something like

Code: Select all

body {
   background-image: url("paper.gif");
   background-color: #cccccc;
}

You may have to include the full file path pointing to the image like "/images/your-pic.jpg".

Not sure why it would have background color as well but maybe if the images don't work (such as a a user turning off displaying images in the browser, it degrades 'gracefully' with a suitable background color and doesn't leave you with plain white in the absence of the image. The example #cccccc is a medium shade of grey, but change it to your liking. There are sites on the web that can give you the 'hex' code for the colors.

I think this is right, but someone else will correct me if I'm wrong.

You use the "user.css" file (create it if it doesn't exist) so the next joomla update doesn't overwrite it. You could put this in the template's template.css file, but the next core update will overwrite it and wipe-out your change.

For more on HTML and CSS tips for page background images, see https://www.w3schools.com/cssref/pr_bac ... -image.asp.

Hi, thanks for replying. I created the user.css file and put the code in as you said but nothing changes. Here is the code I used:

body {
background-image: url("/images/WEBSITEWALLPAPER.jpeg");
}

This is the name of the image in the media. At the moment, the background is green which I set in the template style. I added the background colour property you provided but it didn't change to grey. I'm not sure why it isn't linking and making changes.

[sinister7]

Hi
In the JED there is a plugin with which you can put a background image of the body.
https://extensions.joomla.org/extension ... -image-sv/
Hope this helps

Hi, thanks for replying. I installed the extension that you provided and enabled it but I'm not sure where it is. I assumed it would appear in the template style but it isn't there. Where would I find the customisation setup?

[Per Yngve Berg]

It's listed as a Plugin. I will suggest Plugin Manager.

Files are case sensitive in Linux. Are the file name in all upper-case with a lower-case type?

Use the browser's diagnostic tools to investigate.

[venci]

Hi,

Hi, thanks for replying. I installed the extension that you provided and enabled it but I'm not sure where it is. I assumed it would appear in the template style but it isn't there. Where would I find the customisation setup?

As you said Per Yngve Berg, this is a plugin. Its settings are managed by the plugin manager.
More about the plugins you can read here https://docs.joomla.org/Help38:Extensio ... in_Manager

[sinister7]

It worked.

Using the plugin was inevitably more straightforward than the ineffective code.

Thanks a lot for your help.

[sinister7]

It definitely works, but on two of the pages of my website it disappears. Why is that and how can I fix it?

[venci]

Hi,
The code that AMurray suggested is not ineffective, you just need to know how to use it.
If you provide a link to a page that doesn't work, you might get a solution to the problem.
If you think this is a plugin problem, contact its developer.

[sinister7]

Hi,
The code that AMurray suggested is not ineffective, you just need to know how to use it.
If you provide a link to a page that doesn't work, you might get a solution to the problem.
If you think this is a plugin problem, contact its developer.

That's what I meant it probably didn't work because I didn't put it in right.


https://s6046788.scm.tees.ac.uk/joomla7

[venci]

I'm getting an error message when I try to see your site:
Unauthorized
This server could not verify that you are authorized to access the document requested. Either you supplied the wrong credentials (e.g., bad password), or your browser doesn't understand how to supply the credentials required.

[sinister7]

I though that might happen. This website is for my university project. When I access it with this address it takes me to my website on this domain. When I add '/administrator' on the end, it allows me to access the administrator dashboard and edit my website. I don't think you can access it because it's using my university's source?

[venci]

hi,
Sorry, but I do not have access to your site.
Someone who has access can help.

[sinister7]

hi,
Sorry, but I do not have access to your site.
Someone who has access can help.

Oh ok.

[sinister7]

I will contact the developer.