Image as menu background


#1

Two related questions:

  1. How do I set an image as the menu background? When I scroll down on the front page, the menu moves from transparent to black. I see where I can set that color to another, but is there a way to have an image background?

  2. If I do stick with a solid color menu background, how do I turn off the transparency? The color I’m picking looks different because it’s transparent. Thanks!


#2

Hello,

you can set an image as the background if you use this in a custom css plugin or child theme:


.site-header {
  background-image: url('wp-content/...') !important;
}

You can find the url if you upload the image (the url stands on the right) or if you go trough the path on your FTP server.

If you want the image background on the normally transparent and the black scrolled menu bar, use this:

.site-header.float-header, .site-header {
  background-image: url('...') !important;
}

The transparency comes with the rgba color code.
So use this:

.site-header.float-header {
  background-color: rgba(255,255,255,1) !important;
}

The 255,255,255 stands for white. 0,0,0 would be black. The 1 stands for the opacity (alpha in rgba) of 100%. The default value in the theme is 0.9 I think, so a little bit transparent. I don’t know which color you want to use, so if you want that solid color, convert the hex color code (this ‘#02ff6a’ colors) to rgb (e.g. 255,27,153) and copy it to your code.

Kind regards,
WeAreOne


#3

Thanks! The code works to make the menu background an image, but I can’t make the image invisible/transparent when I am scrolled up to the very top the way a solid color would be. Any ideas on how to fix that? I’m using the following code, but the image in the menu has no transparency at all:

.site-header.float-header, .site-header {
  background-image: url('wp-content/image...') !important;
}

.site-header.float-header {
  background-color: rgba(255,255,255,.5) !important;
}

#4

The problem with that is, that your rgba background opacity doesn’t work on the image. You could give this a opactiy: 0.5; but then your menu links would disappear too.

Please share your link from you page with me and I look after a solution.


#5

The page is abovethecrowdconsulting.com - you’ll see that the header with the image looks a little funny since it doesn’t match up with the background image. If there would be a way to make it totally transparent at first, but slowly appear as we scroll down, that would be ideal. Thank you so much for all the of the quick help!


#6

You could apply this code:

.site-header {
  opacity: 0;
}
.site-header.float-header {
  opacity: 1;
}

This would be the easiest way to make it invisible and then visible with scrolling down. I don’t know whether this is exactly what you want since the menu links are hidden too, but otherwise you may try this one to set the background transparent on the first view and set the background with scrolling.

  1. Delete the CSS with the image for the class .site-header. There must be only this:

.site-header.float-header {
  background-image: url("wp-content/uploads/2015/09/cropped-skyline-at-night1.jpg") !important;
}

  1. Normally it should work now. If not, I will look up how it will work.

You’re welcome dude.


#7

That works - thanks! The second option is great, it behaves exactly like a solid color would


#8

Last question about this (I hope!) The image that I’m using as the header background is the same image as my big splash image on the front pate. The splash image resizes with the window and looks great - I can see the entire thing. But the header background is being displayed in the original resolution - meaning that horizontally, only a fraction of the image is being shown. Is there a way to scale it so that I get the entire horizontal aspect of the image no matter the window size?

For example, if the original image is 100 pixels wideg, the splash will show all 100 no matter the window size. But the same image used as the menu background is only showing something like 30 pixels because it is not scaling. (And as I resize the window horizontally, it will show more or less pixels.)

Thanks again


#9

Add this one to the background-image:

background-size: cover;

that it looks that way:


.site-header.float-header {
 background-image: url("wp-content/uploads/2015/09/cropped-skyline-at-night1.jpg") !important;
 background-size: cover;
}

Does this bring up the effect you want? It should make the background-image to cover the screen with its size, no matter how wide the screen is.

Edit:

I tested this on your site again and maybe it is better to make the image not being fade in. Try the solution above and maybe try this again. Perhaps you think this way is better:


.site-header, .site-header.float-header {
 background-image: url("wp-content/uploads/2015/09/cropped-skyline-at-night1.jpg") !important;
 background-size: cover;
}

In this case the menu hast got the background without scrolling too. But when you scroll you see the image is rezised vertically instead of being faded in.


#10

Both great options - I’ll have to play with them each on various devices and window sizes and see which looks better. Thank you again so much