Hi I have a background video (The jellyfish move) this is a photo of a frame of this video I need to understand why writing "Medusa" text has a background color, maybe the color is #222, but I don't see how to disable it in code. i need to create a navbar but the background color is getting in the way! I need the navigation bar to be transparent like this
See Code
import logo from './logo.svg';
import './App.css';
import bgvideo from './components/bgvideo.mp4';
function App() {
return (
<div className="App">
<div className='navbar'>
<h1>Medusa</h1>
</div>
<div className='bg'>
<video autoPlay muted loop>
<source src= {bgvideo} type ="video/mp4" />
</video>
</div>
</div>
);
}
export default App;* {
margin: 0;
padding: 0;
background-color: #222;
}
video {
width: 100vw;
height: 100vh;
object-fit: cover;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: -1;
}
h1 {
color: white;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
font-weight: bold;
text-align: center;
font-size: 6rem;
margin-top: 30vh;
background-image: none;
background-color: none;
}this should fix your problem of navbar not being translucent
.navbar {
background-color: rgb(0 ,0 , 0, 0.5);
}
using the rgb coloring it you can have a 4th value for opacity or you can simply use the opacity type
.navbar {
opacity: 50%;
}
* {
margin: 0;
padding: 0;
/* background-color: #222; remove this line */
}
video {
width: 100vw;
height: 100vh;
object-fit: cover;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: -1;
}
h1 {
color: white;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
font-weight: bold;
text-align: center;
font-size: 6rem;
margin-top: 30vh;
/* background-image: none; and no need for this */
/* background-color: none; and this */
}background-color: none; is not valid CSS, background-color will only take a colour value. You can use transparent instead so use background-color: transparent; instead of background-color: none;. You may find this does nothing when you add it to your <h1> element and that is because the *{} css query selector is giving absolutely every single element that styling, this will make the div containing the text have a background colour. Putting stuff like background color in a * query selector is generally a bad practice. However I don't know what your intentions are. You should probably give the <body> element the background color styling so it doesn't interfere with other elements .