Tumblr: Background image not repeating horizontally

[omfaonline]

Hey guys. In my tumblr account, although the background image is set to x-repeat, it is still limited and doesn't repeat infinitely (on the left and the right sides). How can I make the x-repeat work properly?

My tumblr: http://mrjinglemeister.tumblr.com/

    <div id="bg-wrapper" ></div>
    <div id="page-wrapper">
        {block:IfHeaderImage}
                <div class="image-wrapper" style='background-color:#cccccc;background-image:url("http://25.media.tumblr.com/ad8f6e2a74dfd84a3fa38e02ef498f84/tumblr_mipk3sXSfU1qe5ukfo1_100.png");background-repeat:repeat-x;height:100px;padding-top:0px;padding-bottom:9px'><a href="/"><img src="{image:Header}" title="{Title}" alt="{Title}" style="margin-left:85px;margin-top:12px"/></a>
                </div>
                {/block:IfHeaderImage}

[Excavator]

Hello omfaonline,
Your image repeats on the X axis for the full width of .image-wrapper
Your .image-wrapper inherits it's width from parent #page-wrapper which has a max-width of 1050px;

see line 486 screen.css - .two #page-wrapper {max-width: 1050px;}

You could remove that min-width and see what that does for you...but then you'll see you have some conflicting CSS. Look on line 56 screen.css -

#page-wrapper {
    background: none repeat scroll 0 0 #FFFFFF;
    height: auto !important;
    max-width: 750px;
    min-height: 100%;
    position: relative;
    z-index: 1;
}

Remove that min-width also, then see what your page looks like.

[omfaonline]

@Excavator:
Thanks for your reply. Unfortunately Tumblr wouldn't allow me to edit any css. I can only add some of my own custom css or edit some of the html (which you can find in the attached .txt).

[OurJud]

omfaonline, I'm a tumblr user and don't know why you're saying you can't edit the CSS. Tumblr users have access to the entire template CSS/html on client-side, and can do pretty much anything in the way of customisation.

[waxdoc]

OOPS! Your source code does not have this

...although the background image is set to x-repeat ...

Check out background-repeat property values

repeat The background image will be repeated both vertically and horizontally. This is default
repeat-x The background image will be repeated only horizontally
repeat-y The background image will be repeated only vertically
no-repeat The background-image will not be repeated
inherit Specifies that the setting of the background-repeat property should be inherited from the parent element

You have it wrong: NOT x-repeat, but repeat-x

[omfaonline]

Hey OurJud,
I'm a newbie. After your comment, I went on Google and found this:
http://tumblring.net/how-to-download...heme-css-file/
So yeah, you're right, we can edit css but I thought it was more direct (like the edit html option in "customize")

Anyway, as per Excavator's advice, I deleted both max-widths and relinked to the new css file:

1. line 56: #page-wrapper {background: none repeat scroll 0 0 #FFFFFF; height: auto !important; max-width: 750px;
2. line 486: .two #page-wrapper {max-width: 1050px;}

but it got all screwed up (check it out). Any ideas?

[OurJud]

Originally Posted by omfaonline

Hey OurJud,
I'm a newbie. After your comment, I went on Google and found this:
http://tumblring.net/how-to-download...heme-css-file/
So yeah, you're right, we can edit css but I thought it was more direct (like the edit html option in "customize")

I'm confused. The css IS part of the 'customize' option. The customize option gives you access to both html and css. No need to go downloading your theme in order to edit. Nor do you need to go linking to css files.

Virtually anything you want to do in terms of customisation can be done through the 'customize' option. When you click 'Customize' on your tumblr options page, you'll see a button in the sidebar that says 'Edit Html' - this gives you access to all client-side css and html.

[omfaonline]

Thanks anyway guys, I fixed it after some research.