Background Images

[ppl]

Hey Kleo,

Continuing on the topic of appearance/design, we are interested in exploring the options with background images on the site, we would like to be able to add background images to some pages, but not all of them. Is it possible to add background images to some pages (Like the “groups” page in the attached picture) and not other pages where no background image is desired (Like for instance the “Lab Team” page also attached). Any help or guidance on this matter would be much appreciated!

Thank you!

Ken & Pocket Project Lab Team

Attachments:

You must be logged in to view attached files.

[Kieran_SQ]

Hi Ken,

We generate a lot of different classes that will help with this, in your example – groups, we add a .groups class in general to any group as well as a .group-the-title-of-a-group class.

You could use these before any other CSS to define it’s use only when they’re present.

So to target all groups you could use

.groups #my-element {
color:red;
}

Or to target only a group called Dinosaurs you could use

.group-dinosaurs #my-element {
color:red;
}

We do the same with pages too, we add the page ID to the body element page-id-number. In the screenshot that I have attached below the page ID is 51 so the class generated is .page-id-51

By using .page-id-51 before any CSS it will ensure it is only loaded on that specific page.

Hope this helps,

Kieran

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Custom development requests can be sent to dev@seventhqueen.com, one of the development team will be happy to discuss your needs.

Attachments:

You must be logged in to view attached files.

[ppl]

Kieran,

Sorry to be so slow on this as we are new to the CSS. I was able to change the colours of a few elements on the pages but I will need just a bit more help.

What would be the value of my-element if we wanted to change the colour of the entire background page?

Or even better if we wanted to set a background image for a page element what would we replace color: with?

Thanks again.

Rob

[Kieran_SQ]

Hi Rob

You can use the ID #main to target everything within the main page (except header and footer) or body to target everything.

For example

COPY CODE

#main {
    background-color: #ff0000;
}

You can add a class before, as per my previous reply, to target only specific pages.

You can set a background image by using background image property instead of (or aswell as) the color property. See here for more information on this https://www.w3schools.com/cssref/pr_background-image.asp. W3schools has a ton of useful information on CSS if you wish to learn to more about it.

Thanks,

Kieran

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Custom development requests can be sent to dev@seventhqueen.com, one of the development team will be happy to discuss your needs.

[Author]

Posts