[Support request] Want to add different background photos for mobile and desktop posts

[David]

Then your CSS would be this:

.separate-containers .inside-article {
    background-image: url(url_here);
    background-attachment: fixed;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Kyle]

Were almost there and I am really thankful for your help. It seems that when I check it out on mobile it is still showing the desktop photo and I am hoping to change it via mobile. Here is the code I have now.
.separate-containers .inside-article {
background-image: url(https://www.whereiskylemiller.com/wp-content/uploads/2020/10/IMG_0072_kyle-at-top-of-skin-track_4x5.jpg);
background-attachment: fixed;
}

@media(max-width: 768px) {
body {
background-image: url(https://www.whereiskylemiller.com/wp-content/uploads/2020/10/Gallery-for-Mount-Rainier-snowboarding-in-the-backcountry-10.jpg);
}
}
Sorry I am on Finnish Time…….

[David]

No problems 🙂

Your CSS should look like this:

.separate-containers .inside-article {
    background-image: url(your_destkop_image_url);
    background-attachment: fixed;
}

@media(max-width: 768px) {
    .separate-containers .inside-article {
        background-image: url(your_mobile_image_url);
        background-attachment: initial;
    }
}

Note i have removed the fixed background from Mobile. As those devices do not support fixed backgrounds and will cause issues. You may event want to remove the background image from mobile. If so then you can change the second CSS rule to:

@media(max-width: 768px) {
    .separate-containers .inside-article {
        background-image: none;
        background-attachment: initial;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Kyle]

You are a saint and you saved me days by helping out. One last question and I will leave you be. How do I make the scroll down menu box transparent?

[David]

If you want it transparent across the entire site then simply change the Customizer > Colors > Primary Navigation – you can set its background to transparent.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Kyle]

Okay that was the final question and thank you so much for your help. I really appreciate it!!

[David]

You’re welcome

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Kyle]

2. Questions First how do I put the background image CSS to fit the screen so that it shows the whole photo.
2. Is there a CSS I can add to make all text in a specific post Black. Thank you

[David]

2. Your CSS needs to include these two new rules here – i have commented above each one:

.separate-containers .inside-article {
    background-image: url(url_here);
    background-attachment: fixed;
    /* maintain image size  */
    background-size: contain;
    /* remove repeating background */
    background-repeat: no-repeat;
}

3. Is it a post or page you want to change the colors on and will be Paragraphs and headings? May be easier to link me to the post you want changing.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Kyle]

https://www.whereiskylemiller.com/ski-tours-stevens-pass/
I would like to change this and other main pages on both text and headers to black but keep the main posts white like the link below.
https://www.whereiskylemiller.com/mt-rainier/osceola-traverse/
Thank you for your help.

[Kyle]

Also I posted the code but I want it to expand across the whole page compared to being in the corner. Is this possible? For an example of what it is showing at the moment I have the link below.
https://www.whereiskylemiller.com/rainier-to-baker/mt-rainier-to-mt-baker/

[David]

For the text color change you can try adding this CSS to the Simple CSS metabox in the post editor:

body,
body h1,
body h2,
body h3,
body h4 {
    color: #000;
}

I am not sure i understand the other question regarding the position of the image ?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts