How Do I change the color of my header?

[amzzzg]

I have the Agency theme and the header is black. It's all done in code, not by color so I can't simply look for "black" obviously. I've tried a few places and cannot figure out where. IS it under Header? Wrap? I just do not know. My site isn't live to be able to post it here for someone to look at the black but it has to be a common change that I as a newbie cannot grasp. Can someone please post the code and a changed code with a diff color than black> That way I can locate it and change it to the color I want.

Thank you

[bandj]

Agency uses a background image in the body which repeats all the way across so the header doesn't have a background.

body {
background: #f1f1f1 url(images/bg.png) repeat-x;

}

the #header also is 960px wide so it doesn't stretch across the whole screen. You can give the header a color by adding
background: yourcolor;

to the #header

[amzzzg]

Bandj- I added a color to the background of the image and that did help some, thank you very much! I am still having trouble with the rest of header area being black. I did add the color  code I want to the background area and still nothing. Can you tell me where to replace the code with my preferred color?  I just cannot figure this out, it's been hours. Here is the code:

/* Body ------------------------------------------------------------ */

body {  background: #e5e9ee url(images/bg.png) repeat-x; }

/* Wrap ------------------------------------------------------------ */

#wrap {  margin: 0 auto;  width: 1000px; }

/* Header ------------------------------------------------------------ */

#header {  margin: 0 auto;  min-height: 200px;  overflow: hidden;  text-shadow: 1px 1px #000;  width: 110%; }

#title-area {  float: left;  min-height: 100px;  overflow: hidden;  padding: 15px 0 0;  width: 350px; }

#title {  font-family: 'PT Sans', sans-serif;  font-size: 60px;  line-height: 1;  margin: 0;  text-transform: uppercase; }

#title a, #title a:hover {  color: #fff;  text-decoration: none; }

#description {  font-family: 'PT Sans', sans-serif;  font-size: 14px;  text-transform: uppercase; }

p#description {  color: #777; }

#header .widget-area {  float: right;  padding: 40px 0 0;  width: 500px; }

/* Image Header - Partial Width ------------------------------------------------------------ */

.header-image #title-area, .header-image #title, .header-image #title a {  display: block;  float: left;  height: 115px;  overflow: hidden;  padding: 0;  text-indent: -9999px;  width: 350px; }

.header-image #description {  display: block;  overflow: hidden; }

/* Image Header - Full Width ------------------------------------------------------------ */

.header-full-width #title-area, .header-full-width #title, .header-full-width #title a {  width: 100%; }

/* Navigation Constants ------------------------------------------------------------ */

li:hover ul ul, li.sfHover ul ul {  left: -9999px; }

li:hover, li.sfHover {  position: static; }

li a .sf-sub-indicator {  position: absolute;  text-indent: -9999px; }

/* Header / Primary / Secondary Navigation ------------------------------------------------------------ */

.menu-primary, .menu-secondary, #header .menu {  margin: 0;  padding: 0;  overflow: hidden;  width: 100%; }

.menu-primary li, .menu-secondary li, #header .menu li {  float: left;  list-style-type: none;  text-transform: uppercase; }

#header .menu {  float: right;  width: auto; }

.menu-primary li a, .menu-secondary li a, #header .menu li a {  color: #1d3b6c;  display: block;  font-size: 14px;  padding: 6px 15px 4px;  position: relative;  text-decoration: none; }

.menu-primary li a:active, .menu-primary li a:hover, .menu-primary .current_page_item a, .menu-primary .current-cat a, .menu-primary .current-menu-item a, .menu-secondary li a:active, .menu-secondary li a:hover, .menu-secondary .current_page_item a, .menu-secondary .current-cat a, .menu-secondary .current-menu-item a, #header .menu li a:active, #header .menu li a:hover, #header .menu .current_page_item a, #header .menu .current-cat a, #header .menu .current-menu-item a {  -moz-border-radius: 5px;  -moz-box-shadow: 0 1px 0 #cb4d56;  -webkit-border-radius: 5px;  -webkit-box-shadow: 0 1px 0 #cb4d56;  background-color: #1d3b6c;  border-radius: 5px;  box-shadow: 0 1px 0 #cb4d56;  color: #cb4d56; }

.menu-primary li li a, .menu-primary li li a:link, .menu-primary li li a:visited, .menu-secondary li li a, .menu-secondary li li a:link, .menu-secondary li li a:visited, #header .menu li li a, #header .menu li li a:link, #header .menu li li a:visited {  -moz-border-radius: 0;  -webkit-border-radius: 0;  background: none;  border-bottom: 1px dotted #333;  border-radius: 0;  box-shadow: none;  color: #cb4d56;  font-size: 13px;  padding: 5px;  position: relative;  text-transform: none;  width: 138px; }

.menu-primary li li:last-child a, .menu-secondary li li:last-child a, #header .menu li li:last-child a {  border: none; }

.menu-primary li li a:active, .menu-primary li li a:hover, .menu-secondary li li a:active, .menu-secondary li li a:hover, #header .menu li li a:active, #header .menu li li a:hover {  color: #fff; }

.menu-primary li ul, .menu-secondary li ul, #header .menu li ul {  -moz-border-radius: 5px;  -webkit-border-radius: 5px;  background-color: #1d3b6c;  border-radius: 5px;  height: auto;  left: -9999px;  margin: -5px 0 0;  padding: 3px 10px 5px;  position: absolute;  width: 148px;  z-index: 9999; }

.menu-primary li ul a, .menu-secondary li ul a, #header .menu li ul a {  width: 130px; }

.menu-primary li ul ul, .menu-secondary li ul ul, #header .menu li ul ul {  margin: -34px 0 0 149px; }

ul.menu li:hover>ul, ul.menu li.sfHover ul, #header .menu li:hover>ul, #header .menu li.sfHover ul {  left: auto;

 

 

[bandj]

you can add a color to

#header {

color: yourcolor;

}

