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

**URL:** <https://community.glideapps.com/t/looking-for-css-magic-background-for-the-tablet-desktop-view/27294>\
**Category:** Ask for Help\
**Created:** [May 27, 2021, 10:09am UTC](https://community.glideapps.com/t/looking-for-css-magic-background-for-the-tablet-desktop-view/27294 "2021-05-27T10:09:08Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Mark\_Turrell](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mark_turrell/32/26605_2.png) [@Mark\_Turrell](https://community.glideapps.com/u/Mark_Turrell)\
**Post date:** [May 27, 2021, 10:09am UTC](https://community.glideapps.com/t/looking-for-css-magic-background-for-the-tablet-desktop-view/27294/1 "2021-05-27T10:09:08Z")

</div>

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 😉 ✨ )

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/e/1/e1d88fd03d4ff19632b4e7ed4091e8e3ecc84390.jpeg)  
 ![Screenshot 2021-05-27 at 12.06.57](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/2/82a35adbc2ae5b21c248c789b61265c8a5973ae0.jpeg)

---

<div class="post-metadata">

**Author:** ![Manu.n](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manu.n/32/11679_2.png) [@Manu.n](https://community.glideapps.com/u/Manu.n)\
**Post date:** [May 27, 2021, 10:37am UTC](https://community.glideapps.com/t/looking-for-css-magic-background-for-the-tablet-desktop-view/27294/2 "2021-05-27T10:37:22Z")

</div>

Check ?

```
<pre><span><style>

.center-panel {
background-color:red;

```

OR

background-image:…  
}

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/6/d/6d2a8fa66bc7e2e1e914bd1a74b220542e7d4f0e.png)

---

<div class="post-metadata">

