Search code examples
cssbackgroundradius

How can i delete border top radius bg transparency?


How can i hide radius bg transparency? i don't want to see, when i scroll the my first landing page to up it will come to up with pages and showing up raidus corners background.

Thoose are ss's

rad2

rad1

and also you can view live : www.havadansantiye.com

look at the top of lef and right corner and scrool first page to up look now corners you will see bg.


Solution

  • Since you have it fixed, overflow won't work because it is actually the content behind that is showing through. You could do a couple ways, but one might be to actually cover up the part of the header that is left uncovered by the border-radius. In order to do that though, you would need a separate element or a pseudo-element. You would make the header itself white to mask out, then use a pseudo :before to style the yellow area. Something like this should work:

    .site-layout-bordered.header-horizontal #header {
       top: 30px;
       left: 30px;
       right: 30px;
       width: auto;
       background-color: white;
    }
    .site-layout-bordered.header-horizontal #header:before {
       content: '';
       position: absolute;
       background: #fcc600;
       display: block;
       width: 100%;
       height: 100%;
       border-radius: 15px 15px 0 0;
    }