Looking for CSS magic - background for the tablet / desktop view?

[Mark_Turrell]

Has anyone succeeded in finding the CSS for the background for the tablet view… so I could have a lovely screen that looks like this?

Thanks! (looking for magic, as per usual )

[Manu.n]

Check ?

<pre><span><style>

.center-panel {
background-color:red;

OR

background-image:…
}

[Mark_Turrell]

Red is working…

But I cannot get the background image to show

[Manu.n]

well what is it pretty in red
I watch.
But it seems to me that I have already seen this on the forum ??

[Manu.n]

uhm the tag is missing in your CSS !!!

.center-panel {
background-image : .............
}

[Manu.n]

it’s “meuhhh” like that

[Mark_Turrell]

@Manu.n

.center-panel {

Cool! And tell no one I haven’t a clue what I’m doing (but I learn fast

[Manu.n]

as usual to check in desktop version !!!

[Joe_Gabriele]

You can also try this:

.background {
position: fixed;
margin-top:0;
height: 100%;
width: 100%;
top:0;
right:0; 
left: 0%;
z-index:-100;
filter: brightness(50%);
background-image: url("URL"); 
background-size: cover;
background-position: center center; 
}
But I believe you don’t get the white center part on tablet/desktop view.

[Uzo]

or you can do like this:

LINK to this sample

[Uzo]

when you click on that picture, it will take you to the app where you can see it in action.

[Mark_Turrell]

Clever / and very nicely executed:)

[Uzo]

thank you… plus you are gaining extra room at the bottom… and the right side is not that empty anymore

[Test_Test]

@Uzo

LINK to this sample

Hi Uzo,
Could you please share the CSS (or the app design itself) to obtain this split-screen solution?
Thanks

[Uzo]

here you go:

Code BOOK - Desktop

[Test_Test]

Thanks!
I believe you’re referring to this, which I cannot get to work:

[Uzo]

no, I’m creating a whole glide screen from scratch, using CSS… the one you are showing is really hard to apply, it is easier to just move elements

[Test_Test]

So I understand even less than the little I thought I did
What I’m trying to achieve is to stretch this elements to the full width of the screen (desktop):

[Uzo]

it depends on the plan you are using… in the free plan… add /full at the end of the live URL… in paid plans… use tablet view and CSS to change the wrapper

<pre><span><style> 
.content-wrapper {
background-color:white !important;
top:0% !important;
left:0% !important;
background-size: cover !important;
background-position: center center !important;
}

[Test_Test]

Thanks, but that’s not what I meant.
I’d like to have the center elements (the details view) stretched over the full width of the screen.

@Uzo

.content-wrapper {
background-color:white !important;
top:0% !important;
left:0% !important;
background-size: cover !important;
background-position: center center !important;
}

I changed the color on your example to red just so others can understand what this code does

In other words, I’d like the center element (white) to cover the full width of the screen. This means that text (or any other elements inside the details view) will be stretched as well.

@Uzo

in the free plan… add /full at the end of the live URL

I’m on a paid plan. Does that mean my life is more complicated?