Welcome, Guest
Username: Password: Remember me
Forgot your password? Forgot your username? Create an account
Forum Joomlack - Tutoriels et extensions Joomla
Template Creator CK
Different BG for each page
  • Page:
  • 1
  • 2

TOPIC: Different BG for each page

Different BG for each page 20 Jan 2021 23:22 #59322

Hey Dec

I have a site I'm taking over and rebuilding in Joomla. www.milesmwp.com/ As you can see, almost every page has a different BG. Now I know I can make a separate template for every page but that seems pretty insane! Is there another way I can do this? Perhaps with some PHP to select a certain image and insert in the base template?
A good landing is one you can walk away from.
A great landing is one where you can reuse the aircraft!

Please Log in or Create an account to join the conversation.

Different BG for each page 21 Jan 2021 07:48 #59323

  • ced1870
  • ced1870's Avatar
  • Offline
  • Administrateur
  • Administrateur
  • Posts: 24287
  • Karma: 427
  • Thank you received: 3044
Hi
you can use the body css class to change the background on the selected page
each page has some specific css classes that you can use and put the css code in parameters >> custom css

CEd
Joomlack Webmaster and Developer

Please Log in or Create an account to join the conversation.

Different BG for each page 21 Jan 2021 13:54 #59325

OK, I'm assuming you mean in each articles Parameters --> Custom CSS?

I added:

body {
background: url(../images/wrestlers.jpg) center center no-repeat scroll!important;
}

Then without the !important, and then without body{ and }, but nothing showed up. What did I do wrong?
A good landing is one you can walk away from.
A great landing is one where you can reuse the aircraft!

Please Log in or Create an account to join the conversation.

Different BG for each page 21 Jan 2021 14:01 #59327

  • ced1870
  • ced1870's Avatar
  • Offline
  • Administrateur
  • Administrateur
  • Posts: 24287
  • Karma: 427
  • Thank you received: 3044

I'm assuming you mean in each articles Parameters --> Custom CSS?

no, into Template Creator CK >> your template editino >> Parameters --> Custom CSS
www.template-creator.com/fr/documentatio...-add-some-custom-css
Joomlack Webmaster and Developer

Please Log in or Create an account to join the conversation.

Different BG for each page 21 Jan 2021 18:28 #59330

So add something like:
body-main {
background: url(../images/wrestlers.jpg) center center no-repeat scroll;
}

and

body-hurt-locker {
background: url(../images/wrestlers1.jpg) center center no-repeat scroll;
}

etc, for each page with a different BG.

to the template. How do I then assign that to a specific article? Or have I still got it wrong?
A good landing is one you can walk away from.
A great landing is one where you can reuse the aircraft!

Please Log in or Create an account to join the conversation.

Different BG for each page 21 Jan 2021 18:37 #59331

  • ced1870
  • ced1870's Avatar
  • Offline
  • Administrateur
  • Administrateur
  • Posts: 24287
  • Karma: 427
  • Thank you received: 3044
this is not a template creator related question
this is related to Joomla and CSS

give me the url of a page where you want to show your image
Joomlack Webmaster and Developer

Please Log in or Create an account to join the conversation.

Different BG for each page 21 Jan 2021 18:41 #59332

www.ckdev.info/mwp is the start of the site. The BG for the home page is images/wrestlers.jpg and for the Hurt Locker is images/mwp-hurt-locker-landing-page.jpg.

Thanks.
A good landing is one you can walk away from.
A great landing is one where you can reuse the aircraft!

Please Log in or Create an account to join the conversation.

Different BG for each page 21 Jan 2021 18:45 #59335

  • ced1870
  • ced1870's Avatar
  • Offline
  • Administrateur
  • Administrateur
  • Posts: 24287
  • Karma: 427
  • Thank you received: 3044
example
body.itemid-138 {
    background: url(https://www.template-creator.com/images/blog/iphone.jpg);
}
this will apply a background image only on the "MWP HURT LOCKER 2021" page, because the body has the css class "itemid-138"
Please use the web console from your browser so that you can see the css classes and test also
you can do that for any page
Joomlack Webmaster and Developer

Please Log in or Create an account to join the conversation.

Different BG for each page 21 Jan 2021 18:57 #59338

Thanks Ced - always appreciate you going above and beyond for my "know-a-little-so-I'm-dangerous" coding skills! :-) I'll give it a try.
A good landing is one you can walk away from.
A great landing is one where you can reuse the aircraft!

Please Log in or Create an account to join the conversation.

Different BG for each page 21 Jan 2021 19:10 #59339

Again thanks! After some fiddling with stretching, etc, it works perfectly. Sure appreciate the help!
A good landing is one you can walk away from.
A great landing is one where you can reuse the aircraft!

Please Log in or Create an account to join the conversation.
  • Page:
  • 1
  • 2
Forum Joomlack - Tutoriels et extensions Joomla
Template Creator CK
Different BG for each page
Time to create page: 0.201 seconds

Fast and powerful creation, customizable and responsive.

Read More

Qui est en ligne

We have 387 guests and no members online