Header image on Cordobo Greenpark 2

There are thousands of WordPress themes – which means that many people won’t be familiar with your particular theme. So a link to your site might help.

Thank you. Makes sense. Here it is: https://landscapephotographyblogger.com/

That is one heck of a long domain! 0_o

Look into the style sheet, you should be able to change:

#header {
 background: url(img_url.jpg);
}

Thanks, Brian

Thanks for writing. There are only two sections in the style.css that contain the word header:

#header,
#main,
#footer {
background-color: #fff;
text-align: left;
margin: 0 auto 3px;
width: 985px;
}

#header,
#sidebar,
#footer { font-size: 0.7em; }

#header { height: 146px; margin-top: 10px; position: relative; }

#container { float: left; margin: 0 -350px 0 0; width: 100%; }

#content {
border-right: 3px solid #D5DADD;
margin: 0 350px 0 0;
overflow: hidden;
padding: 19px 0 0;
}

(AND A LITTLE LOWER DOWN THE PAGE)

/* HEADER
——————————————————————- */

/* Start EXAMPLE CODE image logo */
/*
#logo, #logo a { display: block; height: 19px; width: 87px; }
#logo { position: absolute; top: 28px; left: 27px; }
#logo a { background: transparent url(img/logo.png) top left no-repeat; text-indent: -9999em; }
.description { color: #B8860B; display: block; left: 124px; position: absolute; top: 44px; }
*/
/* End EXAMPLE CODE image logo */

/* Start EXAMPLE CODE text logo */

#branding { display: block; position: absolute; top: 30px; left: 28px; }
h1#logo { font-size: 30px; line-height: 1.2; margin: 0; }
#logo, .description { color: #B8860B; float: left; margin: 17px 0 0 10px; }

/* End EXAMPLE CODE text logo */

I thought I could put an image in the logo area, but it is only a small portion of the header. I want an image all the way across the top, like I read in the instructions in the Codex, but there is no code anywhere that looks anything like the instructions in the Codex. It is after all a photography blog and needs a photograph as a header. I would just dump and move to another theme, but there are features I like about this theme. I already am trying out the “Cutline” them as recommended by ProBlogger, but it is lacking in a few areas that my current them has.

there is no background style for #header yet;
you could add one in style.css:

#header {background: url(img/myheaderimage.jpg); }

ideally you would save your header background image in the /img folder of your theme, and reference it as above.
(if you have saved it somewhere else, you would need to use the full path to the location: example – https://www.website.com/full/path/myheaderimage.jpg )

some fancy shadow covers the #header area below the nav:
#submenu-bg { background: transparent url(img/bg-submenu.jpg) 0 3px repeat-x; height: 30px; width: 985px; }
change it to:
#submenu-bg { background: transparent; height: 30px; width: 985px; }

the background image should be 985px wide by 146 px high.

any other height would need some fine adjustment in one of the #header styles.

Thank you. I’ll try that.

Oh, by the way, any ideas of how I can move the text and header color band/bar up some and put the image below that? I can play around with doing it different ways, but my sense is that the header will not look so good or even be very readable in front of an image in the same position it is now.

this style in style.css determines the position of the green bar:

#nav { position: absolute; top: 75px; left: 0; width: 985px; }

changing ‘top: 75px;’ will move the band up/down.

then there are these two edges hanging out:

body {
  background: url(img/bg-body.png) 50% 74px no-repeat;
  *background-position: 50% 84px;
  font: 100.1%/1.5 "Helvetica Neue", Arial, "Lucida Grande", "Lucida Sans Unicode", "Microsoft YaHei", sans-serif;
  font-smooth: always;
  text-align: center;
}

changing the ’74px’ will move this background image up/down.

and this style moves the title position:

/* Start EXAMPLE CODE text logo */

#branding { display: block; position: absolute; top: 60px; left: 28px; }

that should give you enough levers to play around with; good luck ??

Thank you, this is a great help. I’ll experiment and ask another question if something is not smooth. Best to you.

Hi Alchymyth, I was able to add an image to my header using your instructions. It worked out very nicely, thank you. Now I need to change the color of the main site title. Any idea what the code will look like for this? I have been fishing around in style.css and haven’t been able to locate what I need to change.

Anyone?

Well, thank you for your help with the main issue in this thread. I started another thread on the color, but I also have now solved that issue too.