Code to place image behind menu

• 

  onyx2018 · Member · Nov 2, 2014 at 5:54 pm

  • Copy link
  • Add topic to favorites

  I need the css to change the background of my menu to a picture.

• 

  raincoaster · Member · Nov 2, 2014 at 6:13 pm

  • Copy link

  You’re in the wrong forum and need to be at WordPress.ORG for help with that version of the software.

• 

  thesacredpath · Member · Nov 2, 2014 at 9:55 pm

  • Copy link

  Hi there, if you are talking about escortinternetdesign.co, which is hosted here at WordPress.com, then you can add an image to the background of the menu (when toggled open) with the following.

  #sidebar {
  background: url("URL_OF_IMAGE") no-repeat scroll 0 0 transparent;
  }

  Adding a background image behind text can be a challenge if the image has light and dark colors in it, so you many also have to work with the text color as well.

• 

  onyx2018 · Member · Nov 3, 2014 at 2:42 am

  • Copy link

  Wow. It’s working. Check it out http://escortinternetdesign.co

  Thanks

• 

  thesacredpath · Member · Nov 3, 2014 at 3:00 am

  • Copy link

  You are welcome. I’d darken up the text a little on the reddish as it is a little hard to read, but it looks good!

• 

  onyx2018 · Member · Nov 3, 2014 at 3:29 am

  • Copy link

  Thank you. Can you help me with the code for that?
  Gail

• 

  thesacredpath · Member · Nov 3, 2014 at 4:08 am

  • Copy link

  Sure thing. I worked off the existing non-hover and hover colors and just darkened them up a bit. You can of course adjust them as desired.

  .widget a, .wp-caption a, .main-navigation a, .widget_flickr #flickr_badge_uber_wrapper a:link, .widget_flickr #flickr_badge_uber_wrapper a:active, .widget_flickr #flickr_badge_uber_wrapper a:visited {
      color: #ee6655;
  }
  .widget a:hover, .widget a:active, .widget a:focus, .wp-caption a:hover, .wp-caption a:active, .wp-caption a:focus, .main-navigation a:hover, .main-navigation a:active, .main-navigation a:focus, .widget_flickr #flickr_badge_uber_wrapper a:hover {
      color: #ee8888;
  }

• 

  onyx2018 · Member · Nov 3, 2014 at 1:17 pm

  • Copy link

  I had a hard time typing it all in, but the results are fab! Thank you so much. You have an awesome gift ~

  Regards,
  Gail

• 

  thesacredpath · Member · Nov 3, 2014 at 3:23 pm

  • Copy link

  You are welcome and thanks Gail. Instead of typing it all in, you can copy and paste the code I gave above directly into the CSS edit window. As long as code you get here is within the grey box like above, it is safe to copy/paste.