No Option to Upload Header Image

I would do the following:
– upload your header image with FTP to your theme’s images folder (make your header image 960 x 165px)
– go to your theme’s style.css and add the following rule to #header:
background-image:url(images/YOUR-HEADERIMAGE-NAME.png);

[ Moderator Note: Please post code or markup snippets between backticks or use the code button. Or better still – use the pastebin ]

Thank you Alain,

I’m still struggling unfortunately. I have uploaded the media in the correct size and got the link for it: “https://www.satinandsnowflakes.com/wp-content/uploads/2012/08/header.png”

But looking at the stle.css, I can’t find the exact location you’re talking about. Here’s what I have. I don’t really know which one I’m supposed to write it in.

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

#header {
	background: #fff url();
	height: 165px;
	overflow: hidden;
	width: 960px;
}

#title-area {
	float: left;
	overflow: hidden;
	padding: 20px 0 0;
	width: 265px;
}

#title {
	font-size: 24px;
	line-height: 30px;
}

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

#description {
	font-size: 12px;
	font-style: italic;
}

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

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

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

.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: 960px;
}

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

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

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

/* Header Right Navigation
------------------------------------------------------------ */

#header ul.nav,
#header ul.menu {
	float: right;
}

#header ul.nav ul,
#header ul.menu ul {
	float: right;
	width: 100%;
}

#header ul.nav li,
#header ul.menu li {
	background-color: #fff;
	float: left;
	list-style-type: none;
	text-transform: uppercase;
}

#header ul.nav li a,
#header ul.menu li a {
	color: #fff;
	display: block;
	font-size: 12px;
	padding: 7px 10px 5px;
	position: relative;
	text-decoration: none;
}

#header ul.nav li a:hover,
#header ul.nav li a:active,
#header ul.nav .current_page_item a,
#header ul.nav .current-cat a,
#header ul.nav .current-menu-item a,
#header ul.menu li a:hover,
#header ul.menu li a:active,
#header ul.menu .current_page_item a,
#header ul.menu .current-cat a,
#header ul.menu .current-menu-item a {
	background-color: #000;
	color: #fff;
}

#header ul.nav li a.sf-with-ul,
#header ul.menu li a.sf-with-ul {
	padding-right: 25px;
}	

#header ul.nav li a .sf-sub-indicator,
#header ul.menu li a .sf-sub-indicator {
	background: url(images/arrow-down.png) no-repeat;
	display: block;
	height: 10px;
	overflow: hidden;
	position: absolute;
	right: 10px;
	text-indent: -9999px;
	top: 12px;
	width: 10px;
}

#header ul.nav li li a,
#header ul.nav li li a:link,
#header ul.nav li li a:visited,
#header ul.menu li li a,
#header ul.menu li li a:link,
#header ul.menu li li a:visited {
	background-color: #fff;
	border: 1px solid #666;
	border-top-width: 0;
	color: #fff;
	font-size: 11px;
	padding: 5px 10px;
	position: relative;
	width: 158px;
}

#header ul.nav li li a:hover,
#header ul.nav li li a:active,
#header ul.menu li li a:hover,
#header ul.menu li li a:active {
	background-color: #000;
}

#header ul.nav li li a .sf-sub-indicator,
#header ul.menu li li a .sf-sub-indicator {
	background: url(images/arrow-right.png) no-repeat;
	top: 10px;
}

#header ul.nav li ul,
#header ul.menu li ul {
	height: auto;
	left: -9999px;
	position: absolute;
	width: 180px;
	z-index: 9999;
}

#header ul.nav li ul a,
#header ul.menu li ul a {
	width: 160px;
}

#header ul.nav li ul ul,
#header ul.menu li ul ul {
	margin: -31px 0 0 179px;
}

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

Try this:

#header {
background: url(‘https://www.satinandsnowflakes.com/wp-content/uploads/2012/08/header.png’);
height: 165px;
overflow: hidden;
width: 960px;
}

This is what I’ve done:

/* Header
———————————————————— */

#header {
background: url(‘https://www.satinandsnowflakes.com/wp-content/uploads/2012/08/header.png’);
height: 165px;
overflow: hidden;
width: 960px;

I then pushed “Update File” and it doesn’t seem to change anything. Any ideas? This is super helpful by the way – thank you for taking the time to review this. I’m clueless.

When I go to your site I see a header background now. Refresh your page (F5) to see the changes you’ve made.

You’re absolutely right, but it’s a different header image that I’m trying to add. It’s the same thing but a different colour. It was provided to me when I bought my theme – the creator told me that I need to upload the new image in Appearances – Header.

Have you tried asking in the Genesis support forums? They’re very responsive, and they’re the ones who know the ins and outs of this particular theme (which most of us here wouldn’t have access to). https://www.studiopress.com/support

I’ll give that a shot – it seemed to me that because the Header section was missing in the Appearances part, it would have been a WordPress problem.

Thanks for your help!

This:

#header {
background:transparent url('https://www.satinandsnowflakes.com/wp-content/uploads/2012/08/header.png');
height: 165px;
overflow: hidden;
width: 960px;
}

…needs to read like this:

#header {
background: url('https://www.satinandsnowflakes.com/wp-content/uploads/2012/08/header.png') top left no-repeat;
height: 165px;
overflow: hidden;
width: 960px;
}

You have to “tell” the server where to place the image, which is what “top left no-repeat” does, and what the background color will be, which is what “transparent” does.

See: https://www.w3schools.com/cssref/css3_pr_background.asp