Adding Background To Portfolio Items

[aiad_development]

Hi There,

I want to add a background images to portfolio items but for them to only be visible when viewed on desktop only. When it is viewed on mobile I want to be able to add css display:none;

If I add the background image through the portfolio item settings, then it is inside a meta tag and I cannot display none on media screen css.

Is there a way to even put one image as a background to all portfolio items? And that way I can display none when on a smaller screen.

Your help is much appreciated.

http://x.aiadstaging.com.au/projects/nswslateroofing2.com.au/projects/souther-highlands/

[basanta]

Hi There,

Thanks for asking!

That only can be possible via custom CSS. You can add background image to body tag and remove the background in mobile through media query.

Example CSS.

body.single-x-portfolio {
    background: url(image url) center top no-repeat; /* add your image URL*/
    background-size: cover;
    background-attachment: fixed;
}

@media (max-width: 768px) {
body.single-x-portfolio {
   background: none !important;
}
}

Hope this helps!

[aiad_development]

Hi there!
Thank you very much!
What is the class to do the same to blog post pages?
Is there a place where i can find all the classes for x theme templates?
Thanks heaps!

[paul.r]

Hi,

For blog post, you can change single-x-portfolio with single-post

We get the class of an element by using Chrome Inspect Element

To learn how get the elements class you can check the link below

Hope that helps