but it won't fill the whole screen. It will fill the 960px area only. You would have to change the background image if you wanted it to go all the way across like the demo.

The only other thing you could do would be to adjust the widths of all the divs and wraps.

[amzzzg]

Thank you for your time but adding color isn't what I'm trying to do. I just want the image to go up there and all the black around my image to go away. I do appreciate your time though.

[Pinky]

All the black is coming from the background image - not the header.

So if that's what you are looking to get rid of you need to change this:

/* Body ———————————————————— */

body {  background: #e5e9ee url(images/bg.png) repeat-x; }

to this:

/* Body ———————————————————— */

body {  background: #e5e9ee; }

At least I think that's what you mean (?)

---

cheers

Pinky

[amzzzg]

I put the mess of a site live so you can see what I'm talking about. The logo is NOT supposed to be this huge mess on there that you will see it is. We have tried to reduce the image many different ways and it keeps distorting. All the black area around the already screwed up header is what I am talking about. Can you also tell me what to do about the size of the logo? We have spent days and days trying. So frustrating.

http://www.usmcfamilies.org

 

site is just a complete mess.

[bandj]

your link goes to this

 
Briefly unavailable for scheduled maintenance.

[Pinky]

hehe we'd love to be able to help you... can you please turn off maintenance mode so we can see your site

---

cheers

Pinky

[amzzzg]

I am so sorry to both of you. I think I have lost so much sleep trying to figure this out that I thought I disabled it--- it is now disabled so you can see the mess I have.  I cant get logo to shrink without distortion. I cant get a filler to fill up all that black space and now I cant get the slider to work right either! I am so dismayed.  I had this site designed by a developer and paid good money and she wiped it out when we downsized. Do upsetting.

[bandj]

your background image is 960x389 so...

in your #header

change min-height to 389px

and then to make it scale down as the window gets smaller add this also.

background-size: contain;

[amzzzg]

Thank you very much- that helped me fill the color in and get the whole logo to show!!!!!!     That logo is far too big for the header. When I am using photoshop elements to reduce it- terrible distortion occurs. Do you know a way for me to make it smaller? The developer only gave us one size and that was for print she said. We don't know what to do.

[bandj]

I'm not familiar with options in elements. Print to web usually have to change dpi (300 to 72) mode (cmyk to rgb). Resample image type (bicubic smoother, bicubic sharper). Save for web...I don't know that elements have these features.

One other thought. Open your site and do a screen capture, open that in elements, cut out the image and go from there. If you're using chrome (not sure if firefox does this) you can hold down the option key and hit the + key to enlarge the image before you do the screen grab.

[Pinky]

I often use Picture Resize Genius from lonking.com (not an affiliate)

It's quick and easy and will do bulk image resize, rename and more

I can usually do a few hundred images in around 15 seconds!

---

cheers

Pinky

[amzzzg]

Thank you all for your help. Bandj- that worked! Pinky- I am using that now for another part of the site thank you for suggesting!

[Author]

Posts