Question 44919 in Html Question posted in
Some basic documentation can be found here.

Responsive html background splits the screen in certain proportion

I want to set this background to my html webpage. This background splits the screen in two colors with one line that goes from upper right corner to one point of the horizontal bottom line. It does not split it from corner to corner. The thing is that I want to do it in a responsive way. For example, the line could start in the 25% of the bottom length to the top right corner. I all screens, without scroll bars. Something Like this:

enter image description here

I have tried this:

        body{
            width: 100%;
            height: 114vh;
            background: linear-gradient(to right bottom, white 50%, blue 50.1%);
            background-size: 100%;
            background-position: center center;
            margin: 0;
            padding: 0;
        }

But it is not responsive. Not in all screens the screen is split in the same way and some scrolls appear.

Tags:

3

Answers


  1. 0

    Does this answer you question?

    body{
        width: 100vw;    /* edited */
        height: 114vh;
        background: linear-gradient(to right bottom, white 50%, blue 50.1%);
        background-size: 100%;   /* can be removed */
        background-position: center center;   /* can be removed */
        margin: 0;
        padding: 0;
        overflow: hidden; /* added */
    }
    Login or Signup to reply.
  2. 0

    You can put the background on a before pseudo element and use clip path to cut it to the right shape, using % offsets so it is responsive.

    For example:

    <<head>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <style>
    body {
      width: 100vw;
      height: 100vh;
      margin: 0;
    }
    
    body::before {
      content: '';
      display: inline-block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background: blue;
      clip-path: polygon(25% 100%, 100% 0, 100% 100%);
    }
  </style>
  </head>

  <body></body>

    It depends on whether you want the triangle to be fixed in the screen or not as to whether you position the pseudo element fixed or absolute.

    Login or Signup to reply.
  3. 0

    Don’t play with body height, play with the background-size

    html {
  background: linear-gradient(to right bottom, white 50%, blue 50.1%);
  background-size: 80% 100vh; /* 80% = 100% - 20% (your offset) */
  background-position: top right;
  background-repeat: no-repeat;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search