Question 45874 in CSS Question posted in
Some basic documentation can be found here.

make background linear gradient fixed – CSS

I’m not sure if my question makes sense but I’m trying to make my linear gradient stay fixed on different screen sizes. The CSS property is this
background: linear-gradient(to right, #00008B 19.5%, #E60026 0%);
I have a logo in between the two color and I want the colors at the specified dimension. For example, if my logo is Stackoverflow– I want the blue hex-code at 19.5% to stay at ‘Stack’ while the remaining percentage occupies the ‘overflow’ on all screen sizes. I hope my problem is clear

I have tried background-attachment: fixed but its not working

Tags:

2

Answers


  1. 0

    Really small answer based off Temani Afif’s comment.

    body{background: linear-gradient(to right, #00008B 200px, #E60026 0%);}
    <body>

</body>
    Login or Signup to reply.
  2. 0

    I don’t know if I understood your question correctly.
    Is your question that the logo has different sizes on different screens and now you want the background of the logo to be a certain color and the empty space around the logo to be a different color?

    If this is your question, you can use this solution.
    Consider the size of your logo relativ to parent element or screen.
    If the size is determined relative to the parent, use percent. it is a good choice, now you should also use percent for the gradient.
    If it is determined by the ratio of the monitor, VW is a better choice. Now you have to use VW for the gradient as well.

    If I understand your question correctly, I guarantee that this answer is correct. You just need to do some math.

    for example if your logo is 200 * 200

    html:

    <div id="logoFrame">
    <img id="logo" src="...">
</div>

    css:

    #logoFrame_{
    background: linear-gradient( to right, #222, #222 40VW, #F03 40VW, #F03 60VW, #222 60VW, #222 ); /* SET YOUR OWNE GRADIENT */
    height: calc( 20vw + 100px); /* ONLY IF YOUR IMG IS ABSOLUTE POSITION, YOU SHOULD SET PARENT HEIGHT, IMG SIZE + PADDINT TOP + PADDING BOTTOM*/
    padding: 50px 0
}
#logo_{
    display: block;
    margin: 0 auto; /* FOR CENTER IMG */
    width: 20vw;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search