Add repeating background image to header area

[CaseyKt2013]

Hi,

I am trying to add a repeating background image to the header area of the Innov8ive theme.

By default, the area outside the header graphic is white, but I'd like to add a repeating 2px wide image to make it look like the 960x170px header graphic extends across the entire screen.

I've added an image to the images folder (170x2.jpg) but when I point to it, it picks up the default background image (images/background.png) used for the entire site (a subtle grey and white stripe).

Here is the code:

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

body {
background: #fff url(images/background.png);
}

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

.site-container .site-header {
-webkit-box-shadow: 0 1px 3px #999;
-moz-box-shadow: 0 1px 3px #999;
box-shadow: 0 1px 3px #999;
background-color: #fff url(images/170x2.jpg);
border-top: 6px solid #171780;
color: #534640;
margin: 0px auto 5px;
min-height: 170px;
overflow: hidden;
}

Note: if I change "background-color:" to just "background:" in the Header section (as it is in the Body section) - I can get the correct repeating image (170x2.jpg) to appear, but then the actual header graphic disappears.

any thoughts on how to resolve this?

Thank you!!!!

[nutsandbolts]

Try this and see if it helps:

background-color: #fff url(images/170?—2.jpg) repeat-x;

Though really it should be background and not background-color.... Weird that it would remove the header image. Can you post a screenshot of how this looks? There may be an easier way to achieve the same thing.

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[CaseyKt2013]

Thanks, Andrea!

Here's what I get when I use background: vs background-color:

http://www.mightyautopro.com/wp-content/uploads/2013/12/Screen-Shot-2013-12-12-at-3.26.01-PM.png

The repeat-x doesn't seem to make a difference - it repeats with or without it.

When I add the code you suggest - it adds the default background.png image to the header area rather than the 170x2.jpg (it appears the Body command above it is taking priority over that line of code).

[nutsandbolts]

Looking at the screenshot, which part is the body background versus the 170x2.jpg background? It's hard to tell what's what without being able to look at the live site.

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[CaseyKt2013]

Sorry, that entire thing is the 170x2 background image - the header image is replaced entirely by the 2px wide background image.

[CaseyKt2013]

(the site isn't live - not trying to be dodgy)

Here is a different site with the same theme installed - the header background area is plain white in this example - the subtle grey background stripe is the default image "background.png" in

http://HomeFarmandGarden.com

[nutsandbolts]

It may be easier to do that by putting a 5px border-bottom on the nav and a border-top on #header (or something along those lines). If it's just a solid color, that is.

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[CaseyKt2013]

It's not a solid color, unfortunately (wish I could get away with that) - it has to be that image 170x2 to extend the header graphic design across the entire screen.

I used to do this all the time with a different theme (not studio press). I love some of the styling details on this child theme - would love to figure out how to make this work somehow.

[CaseyKt2013]

That earlier image link I showed - with the blue and the gold bands on the top and bottom echoes the design of the header.

[nutsandbolts]

It's definitely possible - like I said, I'm just having a hard time understanding what's going on now versus what you need. I understand not being able to show people a dev site but it definitely makes it difficult to help troubleshoot!

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[CaseyKt2013]

I'm sorry - Would a screenshot of the header installed help?

[CaseyKt2013]

Okay, I have set up a test site to demonstrate the issue I am having…

Here is the link:

http://ClydesCrossing.com

The header graphic is as it is supposed to be.

However, the repeating background header image is supposed to be: (images/header.png)

but what is being pulled is (images/background.png) instead - the subtle grey stripe found in the body and elsewhere on the site. I don't want that - I want to extend the design of the header all the way across the page (vs having a random stripe pattern there).

Here is the code:

body {
background: #fff url(images/background.png);
}

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

.site-container .site-header {
-webkit-box-shadow: 0 1px 3px #999;
-moz-box-shadow: 0 1px 3px #999;
box-shadow: 0 1px 3px #999;
background-color: #fff url(images/header.png);
border-top: 6px solid #fff;
color: #534640;
margin: 0px auto 5px;
min-height: 200px;
overflow: hidden;
}

[CaseyKt2013]

You can see the header.png image here: (that is NOT where I have the code pointing to - I also added it to the same images folder as the background.png)

http://clydescrossing.com/wp-content/uploads/2013/12/header.png

[CaseyKt2013]

(The image is to the very far left - only 2 px wide - otherwise looks like a blank white screen). Sorry.

[nutsandbolts]

Like this?

If so, here's what I did:

(1) Changed the site-header background to the repeating image:

.site-header {
background: url(http://clydescrossing.com/wp-content/uploads/2013/12/header.png) repeat-x !important;
min-height: 200px;
}

(2) Changed the title-area background to use the header image:

.title-area {
background: url(http://clydescrossing.com/wp-content/uploads/2013/12/trish_hfgheader-71.png) no-repeat bottom center;
}

(3) Changed the height to show the whole header image:

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

Hopefully that gets you close to where you need to be - I'm crossing my fingers!

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[CaseyKt2013]

That might do it!

(I can see now I used the wrong background image for this test site - but otherwise, I think you may have hit on something) Testing it out now - will let you know shortly.

Thank you! 🙂

[CaseyKt2013]

Just tried on the site I am developing - and it worked!!!

Thank you, Thank You, Thank you!!!!!

[nutsandbolts]

Awesome! So glad to hear it!!!!

I'm going to mark this topic as resolved but please don't hesitate to open a new one if you run into further issues.

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[Author]

Posts