Skip to main content
V
VShaneCurtis
Inspiring
August 28, 2022
Question

Expand Colors Around An Image To Cover The Whole Canvas

  • August 28, 2022
  • 2 replies
  • 238 views

Hi Guys,

I have an image that has some gradient style coloring around it but the majority of the canvas is white.  How do I expand the gradient to cover the entire canvas?  Thanks In Advance For The Assist.

 

    This topic has been closed for replies.

    2 replies

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    August 28, 2022

    You can also add a background-color to the html selector which fills in gaps at the top & bottom of page.

     

    html {background-color: #000}

     

    Nancy O'Shea— Product User & Community Expert
    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    August 28, 2022

    Move gradient styles to the body selector which is parent to all other selectors.

    You may need to zero out margins, too.

     

    body {

    margin: 0 auto;

    background: linear-gradient(to bottom, rgba(1,59,130,0) 0%, rgba(1,59,130,0.6) 15%, rgba(1,59,130,0.93) 20%, rgba(6,63,132,1) 21%, rgba(128,166,178,1) 44%, rgba(1,59,130,1) 72%, rgba(1,59,130,1) 77%, rgba(1,59,130,0.6) 82%, rgba(1,59,130,0) 87%);

    }

     

     

     

    Nancy O'Shea— Product User & Community Expert
    Liam Dilley
    Liam Dilley
    Inspiring
    August 30, 2022

    The problems with doing a gradient background of an image with that are..

    - Wont align properly and look funny, plus on different browser scaling it will be even worse.

    - Colours wont match, what CSS uses for colour vs a likely compressed image they wont match.

    So unless its just a basic background as you suggested in your other post Nancy then it needs to either...

     

    - Loose the background in the image - making a transparent PNG of the object(s) of the image and setting the background as a gradient on the HTML element.

    Or

    - Setting the image bigger, 1200px wide or 1800px wide, centering the main focus objects of the image and setting that as the background image with CSS background-size:cover;

    V
    VShaneCurtisAuthor
    Inspiring
    August 30, 2022

    Thanks for the input.  I decided to remove the background completely and replace it with a solid color.

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices