I have tried everything I can think of to get my custom header to simply repeat horizontally. Here is the website.

If you zoom the page out you can see what I mean. The top black bar does, and the menu does because the 100% width parameter works, but the header will not. The code is changing by the minute because I am in the process of trying all sorts of crazy coding. But this is the jist of what is in my Header, Functions, and Css. I cannot get the header to accept repeat-x.


  • 1
    Do not use pastebin. Add your code in your question through an edit. Thank you – Pieter Goosen Jun 4 '15 at 4:26

You are targeting #header img(incorrect) and using repeat-x without any background-image property.

Use this CSS code:

#header {
  background: rgba(0, 0, 0, 0) url("http://playfulsstudio.com/wp-content/uploads/2015/05/cropped-playful-logo.jpg") repeat-x scroll 0 0;
  • The only way I can fix this is by adding the 100% attribute and it distorts the header instead of repeating it. Your code still will not make it repeat. Why is it not listening? Help. – Emp FX Jun 4 '15 at 1:06
  • Changed the pastebin above to reflect the actual code I am using right now. As you can see it does not repeat and remains fixed unlike the rest of the page causing a long horizontal scroll into oblivion to the right. Please someone help. – Emp FX Jun 4 '15 at 1:23
  • Ok. For now I have added a overflow:hidden rule and it has fixed the scrolling but the header still won't repeat-x. Why? – Emp FX Jun 4 '15 at 1:30
  • Yay. It worked. I just needed to set the width back to 100% and add a overflow:hidden value. Thank you! – Emp FX Jun 4 '15 at 1:33
  • Glad that worked :) Please don't use Pastebin next time. I could not view the code. – Manoj Kumar Jun 4 '15 at 7:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.