How do I make div go under transparent sticky header?
Question
How do I make the background image looks like it's under the header?
https://public.brayzenchase.repl.co/
* { margin: 0; padding: 0; } header { height: 100px; width: 100%; background-color: rgba(232, 238, 242, 0.3); position: sticky; top: 0; border-bottom: 3px solid #37393A; display: flex; align-items: center; justify-content: center; } section { height: 100vh; width: 100%; background-image: url('https://public.brayzenchase.repl.co/IMG_0290.JPG'); background-repeat: no-repeat; background-size: cover; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <header>Sticky Transparent Header</header> <section></section> </body> </html>
1 answers
solution1
0 2021-06-28 17:04:48
Appending the background image to body will do the trick. You are appending it to section , which comes after the header .
* { margin: 0; padding: 0; } header { height: 100px; width: 100%; background-color: rgba(232, 238, 242, 0.3); position: sticky; top: 0; border-bottom: 3px solid #37393A; display: flex; align-items: center; justify-content: center; } body { height: 100vh; width: 100%; background-image: url('https://public.brayzenchase.repl.co/IMG_0290.JPG'); background-repeat: no-repeat; background-size: cover; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <header>Sticky Transparent Header</header> <section></section> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How do I make a HTML div go under another div?
How do i make div go under another div making columns
How do I make an element go under a table-cell in the same div with display: table?
how do i make the the header of my table sticky?
How do I make a div go to the rightside?
How to show a section or a div outside of the header, exactly under the sticky menu?
How do I make the shadow of this ::before element go underneath the entire header div?
How do I make a transparent mask div on top of an iframe?
In div, how do I make the background transparent, but not the outline?
How to make an image go under a <div> in HTML?
Related Tags