Display background image on home page only

[exemplary1]

Hi,
I have added background image to forum, but I want to display on home page only.
How do I do that ?
Edit : I am using Prolight style.
Thank you.

[Gumboots]

Use the .section-index class on the body tag.

[exemplary1]

I did try editing overall_header.html's body tag and adding css to custom.css with the help of AI, didn't work.

[Steve]

You can use in the overall_header.htm:

Code: Select all

{% if SCRIPT_NAME eq 'index' %}
	<link href="{T_THEME_PATH}/my_css_file.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
{% endif %}

Note that 'index' is for the index.php file and my_css_file.css needs to be in your theme's folder, you can also name the CSS file what ever.

[exemplary1]

You can use in the overall_header.htm:

Code: Select all

{% if SCRIPT_NAME eq 'index' %}
	<link href="{T_THEME_PATH}/my_css_file.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
{% endif %}

Note that 'index' is for the index.php file and my_css_file.css needs to be in your theme's folder, you can also name the CSS file what ever.

And how do I add image path in css file ?

[Steve]

What code do you have so far, please?

[exemplary1]

Ok I have added following, and seems its working.

Code: Select all

body {
   background-image: url('./images/background.jpg');
    background-size: cover;
    background-position: center;
}

Thank you very much.

[Gumboots]

You don't need to add logic in the template, and you don't need another CSS file just for this. Do things the easy way. I just tested this live on this site via Stylus. It works. Add it to any CSS file.

Code: Select all

.section-index {
	background: url(https://www.phpbb.com/community/styles/prosilver/theme/en/icon_user_online.gif);
}

Hey, presto: the index page background gets tiled online gif's all over it.* No other page is affected. It will work with any image and any valid url. It may need more specificity in the selector if you are trying to override another declaration, but if so that is easy to track down (learn to use the browser's document inspector).

And don't bother tying to use AI for this. Use your own intelligence, It has had far more beta testing.

*I must say it's quite a radical look.

[exemplary1]

Well, I can do basic CSS changes but I am not aware how Phpbb/CSS logic works, such as - .section-index

This code is working. At first, it didn't work, as I copied your image path and its behind cloudflare. Then used local image.
Thank you.

[Sniper_E]

I didn't know about .section-index either. I'll have to remember this.

I assume .section-posting and .section-viewtopic and so on will work also?

[Gumboots]

Sure, and .section-viewforum and .section-search and .section-memberlist and .section-ucp and probably a few others I can't recall offhand. Just check the body classes on any page.