I'm having trouble getting the background of my CSS to have opacity without affecting the navbar.
I've tried adjusting the body tag in CSS, but the navbar keeps taking on the opacity instead of the background.
Is there a way to fix this issue?
body {
background-image: url("images/fenerbahce.jpeg");
background-size: cover;
opacity: 50%
}
.navbar {
padding: 20px;
display: flex;
align-items: center;
border-bottom: 1px solid #939392;
top: 0;
background-color: #ccd0d0;
}
Opacity is represented as a decimal value. For example, 50% is shown as '0.5'
body {
background-image: url("images/fenerbahce.jpeg");
background-size: cover;
opacity: 0.5
}
.navbar {
padding: 20px;
display: flex;
align-items: center;
border-bottom: 1px solid #939392;
top: 0;
background-color: #ccd0d0;
}Furthermore, the navbar is likely part of the body. Therefore, adjusting the opacity in the body affects the opacity of every component.
It appears that you may not want the entire body to have a slight see-through effect (as can happen with opacity: 50%), and similarly, you probably don't desire the text in your navbar to be too faint.
It seems like what you're seeking is a way to create a slightly transparent background for your navbar. Since it consists of just one color, you can achieve this by tweaking a few bytes at the end of the hex color code. Experiment with different values to find the transparency level that suits your needs.
Here's a straightforward example:
<style>
* {
margin: 0;
}
body {
background-image: url("https://picsum.photos/id/1015/1024/768");
background-size: cover;
}
.navbar {
padding: 20px;
display: flex;
align-items: center;
border-bottom: 1px solid #939392;
top: 0;
background-color: #ccd0d066; /* Add some transparency here */
}
</style>
<body>
<div class="navbar">
<ul>
<li>link1</li>
</ul>
</body>I am currently using material-ui version 3.5.1 My goal is to have ListItem utilize the Link component in the following manner: <ListItem component={Link} to="/some/path"> <ListItemText primary="Text" /> </ListItem> However, when I tr ...
Encountering an issue with the following error message: Element is not clickable at point (791, 394). Other element would receive the click: Command duration or timeout: 66 milliseconds Any ideas on what's causing this? Using selenium web driver ve ...
http://codepen.io/janesmith/pen/dqweasd Need some help with this issue. I am trying to have the div start with a scale of 0 and then scale in when clicked. However, my attempt was unsuccessful. CSS /* Styling for Content Area */ .content div { width ...
I am facing some issues with the navigation bar on my website. The position of the navigation bar shifts when the dropdown menu is displayed. Additionally, resizing the browser also causes changes in the navigation bar layout. This is not what I intended, ...
Currently encountering the following error message: code EUNSUPPORTEDPROTOCOL Unsupported URL Type "workspace:": workspace:* I have made sure to update my node to the most recent recommended version. In a previous project, I successfully instal ...
Whenever I execute firebase deploy in my react application, it seems to deploy older versions of files. Is there a way to make it deploy only the most recent changes that have been committed? ...
Here is the code I've created: <a href="#" id="home" class="showLink" onclick="showHide('example');return false;"> <li class="buttons">home</li> </a> <a href="#" id="user" class="showLink" onclick="showHide(&a ...
Currently, I am working on a project involving ReactJS and I have opted to use the Next.js framework. As of now, I am focused on implementing the "update module" (blog update) functionality with the editor component called QuillNoSSRWrapper. The issue I ...
There are two elements positioned side by side: an input field and a div. The div is absolutely positioned inside a relative element and placed to the right of the input. The input field has a fixed height, while the height of the div depends on its conte ...
Trying to target the initial blockquote in an email body with varying formats, such as: <div class="myclass"> <br><p></p> <div><div> <!--sometimes with less or more div--> <blockquote&g ...
Attempting to add animation to a button click using borders and jQuery animate function. jQuery( '#sendForm' ).hover( function (){ jQuery( this ).animate({ borderTopWidth: "5px", borderBottomWidth: "0px" }, 'fast&apo ...
Creating a Navigation Menu in Java Script: $(function() { var nav = $('#nav'); var navHomeY = nav.offset().top; var isFixed = false; var $w = $(window); $w.scroll(function() { var scrollTop = $w.scrollTop(); var sho ...
Issue: I'm facing a problem with accessing query parameters in my API route. Despite sending the correct URL with the query parameter, req.query is returning undefined data instead of the expected values. Here's the Request Handling Code: impor ...
I am encountering an issue with the navbar in my Bootstrap project. Despite having specified the background color to be aqua in my boot.css file, it is not overriding the default dark color set in the Bootstrap CSS. To customize the styling of the navbar ...
While using React with MaterialUI, I'm encountering an issue where a div element remains stuck on the screen after closing a MUI dialog: <div class="MuiBackdrop-root" aria-hidden="true" style="opacity: 0; transition: opacity 195ms cubic-bezier(0.4 ...
I am looking for a way to make a text field automatically underline as the user types. The line should follow along with the characters in real-time, and when the user moves away from the field, I want the line to fill up the entire width. This signifies t ...
Does anyone know how to create a div with a partial background like the example shown here? https://i.sstatic.net/CDqCe.png I attempted to add white margin, but I'm struggling to get it right. ...
I set up a page to display a collection of data and automatically update a document whenever changes are made. However, I noticed a significant increase in my read counts - over 2k reads for only 250 docs even after opening the page just three times. Ideal ...
Here is the unique html code snippet for a layout that dynamically creates grids using json input: <!DOCTYPE html> <html lang="en"> <head> <title>Booking Page</title> </head> <body> <div ...
We are currently facing an issue on our website where autofill is not working correctly due to having two password input fields - one for login and one for the password. Browsers are unable to remember the login information and paste the password into th ...