Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Tumblr: Background image not repeating horizontally

    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/


    Code:
        <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}

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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 -
    Code:
    #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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Tumblr editing is very limited

    @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).
    Attached Files Attached Files

  • #4
    Regular Coder
    Join Date
    Feb 2010
    Posts
    224
    Thanks
    25
    Thanked 0 Times in 0 Posts
    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.
    Last edited by OurJud; 02-26-2013 at 12:13 AM.

  • #5
    Regular Coder
    Join Date
    Jul 2008
    Posts
    157
    Thanks
    9
    Thanked 13 Times in 13 Posts

    you have repeat value wrong

    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
    Last edited by waxdoc; 02-26-2013 at 01:08 AM. Reason: OOPS

  • #6
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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?

  • #7
    Regular Coder
    Join Date
    Feb 2010
    Posts
    224
    Thanks
    25
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by omfaonline View Post
    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.
    Last edited by OurJud; 02-26-2013 at 01:57 PM.

  • #8
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks anyway guys, I fixed it after some research.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •