Background image for page or entire site

[Blackton]

I'm trying to figure out how to add a background image for the entire site, or at least for a single page, which will appear behind the content of the page. I found an option within the article editor for "Full article image" which I would imagine should do something like that, but it doesn't seem to do anything different than just inserting an image normally. Is there a way to do this within the admin panel, or do I need to edit some css file or something? I looked up online, but seemed to finding incorrect solutions. Thanks for any help!

[Per Yngve Berg]

That can be implemented in your Template.

[Blackton]

Is it just a file that I need to upload into one of the template folders, like how I did the favicon?

[ManuelVoileux]

Is it just a file that I need to upload into one of the template folders, like how I did the favicon?

Hello I would suggest to use UP! , action bg-image. See https://extensions.joomla.org/extension/up/
UP! is a free plugin, compatible J5 WITHOUT the retrocompat plugin. UP! features more than 150 actions. UP is called once, it calls only the action that you need, not the whole library.

Example : {up bg-image=photo.jpg} displays a background image. You can adjust the container, a block, a module, an article, the whole site. {up bg-slideshow... displays a series of scrolling images in the background of the site or one block , {up bg-video ... displays a [youtube] or local video in the site background or a block corner. See an example on https://voileux.org/

UP makes actions in your articles and customized modules to manipulate content dynamically. Add a shortcode in an article or a module with UP, action name and options.

For each action, the UP! website features a page with examples to copy & paste. Check the multilanguage UP! website https://up.lomart.fr/

[Pavel-ww]

Is it just a file that I need to upload into one of the template folders, like how I did the favicon?

Hi. If you are using Cassiopea template, this can only be done via CSS. It's quite simple. Upload your image to the site through the Joomla media manager, create user.css file following Cassiopea documentation, and write your code there.


Something like

Code: Select all

body {
    background-image: url(/images/YOUR_IMAGE.jpg);
    /* and ect*/
}

https://www.w3schools.com/cssref/pr_bac ... -image.php

[Blackton]

Is it just a file that I need to upload into one of the template folders, like how I did the favicon?

Hi. If you are using Cassiopea template, this can only be done via CSS. It's quite simple. Upload your image to the site through the Joomla media manager, create user.css file following Cassiopea documentation, and write your code there.


Something like

Code: Select all

body {
    background-image: url(/images/YOUR_IMAGE.jpg);
    /* and ect*/
}

https://www.w3schools.com/cssref/pr_bac ... -image.php

Yes, I am using Cassiopeia, and I tried that, but it doesn't seem to do anything. Do I need to delete cache or some other steps like that to get it to work? Thanks!

[Blackton]

OK, I guess it was a cache issue or something, because I tried opening it on my phone and it is working there! I did a few tweaks to get it scale to the full width of the page so it will account for different screen sizes, etc.:

body {
background-image: url(/images/myImage.jpg);
background-size: cover; /* Scale image to cover entire area */
background-repeat: no-repeat; /* Prevent tiling */
background-position: center; /* Center the image */
height: auto; /* adjust page height to fit image */
}

However, I noticed that it seems to be considering the body to include the part of the screen that the menu and logo are on. Is there a way to get the image to start below the menu section, which already has it's own background that is covering over the top of the body image?

I would like to be able to have a different background image for each article. Can I set that up in the single user.css, or do I need to set up a different css for each article? I'm guessing I can have a reference for each article, then have a separate section in user.css to set the background for each article separately like how I did for "body?"

[Blackton]

Hmm... I think I figured out how to get the background to only apply to one article by embedding that article inside of a div with a class name and using that class name when I set the background in user.css. However, now the image only fills whatever area is set for that article, which is a small area depending how much is in that article. I want it to fill the entire screen with the background image (minus the header area with the logo and menu). I'm not sure how I would go about doing that. It seems that the css instructions that I gave it are getting overridden by some hidden (to me) css file for the articles themselves?

[Blackton]

I keep looking up all different solutions to this, but none of them seem to actually work. It seems that the problem is that if I set the background to only display for the article that I want it for, then it limits its size to the size of the article size instead of the full screen size. But if I set the background for the entire body of my site, then it appears on every article, which I also don't want. Is there a way change the size of the articles themselves, so I could set the background on just that one article, but then force the article to fill the entire width of the screen (then I could still put a container inside of the article to contain the text of the article)?

[Blackton]

On closer inspection of the background image, it appears as if it is sized to the entire screen size, but that only the part of it that is within the article region is visible. I tried changing the z-index for the article to 2 so the background image can appear over everything around it, but this doesn't do anything. I also set the the z-index for "body" to -1, but that doesn't help either. Any ideas on how to stop having the background image cropped like this?

[Pavel-ww]

On closer inspection of the background image, it appears as if it is sized to the entire screen size, but that only the part of it that is within the article region is visible. I tried changing the z-index for the article to 2 so the background image can appear over everything around it, but this doesn't do anything. I also set the the z-index for "body" to -1, but that doesn't help either. Any ideas on how to stop having the background image cropped like this?

Hi. Unfortunately, all your thoughts above are incorrect.

For your case, the background image should be applied exclusively to the body. Once you accept this postulate, you need to make the body unique for each page.

Method 1: Add an article to the menu, in the menu item settings, add your unique page class and use it as a selector.

Disadvantages - if there are too many articles, you will have to create a large menu.

1.jpg

Code: Select all

body.your-class {
    background-image: url(/images/YOUR_IMAGE.jpg);
    /* and ect*/
}

Method 2: Create user.js, just like you created user.css, and write code there that will add a unique class to the body depending on certain conditions. For example, if the URL contains "lorem-ipsum", then add a class to the body, and so on. After that, you can use this class in your CSS.

Disadvantages - since JavaScript is executed last, this may delay the loading of the background image and cause a one-time flicker when the page loads.