# Background not consistent

**URL:** <https://forum.codewithmosh.com/t/background-not-consistent/14585>\
**Category:** HTML/CSS\
**Created:** [August 20, 2022, 9:41pm UTC](https://forum.codewithmosh.com/t/background-not-consistent/14585 "2022-08-20T21:41:17Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![chunhi123](https://avatars.discourse-cdn.com/v4/letter/c/e19adc/32.png) [@chunhi123](https://forum.codewithmosh.com/u/chunhi123)\
**Post date:** [August 20, 2022, 9:41pm UTC](https://forum.codewithmosh.com/t/background-not-consistent/14585/1 "2022-08-20T21:41:17Z")

</div>

Hi  
I am a super beginner,  
I try to make background clip path and gradient, however, the viewport looks good on mobile device, but on large screen, the background seems to get cut off.  
Any suggestion would be awesome!!!

---

<div class="post-metadata">

**Author:** ![eelsholz](https://avatars.discourse-cdn.com/v4/letter/e/439d5e/32.png) [@eelsholz](https://forum.codewithmosh.com/u/eelsholz)\
**Post date:** [August 28, 2022, 11:00pm UTC](https://forum.codewithmosh.com/t/background-not-consistent/14585/2 "2022-08-28T23:00:58Z")

</div>

Hi. Do you have example code and screenshots?

---

<div class="post-metadata">

**Author:** ![D0ll4R](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.codewithmosh.com/d0ll4r/32/4511_2.png) [@D0ll4R](https://forum.codewithmosh.com/u/D0ll4R)\
**Post date:** [September 2, 2022, 8:22am UTC](https://forum.codewithmosh.com/t/background-not-consistent/14585/3 "2022-09-02T08:22:47Z")

</div>

I think you did not add the correct breakpoints in your code, so maybe your background may be consistent on ultra wide screen, its better to add code in the description but anyways your media query should be something like this:

```auto
@media screen and (min-width: 768px) {
   background: gold;
   clip-path: "change your clip-path a little bit and add it here"
}

```

---

<div class="post-metadata">

**Author:** ![chunhi123](https://avatars.discourse-cdn.com/v4/letter/c/e19adc/32.png) [@chunhi123](https://forum.codewithmosh.com/u/chunhi123)\
**Post date:** [September 14, 2022, 1:39am UTC](https://forum.codewithmosh.com/t/background-not-consistent/14585/4 "2022-09-14T01:39:14Z")

</div>

body \> #background {  
width: 100%;  
height: 100%;  
background: linear-gradient(65deg, rgba(158,175,175,1) 54%, rgba(4,56,63,1) 98%);  
position: absolute;  
z-index: -1;  
}

---

<div class="post-metadata">

**Author:** ![chunhi123](https://avatars.discourse-cdn.com/v4/letter/c/e19adc/32.png) [@chunhi123](https://forum.codewithmosh.com/u/chunhi123)\
**Post date:** [September 14, 2022, 1:40am UTC](https://forum.codewithmosh.com/t/background-not-consistent/14585/5 "2022-09-14T01:40:44Z")

</div>

I also tried to take clip path off, and it is still only cover a portion of a page and not the entire view port.

---

<div class="post-metadata">

**Author:** ![chunhi123](https://avatars.discourse-cdn.com/v4/letter/c/e19adc/32.png) [@chunhi123](https://forum.codewithmosh.com/u/chunhi123)\
**Post date:** [September 14, 2022, 1:56am UTC](https://forum.codewithmosh.com/t/background-not-consistent/14585/6 "2022-09-14T01:56:36Z")

</div>

![image](https://us1.discourse-cdn.com/flex020/uploads/codewithmosh/original/2X/2/206016da3a7119fd401fbc08c046699e8314c40d.jpeg)  
The margin seems off with iphone