Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Placing image to align with bg gradient

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #261405
    drone4four
    Participant

    Check out my testcase.

    Can someone please lend a helping hand and demonstrate how to make the centre of the radial-gradient background to be centered around the eye’s pupil (the SVG)?

    Thanks for your attention.

    #261406
    Beverleyh
    Participant

    You can change the central position of the radial gradient. There’s a chapter about it here https://tympanus.net/codrops/css_reference/radial-gradient/

    #261453
    drone4four
    Participant

    Thank you for this helpful guide.

    The guide explains that to place the center of the circle gradient in the top left corner, all you have to add is, ‘circle at 0% 0%’. The gradient is then positioned so that the 0% starting point that the gradient emerges from is positioned at the top left corner of the gradient box. By adjusting the values in percent, you can shift the location of the circle. I have achieved success.

    As you may have noticed in my updated testcase there, I added:

     background-repeat: no-repeat;
     background-attachment: fixed;
    

    to the body declaration in order to avoid the background from repeating over and over. I like it alot. But what I would like to do next is keep the gradient, but pin it to that top, so that when you scroll down the long form essay (lorem ipsum in the test case linked to below) on my site, the color blue is filled in the background rather than having a red circle staring at you the whole way. I’m trying to keep the circle gradient at the top and the second color to fill in the rest of the background for the remainder of the essay. I’m not sure I am doing a good job explaining. @Beverleyh: Do you know what I am trying to say?

    Thanks again for your attention.

    edit: grammar correction

    #261460
    Beverleyh
    Participant

    I’m trying to keep the circle gradient at the top and the second color to fill in the rest of the background for the remainder of the essay

    Don’t use percentages to position the circle then. Use px or em or whatever.

    #261504
    drone4four
    Participant

    Thank you Beverleyh for your reply.

    I played around with the values as pixels instead of percent but I haven’t achieved what I have set out to accomplish. Here is my new test case with pixel values instead of percentages.

    When you scroll down the Lorem Ipsum essay, the red circle remains in the centre. Take a look at this screenshot. Notice the red circle and the scroll bar? The scroll bar is halfway down the webpage so at this point the background should be pure blue because the red dot should be pinned at the very top of the page.

    I hope I did a better job describing what I am trying to achieve.

    Thanks.

    #261507
    Beverleyh
    Participant

    When you scroll down the Lorem Ipsum essay, the red circle remains in the centre.

    You fixed it there with this, remember?

    background-attachment: fixed;
    
    #261614
    drone4four
    Participant

    Hi @Beverleyh:

    You are that the key property and value at issue here is:

    background-attachment: fixed;
    

    I don’t understand it very well, but Chris Coyier does a terrific job defining the two other potential values for background-attachment:

    fixed stays fixed no matter what. It’s kind of like a physical window: moving around the window changes your perspective, but it doesn’t change where things are outside of the window.
    local was invented because the default scroll value acts like a fixed background. It scrolls both with the main view and the local view.

    I changed ‘fixed’ to ‘local’ in my test case and, Voila! I have arrived at my perfect solution.

    Thank you for your help and for your patience, Beverleyh.

Viewing 7 posts - 1 through 7 (of 7 total)
  • The forum ‘CSS’ is closed to new topics and replies.