1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

How to fix this background:linear-gradient issue?

Discussion in 'CSS' started by Divvy, Jan 24, 2023.

  1. #1
    Hello guys,

    Maybe someone can help me. I'm using the following CSS for my site background:
    body {
    background:linear-gradient(to bottom right, rgba(0,0,0,1) 0%, rgba(58,1,40,1) 100%);
    }
    Code (markup):
    It works great, but I notice that have a little issue with my iPhone 13 Pro Max when I visit the site horizontally, it shows a blank space on the left and right side. Screenshot: https://prnt.sc/yXZC5dF7m-EI

    This doesn't happen when I use a background image, for example:
    body {
    background: #0e0301 url("https://domain.com/image.jpg") fixed center top;
    }
    Code (markup):
    But I don't want to use the image, I want to use the linear-gradient. Any idea how to fix this?

    This is the site URL if you want to test it: https://bestlistofporn.com
    Note: NSFW Content

    Thank you in advance :)
     
    Divvy, Jan 24, 2023 IP
  2. Divvy

    Divvy Well-Known Member

    Messages:
    771
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    128
    #2
    Can someone help me with this, please? :)
     
    Divvy, Jan 25, 2023 IP
  3. UpgradeIT.ro

    UpgradeIT.ro Member

    Messages:
    80
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    45
    #3
    It looks like the issue is that the linear gradient background is not covering the entire viewport when the device is rotated to landscape. One way to fix this is to set the background-size property to "cover" for the body element.

    body {
    background: linear-gradient(to bottom right, rgba(0,0,0,1) 0%, rgba(58,1,40,1) 100%);
    background-size: cover;
    }
    Code (markup):
    This tells the browser to scale the background image to be as large as possible so that the background area is completely covered by the background image. The image will retain its aspect ratio, and some parts of the background may be hidden to fill the screen.
     
    UpgradeIT.ro, Jan 25, 2023 IP
  4. Divvy

    Divvy Well-Known Member

    Messages:
    771
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    128
    #4
    Thank you for trying to help me.
    Unfortunately, didn't work, please take a look: https://prnt.sc/0wTN6mDlJiZu

    Any idea how to solve it?
     
    Divvy, Jan 26, 2023 IP