How can I set bg color of linked pages to be transparent?

Hi there @spiritguitar – Twenty Seventeen doesn’t have a built-in setting for a background image on pages, but you can do that with some custom CSS:

/* Body background */
body, 
body.colors-dark, 
body.colors-custom {
    background: transparent no-repeat url("https://aerialviewmusic.com/wp-content/uploads/2020/04/cropped-Sky-1200.jpg");
}
  

You can add this in your custom CSS editor at Appearance > Customize > Additional CSS.

Let me know if that achieves the effect you’re looking for.

• This reply was modified 1 year, 9 months ago by Kathryn Presner. Reason: fixed typo

Thank you Kathryn P! That worked like a charm. I can see the sky!

Have a great day and thanks for reaching out to help me.

Cheers! Russell D

Wonderful, glad to hear that did the trick!

Actually, I just realized that to account for longer pages or wider screens, you should probably remove the no-repeat part, as you would in fact want the background to tile and fill the whole space.

Here’s the revised CSS:

/* Body background */
body, 
body.colors-dark, 
body.colors-custom {
    background: transparent url("https://aerialviewmusic.com/wp-content/uploads/2020/04/cropped-Sky-1200.jpg");
}

Thanks again. I see what you mean if I stretch my browser window very wide – I see white background at the edge. I tried tiling and the photo doesn’t line up right (looks like an obvious tile). So I’ll experiment with altering the photo so it tiles better (more clear blue sky).

One other question: I noticed my home page pic stretches out to fill any screen width but the linked page background pic does not. Is there a way to make that bg pic stretch like the home page bg pic? If so, that would solve the tiling problem and keep the no-repeat part.

Update: I replaced the ‘cropped’ version of the photo with my original photo, which is wider, and that one fills the screen on my 27″ monitor in full screen mode. So that will probably work. Will have to see if the height works later when I have a taller song list (it will be 10 songs high eventually).

Regarding my question about stretching the photo — if there was an easy way to do that for the body pages it would be great. The home page photo behavior is xlnt for any browser window width. I understand this theme is limited in its design. Thanks again for your time. ??

• This reply was modified 1 year, 9 months ago by spiritguitar.

Hey there @spiritguitar – yup, this version might work better than the previous code, let me know what you think!

/* Body background */
body, 
body.colors-dark, 
body.colors-custom {
    background-image: url("https://aerialviewmusic.com/wp-content/uploads/2020/04/cropped-Sky-1200.jpg");
    background-size: cover;
}

The good new is, it worked great for the main body background pic. It stretches like the home page pic. But the bg behavior is odd vertically…

UPDATE: it seems to work now! The bg photo appeared to tile vertically at the bottom of the window but when I refreshed it again it is now working. So I’ll say for now it is resolved — fingers crossed.

Thanks again for your help — and have a great day! ??

• This reply was modified 1 year, 9 months ago by spiritguitar.

Thanks again for all your help @zoonini!

Postscript: I see what was happening now. The bg photo will stretch as expected if I resize the browser window horizontally, or by dragging a corner of the window to expand it. Viewing in full screen mode also works great. But if I enlarge the browser window vertically (not by the corner) the bg photo will tile. I think the user would catch on and resize the window via the corner method, however, so no worries. ??

Cheers! @spiritguitar

Alright, glad you’re set!

Just to throw out another option, you could always look for a pre-made seamless background tile image, instead of using the cover option. That way, you could let it repeat and the seams would never show. ?? Cheers!

Thanks @zoonini for the suggestion and the link. Although I’ve gotta have my sky! (Aerial View and all that). ?? Thanks again!

Although I’ve gotta have my sky! (Aerial View and all that). ?? Thanks again!

Sounds great, so you can use the option that where suggested earlier by @zoonini. If you have any questions please feel free to reach out.

Thanks for your comment @thelmachido. @zoonini‘s suggestions did indeed clear things up for me (pun intended). ??

I think I’m all set for now, unless you might have a clever way to enable the bg pic to stretch when enlarging the browser window vertically.

To clarify what I mean, on the home page, if you drag the browser window either horizontally or vertically the bg pic stretches without tiling. But on the body pages (where I have a placeholder audio player) the window will stretch horizontally (if you drag the side of the browser window) but not vertically (if you drag the bottom border of the browser window).

I’ve marked my issue resolved, but it would be a bonus to make the body bg pic have the same behavior as the home page bg pic.

Thanks again and have a great day!