- This topic has 26 replies, 2 voices, and was last updated 2 years, 3 months ago by
David.
-
AuthorPosts
-
October 15, 2020 at 7:35 am #1490363
David
StaffCustomer SupportThen 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/October 15, 2020 at 7:42 am #1490370Kyle
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…….October 15, 2020 at 7:47 am #1490376David
StaffCustomer SupportNo 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/October 15, 2020 at 7:55 am #1490572Kyle
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?
October 15, 2020 at 7:57 am #1490576David
StaffCustomer SupportIf 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/October 15, 2020 at 8:00 am #1490587Kyle
Okay that was the final question and thank you so much for your help. I really appreciate it!!
October 15, 2020 at 9:02 am #1490711David
StaffCustomer SupportYou’re welcome
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/October 18, 2020 at 5:13 am #1494103Kyle
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 youOctober 18, 2020 at 8:21 am #1494403David
StaffCustomer Support2. 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/October 18, 2020 at 9:51 am #1494519Kyle
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.October 18, 2020 at 10:12 am #1494539Kyle
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/October 19, 2020 at 1:48 am #1495160David
StaffCustomer SupportFor 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/ -
AuthorPosts
- You must be logged in to reply to this topic.