How do I add an image to the background of the main nav or main content box.

Hi Amy,
If you use {background-image:none; background-color:transparent;} it should work. If it does not, please be more specific about what theme and class/id you're trying to change and I'll try to test it on my site.

I tried both of those. I know I am identifying the correct block for the nav because I can change the background color, but can not get rid of or replace the background image.

I am using MIT adaptive and here is my code for the css injector:
#block-system-main-menu {
background-color:transparent;
background-image:none}

This is the page I am using to test my css:
https://wellcheck.mit.edu/testing

I created my own block just to see what would happen, and the image is showing up there, although I can't get rid of the repeat.

Ideally I would have the main nav be transparent and an image in the content area. I can't seem to create a new content management area, and can't even change the background color for the one that is there.

I added this to the css injector, and it isn't even showing up when I use firebug, so maybe I am identifying the wrong block?
#content-style {background-color: black;}

Thank you for your reply!
Amy

I just took a look and used firebug to check what was going on. It looks like you need to follow CSS syntax exactly!

You posted:
#block-system-main-menu {
background-color:transparent;
background-image:none}

but you need to include the ending semicolon like this: {background-image:none;}. I think that will solve it.

Also, if you want to get rid of the underlines, I would do this:
#block-system-main-menu ul.menu li a:hover, a:focus, a.active:hover, a.active:focus, li a.active:hover, li a.active:focus {border-bottom: none;}

As for the image repeating on your other block, I'd use the # block-block-4 {background-repeat: no-repeat;} tag to override it. I think your site is shaping up beautifully by the way! Keep up the good work.

I got it working if you want to check it out: https://csf-dev.mit.edu/

The code is:
#block-system-main-menu {background-color:transparent; background-image: url("https://wellcheck.mit.edu/sites/default/files/css_injector_images_image/..."); background-repeat:no-repeat; font-size:16px; font-weight: normal; text-transform:none;}
#block-system-main-menu a:link {color:#000000;} /*I changed these colors so you'll get black instead of white, insert your own colors for branding
#block-system-main-menu a:visited {color:#000000;}
#block-system-main-menu a:hover {color:#000000;}
#block-system-main-menu a:active {color:#000000;}
#block-system-main-menu li {margin-bottom:15px;} /*this is spacer for my website's aesthetic, take it or leave it
#block-system-main-menu ul.menu li a:hover, a:focus, a.active:hover, a.active:focus, li a.active:hover, li a.active:focus {border-bottom: none;} /* gets rid of the bottom border

OK, getting very close to my goal, but I can't get the "trans40.png" image to go away. Both that image and my image seem to be there. I know that page looks a little crazy right now. Just trying things out.

Thank you so much for all your help!
-Amy

Weird, on my site the new URL overrides the old background image URL. I'm not seeing the example on your test site. I got the block to work on csf-dev.mit.edu, maybe use firebug (https://getfirebug.com/) to inspect the element on my site to see if there's a difference between my setup and your setup?

Yes, the code is there for the main nav of the testing page (http://wellcheck.mit.edu/testing) When I look at your page in firebug the css injector code is showing up first, but on my page it displays afterwards. Otherwise the code for the background image seems identical.

Aha! I got it! I needed to add the ".region-sidebar-first" to the code. Thank you so much for all your help!