**Author:** ![Mark\_Turrell](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mark_turrell/32/26605_2.png) [@Mark\_Turrell](https://community.glideapps.com/u/Mark_Turrell)\
**Post date:** [May 27, 2021, 10:51am UTC](https://community.glideapps.com/t/looking-for-css-magic-background-for-the-tablet-desktop-view/27294/3 "2021-05-27T10:51:51Z")

</div>

Red is working…

 ![Screenshot 2021-05-27 at 12.46.40](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/d/1d43d6ff3e85aa86850fa91c014aac313b85f499.jpeg)

But I cannot get the background image to show

 ![Screenshot 2021-05-27 at 12.51.18](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/9/d9692d5fb788e4450b55c3db6abeea0d06e8d7ee.jpeg)

---

<div class="post-metadata">

**Author:** ![Manu.n](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manu.n/32/11679_2.png) [@Manu.n](https://community.glideapps.com/u/Manu.n)\
**Post date:** [May 27, 2021, 10:53am UTC](https://community.glideapps.com/t/looking-for-css-magic-background-for-the-tablet-desktop-view/27294/4 "2021-05-27T10:53:47Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Manu.n](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manu.n/32/11679_2.png) [@Manu.n](https://community.glideapps.com/u/Manu.n)\
**Post date:** [May 27, 2021, 10:55am UTC](https://community.glideapps.com/t/looking-for-css-magic-background-for-the-tablet-desktop-view/27294/5 "2021-05-27T10:55:05Z")

</div>

uhm the tag is missing in your CSS !!!

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/b/8b842ad08375dc5309d7b0cd5f0dc95818bbb5b6.jpeg)

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

---

<div class="post-metadata">

**Author:** ![Manu.n](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manu.n/32/11679_2.png) [@Manu.n](https://community.glideapps.com/u/Manu.n)\
**Post date:** [May 27, 2021, 10:57am UTC](https://community.glideapps.com/t/looking-for-css-magic-background-for-the-tablet-desktop-view/27294/6 "2021-05-27T10:57:59Z")

</div>

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/1/114c0a7a6d8fe657161ed9565152dafb9b93f041.jpeg)

it’s “meuhhh” like that

---

<div class="post-metadata">

**Author:** ![Mark\_Turrell](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mark_turrell/32/26605_2.png) [@Mark\_Turrell](https://community.glideapps.com/u/Mark_Turrell)\
**Post date:** [May 27, 2021, 11:08am UTC](https://community.glideapps.com/t/looking-for-css-magic-background-for-the-tablet-desktop-view/27294/7 "2021-05-27T11:08:01Z")

</div>

> [@Manu.n](#):
>
> `.center-panel {`

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

 ![Screenshot 2021-05-27 at 13.07.10](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/6/3/63549a2c2a780eca0cbd9a78f040fed02618a499.jpeg)

---

<div class="post-metadata">

**Author:** ![Manu.n](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manu.n/32/11679_2.png) [@Manu.n](https://community.glideapps.com/u/Manu.n)\
**Post date:** [May 27, 2021, 11:09am UTC](https://community.glideapps.com/t/looking-for-css-magic-background-for-the-tablet-desktop-view/27294/8 "2021-05-27T11:09:33Z")

</div>

as usual to check in desktop version !!!

---

<div class="post-metadata">

**Author:** ![Joe\_Gabriele](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/joe_gabriele/32/57595_2.png) [@Joe\_Gabriele](https://community.glideapps.com/u/Joe_Gabriele)\
**Post date:** [May 27, 2021, 12:26pm UTC](https://community.glideapps.com/t/looking-for-css-magic-background-for-the-tablet-desktop-view/27294/9 "2021-05-27T12:26:30Z")

</div>

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.
```

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [May 28, 2021, 9:21am UTC](https://community.glideapps.com/t/looking-for-css-magic-background-for-the-tablet-desktop-view/27294/10 "2021-05-28T09:21:28Z")

</div>

or you can do like this:

[![Screen Shot 2021-05-28 at 5.19.38 AM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/0/804baaba0a378b9f238ef3de1eda12512bf3bea1.jpeg)](https://holy-bible.glideapp.io/dl/ewAiAHQAIgA6ADUALAAiAHMAIgA6ACIAYwBsAGEAcwBzAC0AbgBhAHQAaQB2AGUALQB0AGEAYgBsAGUALQBEAGkAbABJADQAVQAzAHMARABBAGMASwBmAGkAMQAyAEgAUABtAHAAIgAsACIAcgAiADoAIgB1AGMAVQByAEsAbABpAEQAUgAtAHEAagBJADcAZAA5AFEAVgBYAE4AQQBnACIALAAiAG4AIgA6ACIARwBsAGkAZABlACIAfQA%3D)

[LINK](https://holy-bible.glideapp.io/dl/ewAiAHQAIgA6ADUALAAiAHMAIgA6ACIAYwBsAGEAcwBzAC0AbgBhAHQAaQB2AGUALQB0AGEAYgBsAGUALQBEAGkAbABJADQAVQAzAHMARABBAGMASwBmAGkAMQAyAEgAUABtAHAAIgAsACIAcgAiADoAIgB1AGMAVQByAEsAbABpAEQAUgAtAHEAagBJADcAZAA5AFEAVgBYAE4AQQBnACIALAAiAG4AIgA6ACIARwBsAGkAZABlACIAfQA%3D) to this sample

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [May 28, 2021, 10:47am UTC](https://community.glideapps.com/t/looking-for-css-magic-background-for-the-tablet-desktop-view/27294/11 "2021-05-28T10:47:10Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Mark\_Turrell](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mark_turrell/32/26605_2.png) [@Mark\_Turrell](https://community.glideapps.com/u/Mark_Turrell)\
**Post date:** [May 28, 2021, 10:52am UTC](https://community.glideapps.com/t/looking-for-css-magic-background-for-the-tablet-desktop-view/27294/12 "2021-05-28T10:52:37Z")

</div>

Clever / and very nicely executed:)

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [May 28, 2021, 10:54am UTC](https://community.glideapps.com/t/looking-for-css-magic-background-for-the-tablet-desktop-view/27294/13 "2021-05-28T10:54:15Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Test\_Test](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/test_test/32/30930_2.png) [@Test\_Test](https://community.glideapps.com/u/Test_Test)\
**Post date:** [August 3, 2022, 4:14pm UTC](https://community.glideapps.com/t/looking-for-css-magic-background-for-the-tablet-desktop-view/27294/14 "2022-08-03T16:14:53Z")

</div>

> [@Uzo](#):
>
> [LINK](https://holy-bible.glideapp.io/dl/ewAiAHQAIgA6ADUALAAiAHMAIgA6ACIAYwBsAGEAcwBzAC0AbgBhAHQAaQB2AGUALQB0AGEAYgBsAGUALQBEAGkAbABJADQAVQAzAHMARABBAGMASwBmAGkAMQAyAEgAUABtAHAAIgAsACIAcgAiADoAIgB1AGMAVQByAEsAbABpAEQAUgAtAHEAagBJADcAZAA5AFEAVgBYAE4AQQBnACIALAAiAG4AIgA6ACIARwBsAGkAZABlACIAfQA%3D) to this sample

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

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [August 3, 2022, 4:38pm UTC](https://community.glideapps.com/t/looking-for-css-magic-background-for-the-tablet-desktop-view/27294/15 "2022-08-03T16:38:16Z")

</div>

here you go:

> **[Code BOOK - Desktop](https://code-book-desktop.glideapp.io/)**
>
> share cool CSS, scripts and links

---

<div class="post-metadata">

**Author:** ![Test\_Test](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/test_test/32/30930_2.png) [@Test\_Test](https://community.glideapps.com/u/Test_Test)\
**Post date:** [August 3, 2022, 4:45pm UTC](https://community.glideapps.com/t/looking-for-css-magic-background-for-the-tablet-desktop-view/27294/16 "2022-08-03T16:45:31Z")

</div>

Thanks!  
I believe you’re referring to this, which I cannot get to work:  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/e/8/e8acfbaeb92afce2b4aac0b0840aae6a61dea07b.png)

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [August 3, 2022, 4:48pm UTC](https://community.glideapps.com/t/looking-for-css-magic-background-for-the-tablet-desktop-view/27294/17 "2022-08-03T16:48:12Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Test\_Test](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/test_test/32/30930_2.png) [@Test\_Test](https://community.glideapps.com/u/Test_Test)\
**Post date:** [August 3, 2022, 4:51pm UTC](https://community.glideapps.com/t/looking-for-css-magic-background-for-the-tablet-desktop-view/27294/18 "2022-08-03T16:51:02Z")

</div>

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):

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/e/f/efad429201cec2caf4cfba0108216f98940c82ac.png)

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [August 3, 2022, 4:53pm UTC](https://community.glideapps.com/t/looking-for-css-magic-background-for-the-tablet-desktop-view/27294/19 "2022-08-03T16:53:36Z")

</div>

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

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

---

<div class="post-metadata">

**Author:** ![Test\_Test](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/test_test/32/30930_2.png) [@Test\_Test](https://community.glideapps.com/u/Test_Test)\
**Post date:** [August 3, 2022, 5:04pm UTC](https://community.glideapps.com/t/looking-for-css-magic-background-for-the-tablet-desktop-view/27294/20 "2022-08-03T17:04:19Z")

</div>

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](#):
>
> ```auto
> .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

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/0/c/0c5910888df9f96c0d12c280cb9746f84045ee87.png)

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? 🙂

[Next page](https://community.glideapps.com/t/looking-for-css-magic-background-for-the-tablet-desktop-view/27294.md?page=2)