Menu
Can i change:
into:
without using a photo editor
Here Is CSS and HTML code
I couldn't upload the logo because i should have at least 10 reputation to post more than 2 links so i maybe insert it in another comment
header {
background-color: rgba(255, 255, 255, 0.9);
height: 50px;
display: flex;
flex-direction: row;
align-items: center;
position: fixed;
width: 100%;
box-sizing: border-box;
top: 0;
left: 0;
z-index: 2;
}
header .logo {
position: fixed;
left: 50%;
top: 13px;
display: inline-block;
}
.background-image {
position: fixed;
left: 0;
top: 0;
z-index: 1;
width: 100%;
height: 100%;
background: #fff url('https://upload.wikimedia.org/wikipedia/commons/thumb/e/e5/%D0%94%D0%B7%D0%B5%D0%BC%D0%B1%D1%80%D0%BE%D0%BD%D1%8F._%D0%9F%D0%B5%D1%80%D0%B2%D1%8B%D0%B5_%D0%BB%D1%83%D1%87%D0%B8_%D1%81%D0%BE%D0%BB%D0%BD%D1%86%D0%B0.jpg/800px-%D0%94%D0%B7%D0%B5%D0%BC%D0%B1%D1%80%D0%BE%D0%BD%D1%8F._%D0%9F%D0%B5%D1%80%D0%B2%D1%8B%D0%B5_%D0%BB%D1%83%D1%87%D0%B8_%D1%81%D0%BE%D0%BB%D0%BD%D1%86%D0%B0.jpg') no-repeat center center;
background-size: 100%;
}<body>
<header>
<div class="header-section logo">
<a href="/">
<img src="http://i.imgur.com/IB1gfZB.png" alt="...">
</a>
</div>
</header>
<div class="background-image"></div>
</body>
793
You can use opacity to create a semi-opaque image, and you may be fine with that by adjusting it to whatever you need.
But if you also want to change the color of the image darker, you can use CSS filters. You can make it darker/maroon/brown-ish by adjusting the hue. It's worth noting the browser support - https://caniuse.com/#feat=css-filters
header {
background-color: rgba(255, 255, 255, 0.9);
height: 50px;
display: flex;
flex-direction: row;
align-items: center;
position: fixed;
width: 100%;
box-sizing: border-box;
top: 0;
left: 0;
z-index: 2;
}
header .logo {
position: fixed;
left: 50%;
top: 13px;
max-width: 100%;
opacity: .7;
position: absolute;
top: 0; left: 0;
-webkit-filter: hue-rotate(45deg);
filter: hue-rotate(45deg);
}
.background-image {
position: fixed;
left: 0;
top: 0;
z-index: 1;
width: 100%;
height: 100%;
background: #fff url(http://environment.umn.edu/wp-content/uploads/2016/04/global_landscapes_initiative_directory_pages.jpg) no-repeat center center;
}<body>
<header>
<div class="header-section logo">
<a href="/">
<img src="http://i.imgur.com/IB1gfZB.png" alt="...">
</a>
</div>
</header>
<div class="background-image"></div>
</body>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
