[Philip MParticipant]

Hi,
is there an easy way to put an image, or at least a gradient, in the header area, obviously behind the logo and menu?
I can see how I could do a workaround by using a slider with only one slide and moving the other items downward, but that seems a bit long-winded for what I want to achieve, and might even slow my site down unneccessarily.

Thanks in advance,
Philip.

[KoryKeymaster]

Philip,

If you are trying to add a background image to the navbar, you can achieve this like so:

.x-navbar {
  background-image: url(http://yourdomain.com/path/to/your/image.jpg);
  background-repeat: repeat;
}

This will allow you to put a repeating background image on your navbar.

Thanks!

[Philip MParticipant]

Hi,
that worked perfect.
Thanks a lot,
Philip.

[RubinKeymaster]

You’re welcome!

[Johan GParticipant]

Sry, but where do you put this code? 🙂

I’ve tried to paste it in the customizer and in my childthemes css with no luck. I guess I muste be doint something wrong.

This is what my chidltheme look like:

/*

Theme Name: X - Child Theme: Renew
Theme URI: http://theme.co/x/
Author: Themeco
Author URI: http://theme.co/
Description: Make all of your modifications to Renew in this child theme.
Version: 1.0.0
Template: x

*/

@import url( '../x/framework/css/site/stacks/renew.css' );

.x-navbar {
  background-image: url(http://xxxxxxxxxxxxxxxxxxxxxx.png);
  background-repeat: repeat;
}

[RubinKeymaster]

Hey Johann,

place the custom CSS above the @import statement, then everything will work just fine.

[Sam BParticipant]

Hi there,

On this note I was wondering how I could change the colour of the header (instead of white)?

Thanks!

[RubinKeymaster]

Hey Sam,

try:

.x-navbar { background-color: #222; }

[Ashley HParticipant]

How do I determine the proper size to make my image? It is a repeating pattern that is a stripe. The repeating image has 4 stripes, but when I upload it, I only see 1 stripe, leading me to believe the file is too large. I tried shrinking it down to 400×400, but I’m still only seeing one stripe. Thanks!

[RubinKeymaster]

Hey Ashley,

check out the background repeat property: http://www.w3schools.com/cssref/pr_background-repeat.asp

[Ryan PParticipant]

This worked well for me inside the .x-navbar { }

http://www.colorzilla.com/gradient-editor/

[ChristianModerator]

Thanks for sharing Ryan.

[Author]

Posts