About a background with more emphasis - ES 4830

[Guest]

I copied this image from another thread and would like to have CSS/HTML code...

1. Scroll Downs My Media.

2. Apply a gray background from the yellow frame, as I use the fully glossy background.

On my homepage I have Continue watching as the first session, before My Media, as shown in the second image.

From now on, I would like to express my thanks.

[Happy2Play 9441]

@arrbee99 you got this.  As it should be cherry picking your existing code.

Edited March 9, 2024 by Happy2Play

[arrbee99 1712]

I haven't got it very well though.

I think its this -

/* Move My Media down to show 1 row and add grey background HAPPY2PLAY */
.homeSectionsContainer {
    position: relative;
    top: 55em;
    background: rgba(0, 0, 0, 0.5);
}

/* IT image */
div.view.flex.flex-direction-column.withTabs.page:not(div.tabContent.tabContent-positioned.flex.flex-grow.is-active) {background-image: url("https://wallpapercave.com/wp/wp2088492.png");background-size: cover;
}

/* IT logo */
.sections.homeSectionsContainer::before {
    content: '';
    display: block;
    background-image: url(http://sogrady-media.redmonk.com/sogrady/files/2018/06/2000px-IT_2017_film_logo.svg_.png);
    width: 80%;
    margin: 1em auto 0 auto;
    height: 16em;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

I used this

https://static0.srcdn.com/wordpress/wp-content/uploads/2019/03/Gollum.jpg

for Gollum but never got a Gollum logo...

But the image shows up where it (probably) shouldn't, like the backdrops for most My Media items and the TV guide

[Happy2Play 9441]

@CarlosLimayou can see all the code in arrbee99 topic or there is a newer copy in this topic. 

But the first code above covers both 1 and 2.

/* Move My Media down to show 1 row and add grey background HAPPY2PLAY */
.homeSectionsContainer {
	position: relative;
	top: 55em; 
	background: rgba(0, 0, 0, 0.5);
}

 

[Happy2Play 9441]

1 hour ago, arrbee99 said:

But the image shows up where it (probably) shouldn't, like the backdrops for most My Media items and the TV guide

div.view.flex.flex-direction-column.withTabs.page:not(div.tabContent.tabContent-positioned.flex.flex-grow.is-active) {background-image: url("https://wallpapercave.com/wp/wp2088492.png");background-size: cover;
}

LOL well change it.

Since you targeted .view do you want in all .view or specific view options as most pages are view targeted.

Hits more views as I didn't apply .withTabs in this example but not livetv

div.view:not(div.view-livetv-livetv) {background-image: url("https://wallpapercave.com/wp/wp2088492.png");background-size: cover;}

Or Home page only

div.view-home-home {background-image: url("https://wallpapercave.com/wp/wp2088492.png");background-size: cover;}

 

[arrbee99 1712]

I'm still just a trial and error guy, so the only reason I picked view is cause it works (mostly anyway). I'll try either / or if you don't mind.

- where do you even find these -livetv-livetv and -home-home things ?

[Happy2Play 9441]

2 minutes ago, arrbee99 said:

I'm still just a trial and error guy, so the only reason I picked view is cause it works (mostly anyway). I'll try either / or if you don't mind.

- where do you even find these -livetv-livetv and -home-home things ?

That same element in dev console you applied it to.

Navigated so you can see two

So pages are more targetable.

 

[arrbee99 1712]

I need to try more often, but I guess I it just doesn't sink in...

[arrbee99 1712]

2 hours ago, Happy2Play said:

LOL well change it.

Since you targeted .view do you want in all .view or specific view options as most pages are view targeted.

Hits more views as I didn't apply .withTabs in this example but not livetv

div.view:not(div.view-livetv-livetv) {background-image: url("https://wallpapercave.com/wp/wp2088492.png");background-size: cover;}

Or Home page only

div.view-home-home {background-image: url("https://wallpapercave.com/wp/wp2088492.png");background-size: cover;}

 

Yes, the first option is probably a bit much for me, shows up on detail screen etc, so get 'IT' backdrop for 'Devotion' movie etc.