Skip Navigation

[Resolved] Set background image in a layout

This thread is resolved. Here is a description of the problem and solution.

Problem: I would like to add a background image to the main content area on a specific custom post type.

Solution: Upload an image to your media library, then use CSS to apply the image as a background:

.single-creature #main {
  background-image:url('http://yoursite.com/yourimage.jpg');
}

Relevant Documentation:
http://www.cssbasics.com/
https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/

This support ticket is created 6 years, 4 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 - -
13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 - -

Supporter timezone: America/New_York (GMT-04:00)

This topic contains 4 replies, has 2 voices.

Last updated by massimoS527 6 years, 4 months ago.

Assisted by: Christian Cox.

Author
Posts
#1073458

I would like to have a background texture image for the whole page (excluding header and footer).

now as you can see it's all white: hidden link

the animal card is created with layout. how can I do it?

thank you

#1074381

This really has nothing to do with Layouts or Toolset. Upload any image to your media library, then you can use basic CSS to add a background image to any element like this:

#main {
  background-image:url('<em><u>hidden link</u></em>');
}

http://www.cssbasics.com/

#1074882
example.jpg

I understand your misgivings!

the code works very well, but it is also seen in the admin pages. (screenshot)

I need it ONLY for the layout CREATURE.

The other pages should not have a background image

#1074957

Check the page markup and find a CSS class that is only applied to Creature pages, then use that as an ancestor selector. I see "single-creature", which might be useful:

.single-creature #main {
  background-image:url('<em><u>hidden link</u></em>');
}

http://www.cssbasics.com/
https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/

#1075019

perfect, thanks !