Hi,
I am trying basically to implement this red colour (oval/circle shape) layer on a black background!
I thought about using a container on top but since there are many placeholders and blocks, I don't see how I can do it that way...
Any suggestions, please?
Thanks
Ok I see, i just tried it and just using body will not apply to the menu, you are right. In that case you can also try to put the same options in the header.
header{
.....
}
Hello
Would you like to do this on all pages or it will be specify to pages?ThanksTousif Khan
Hi Azhar,
If I get this right you want dark red color on the right-hand side just like the picture you posted above and the blue lines are just for an explanation they do not exist.
For achieving this you can use the linear gradient property in CSS. Below is the syntax to use it
background-image: linear-gradient(direction, color-stop1, color-stop2, ...) ;
Hi @Azhar Bondi ,
I suggest you using radial-gradient CSS property instead of linear-gradient, since you want circle/oval shaped. For example like this:
background-image: radial-gradient(farthest-corner at 80% 20%, #5d3a3a, black, black);
Here's an image of a sketch I did:
Obviously you can change the percentages and play with the colors, but this achieves what you want. If this is for pagewise, i recomend you placing it on the body.
Let me know if this helps!
Cheers,
Paulo
Hi Paulo, this is how it appears ... And I want it to be applied as well on the menu.
Any tip?
Thank you
Hi again! Thank you Paulo!
Now using the header{}, it is working !! I really appreciate it!
Azhar
Try linear-gradient or radial-gradient , maybe it will help you.
div {
height: 400px;
background: linear-gradient(to right, black 13%, #800000 100%)
#grad1 {
height: 150px;
width: 200px;
background-color: black; /* For browsers that do not support gradients */
background-image: radial-gradient(circle,red,black 80%);