[SOLVED] Header Area Background
 

Is it possible to change the color of the header area without loading an image?

I'm trying to optimize my site for speed to I would prefer coloring it through html.

Thanks!

If you just want a solid color just use the %bar1 or %bar2 and style it as you wish.

or add to CSS Inserts
(you might want to change the color to something else ;)

Hi Guys!

Thanks for both tips. Though they both work, how do I apply the color to go past the margins and paddings?

Here's my site http://www.seotaoist.com/ and I want the header area all blue without any white spaces whatsoever.

Also is it possible to extend my menu bar's yellow stripe across the whole page? Moving out to the whole background?

Thanks!

You will probably have to play with padding on #header. As for extending the yellow menu bar you will have to create a background image that matches up with the menu bar both in alignment and color and put it in ATO>Body, Text, & Links using the example for setting a background image as a guide. The image could be just a few pixels wide and and you would add repeat-x to repeat it horizontally. Is that enough info to get you started or do you need more detail?

Hi Larry!

Thanks for this! Though I would still need your help to kind of guide me step by step especially with where I'm supposed to place the code and what code to place. Hehe

Super thanks!

Jurgen

You first have to create the background image and then you place it in ATO>Body, Text & Links. How much do you know about creating background images, repeating images on the x and y axis and CSS?

Well I'd say i'm quite zero with CSS and pretty basic html.

Let's say I already have a 30x30 px yellow image uploaded unto my server.

Then I go to ATO > Body Text and Links and upload it as a background url(so and so) how do I make it so that it will be the same width and alignment with my page menu bar?

Given that, how do I make my page menu bar's background color (yellow) override the padding and margins of the center layout?

I wanted this so that the whole yellow stripe is accross the whole page.

In addition I wanted also to have the header area all blue without white spaces.

I don't have all this stuff locked in my head either. In this case though I want to take your 30px square image and have it repeat horizontally starting at the left and a certain number of pixels down from the top. We are going to use the background shorthand property which just means the background color, image, repeat, and position are all on one line. Soooo

• Go to ATO>Body, Text, & Links and look at the example
  
  HTML Code:

  ---

  background:url(/~thehapq1/wp-content/themes/atahualpa353/images/backgr.gif) repeat top left;

  ---

  We have to modify it for your image but it already has the proper path in the example for your site so all you have to do is replace the image name with the name of your yellow square.
• Change the image, repeat and position such as the following and tweak as needed.
  
  HTML Code:

  ---

  background:url(path_to_image) repeat-x 0 100px;

  ---

  The repeat-x says repeat horizontally, The 0 means 0 pixels from the left side and the 100px means 100 pixels down from the top.
• Now tweak the 100px setting until the yellow bar aligns with the menu bar.

You can play around with this particular function at W3Schools.com

Hi Larry,

I've tried it and it didn't seem to work.

Again my site is at seotaoist.com so that you can see what I mean.

Also here's the code on ATO > Body Text and Links


background: #3DC3F2; -> this is the blue background color. I need the yellow stripe to cut accross and over it.

Thanks!

What happened was that the yellow stripe came out but then the blue background was gone.

Disregard my previous messages. Here's a clearer explanation of what happened.

Here's the code I have on my ATO > Body Text and Links:

This is the blue background that I want to retain:
Here is the yellow strip code that I inserted:
Instead of having the yellow stripe go over the blue background, the background went all white but displayed the yellow stripe (see attached screenshot).

Also the yellow strip didn't "connect" with the page menu bar. I believe this is because of paddings/margins on the header area that elicits the white spaces on the left and right area.

Check out a mock layout I made of how I wanted my blog to look (see attached mockup)

:(

Jurgen

Sorry... I forgot about the background color. The background line has to be only one line or you have to use separate selectors. First here is what you should use.
As you can see the background color, image, repeat and position are all on one line and I would add they need to be in a particular order as shown on the W3Schools.com site. If you want or need to have them on separate lines for some reason you would use separate selectors such as the following.
What happened in your case was you had two lines with just background and the first one was taking precedence.

Hi Larry!

That worked out great. Thanks!

SEOTaoist.com.

Moving forward, to complete my design, how do I change the header's background to blue? Also to make my page menu bar connect with the yellow background?

Jurgen... I really love to help people out but it seems like I am building your site for you. You REALLY need to check out W3Schools.com and get the Firebug extension for Firefox then you will know what CSS does what and can determine selectors so you can apply it properly. This is a challenge to see if you can at least come up with some ideas as to what you should do next.

That's alright Larry! I understand!

Will do my best to figure this out. :) Super thanks for all the help!

Hi Larry!

Good news! I was able to improve my design from last time and at the same time I was able to use as much html and css as I can to achieve this:

http://www.seotaoist.com.

Only problem remains is that I used this code:

...and it only applies to the homepage. My style doesn't apply to others.

Anything here I'm missing?

It looks like it is applying to all pages for me.

Really?

I'm referring to the background image (black bar) behind the menu bar. It seems to only be visible on my homepage.

Use the full path to the background gif.

By the way guys! Thanks so much for the help and the directions.

Learned a lot from this!