I changed the background image of my forum's header and now I want to fade this background image where the menu buttons are from clear to white or grey. So the nav_menu container (if it's the right point to start) should show the background image at the top and a white or grey color at the bottom. Can opacity be a solution?
God, I need to work on my english! :-[
If I understand correctly you could use a linear-gradient going from transparent to some solid color. For example, here's a line from something I was playing around with a couple of years ago:
background-image: linear-gradient(to left, rgba(0,0,0,0) 800px, #090 1000px), url(images/head.jpg);
Yes .. that works with opacity ...
Give the image the css style opacity: 1;
And on the button:hover and button:focus the style opacity:0.5;transition:opacity 0.6s;
This means the image is dimmed to the half over 0,6 second if the mouse is moved over the buttons
Test it ...
Apologies for the hijack, but that's a great looking site
@Jorin. Now back to the topic. ;)
Based on
@Frenzie suggestion I think something like this?
#top_section {
linear-gradient(to bottom, rgba(0,0,0,0) 170px, #f0f0f0 185px), url(../../images/bg_ep.png);
}
@Frenzie You did understand right. That's exactly what I wanted. :)
@Feline Thank you, but not the buttons should fade but the background behind them.
@badmonkey Oh, thank you very much! O:-)
@emanuele Thanks! I will try this!
Thanks, this worked:
#top_section {
background: linear-gradient(to bottom, rgba(0,0,0,0) 125px, rgba(210,210,210,1) 220px), url(../../images/bg_ep.png), #E6E6E6;
background-position: center;
box-shadow: 0 1px 4px #666;
border-top: 1px solid #5BA9D9;
border-bottom: 3px solid #5BA9D9;
}But only when the header is not collapsed. When it is, the fading disappears. That's why I asked about the div.
I tried this:
.nav_menu {
background: linear-gradient(to bottom, rgba(0,0,0,0) 0px, rgba(210,210,210,1) 95px), url(../../images/bg_ep.png);
}and this:
#nav_menu {
background: linear-gradient(to bottom, rgba(0,0,0,0) 0px, rgba(210,210,210,1) 95px), url(../../images/bg_ep.png);
}Nothing happened. I am really not good at this! :-[
Wouldn't that be #menu_nav unless you changed the ID?
Oh, such a shame! You are absolutely right! :-[
It works like a charme with this code:
#top_section {
background: #E6E6E6;
background-image: url(../../images/bg_ep.png);
background-position: center;
box-shadow: 0 1px 4px #666;
border-top: 1px solid #5BA9D9;
border-bottom: 3px solid #5BA9D9;
}
#menu_nav {
background: linear-gradient(to bottom, rgba(0,0,0,0) 5px, rgba(200,200,200,1) 40px);
}Great, thanks a lot! :)
Sure .. but the action on the Buttons (clicked/active) should hide the image (I think) .. or I have not understand you ...
Fel
Sure they should hide the background image. They do. So what's your point?