The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Tumblr: Background image not repeating horizontally
omfa
post Feb 25 2013, 08:59 AM
Post #1





Group: Members
Posts: 8
Joined: 25-February 13
Member No.: 18,712
Hey guys. In my tumblr account, although the background image is set to x-repeat, it is still limited 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}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Feb 25 2013, 11:07 AM
Post #2


WDG Member
********

Group: Root Admin
Posts: 8,365
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3
You've limited div#page-wrapper to a max-width of 1050px. Do you want the background image to extend beyond that?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Feb 25 2013, 01:06 PM
Post #3


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9
Mind you that if you get rid of the max-width of 1050px which is actually set on .two #page-wrapper to be precise, there's also a #page-wrapper declaration on its own, which is set to a max-width of 750px;.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
omfa
post Feb 25 2013, 01:43 PM
Post #4





Group: Members
Posts: 8
Joined: 25-February 13
Member No.: 18,712
Thank you for your replies. Yes, I want my background image to x-repeat beyond that. This is my entire html code. Can you point me towards what I should edit? Thanks a million.

[code]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<!--

Prologue Theme v1.17 by Hayden Hunter
Available from Tumblr as a Premium Theme
http://prologuetheme.tumblr.com

-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=1024, maximum-scale=1.0" />
<meta name="google-site-verification" content="lgQRVZuAsL9DltgpT2MyXxsV4COWH7jt9-0fT3a1cbE" />

<title>{Title}{block:SearchPage} • {lang:Search results for SearchQuery} {/block:SearchPage}{block:PostSummary} • {PostSummary}{/block:PostSummary}</title>
<meta name="description" content="{block:IndexPage}{block:Description}{MetaDescription}{/block:Description}{/block:IndexPage}{block:PermalinkPage}{block:PostSummary}{PostSummary}{/block:PostSummary}{/block:PermalinkPage}" />

<meta name="if:Inverse Colour Scheme" content="0" />
<meta name="color:Background" content="#ffffff" />
<meta name="color:Content Background" content="#ffffff" />
<meta name="color:Inverse Background" content="#252525" />
<meta name="color:Inverse Content Background" content="#252525" />
<meta name="image:Header" content="" />
<meta name="image:Background" content="" />

<meta name="if:Centered Layout" content="1" />
<meta name="if:Two Column Layout" content="1" />
<meta name="if:Fixed Positioned Sidebar" content="1" />
<meta name="if:Infinite Scrolling" content="1" />

<meta name="if:Serif Type" content="0" />
<meta name="if:Larger Type for Custom Font" content="0" />

<meta name="if:Show Avatar" content="1" />
<meta name="if:Show Likes" content="1" />
<meta name="if:Show Latest Tweet" content="1" />
<meta name="if:Show Share Menu" content="1" />
<meta name="if:Show Relative Timestamps" content="1" />
<meta name="if:Show Footer Links and Search" content="1" />
<meta name="if:Show Profile Links" content="1" />
<meta name="if:Show Follow Me Link" content="1" />
<meta name="if:Collapse Notes" content="1" />
<meta name="if:Show Notes" content="1" />
<meta name="if:Show Biography" content="1" />
<meta name="if:Show Audio Download Links" content="1" />

<meta name="if:Hanging Punctuation" content="1" />
<meta name="if:Show Rounded Corners" content="1" />
<meta name="if:Show Theme Credit" content="1" />
<meta name="if:Disable Title Fade Animation" content="0" />

<meta name="text:Google Analytics ID" content="" />
<meta name="text:Disqus Shortname" content="" />

<link rel="shortcut icon" href="{Favicon}" />
<link rel="alternate" type="application/rss+xml" href="{RSS}" />

<link rel="stylesheet" type="text/css" media="screen" href="http://static.tumblr.com/iqfzjqj/buel3y1na/reset.css" />
<link rel="stylesheet" type="text/css" media="screen" href="http://static.tumblr.com/iqfzjqj/NOSlbvgqu/screen.css" />
<link rel="stylesheet" type="text/css" media="screen" href="http://static.tumblr.com/eeftr7g/9UHlafiui/fancybox-1.3.1.css" />

<!--[if lte IE 8]>
<script type="text/javascript">
var islteIE8 = true;
</script>

<link rel="stylesheet" type="text/css" media="screen" href="http://static.tumblr.com/eeftr7g/oHHlafjdk/ie8.css" />
<![endif]-->

<!--[if lte IE 7]>
<script type="text/javascript">
var islteIE7 = true;
</script>

<link rel="stylesheet" type="text/css" media="screen" href="http://static.tumblr.com/eeftr7g/Xvxl9p8vk/ie7.css" />
<![endif]-->

<script type="text/javascript" src="http://static.tumblr.com/eeftr7g/dpbl9nm0t/swfobject.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/gpln05e/ao8kyw205/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/iqfzjqj/MJxknworj/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/eeftr7g/On4lafit3/jquery.fancybox-1.3.1.pack.js"></script>
<!-- Included for Safari to work with infinite scrolling -->
<script type="text/javascript" src="http://assets.tumblr.com/javascript/tumblelog.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/iqfzjqj/tyelc8apd/prologue-1.17.js"></script>

<style type="text/css">
html {background-color:{block:IfNotInverseColourScheme}{color:Background}{/block:IfNotInverseColourScheme}{block:IfInverseColourScheme}{color:Inverse Background}{/block:IfInverseColourScheme};}

body {background-color:{color:Background};}

#title, #footer, .media a .high-res, #pagination, #page-location, .input-text, .quotation blockquote .left, .quotation blockquote .right, .tl span, .tr span, .bl span, .br span, #bg-wrapper, #page-wrapper, .media a .high-res .icon, #profile, .meta-list .share-nav, .meta-list .share.hover a, .stripped-content a span {background-color:{color:Content Background};}

body.inverse {background-color:{color:Inverse Background};}
.inverse #title, .inverse #footer, .inverse .media a .high-res, .inverse #pagination, .inverse #page-location, .inverse .input-text, .inverse .quotation blockquote .left, .inverse .quotation blockquote .right, .inverse .tl span, .inverse .tr span, .inverse .bl span, .inverse .br span, .inverse #bg-wrapper, .inverse #page-wrapper, .inverse .media a .high-res .icon, .inverse #profile, .inverse .meta-list .share-nav, .inverse .meta-list .share.hover a, .inverse .stripped-content a span {background-color:{color:Inverse Content Background};}

{block:IfBackgroundImage}
{/block:IfBackgroundImage}
</style>

<script type="text/javascript">
var currentPage = parseInt({CurrentPage});
var currentPageStr = {CurrentPage};
var totalPages = parseInt({TotalPages});
var totalPagesStr = {TotalPages};
var infiniteScrolling = {block:IfInfiniteScrolling}true{/block:IfInfiniteScrolling}{block:IfNotInfiniteScrolling}false{/block:IfNotInfiniteScrolling};
var tumblrUsername = '{name}';
{block:Twitter}
var twitterUsername = '{TwitterUsername}';
{/block:Twitter}
{block:IfDisqusShortname}
var disqusShortname = '{text:Disqus Shortname}';
{/block:IfDisqusShortname}

<style type="text/css" id="customCSS">
{CustomCSS}
</style>
</script>
</head>
<body class="{block:IfCenteredLayout}centered{/block:IfCenteredLayout} {block:IfTwoColumnLayout}two{/block:IfTwoColumnLayout} {block:IfInverseColourScheme}inverse{/block:IfInverseColourScheme} {block:IfFixedPositionedSidebar}fixed-sidebar{/block:IfFixedPositionedSidebar} {block:IfHeaderImage}custom-header{/block:IfHeaderImage} {block:IfNotShowBiography}hide-bio{/block:IfNotShowBiography} {block:IfNotShowRoundedCorners}no-corners{/block:IfNotShowRoundedCorners} {block:IfCollapseNotes}collapse-notes{/block:IfCollapseNotes} {block:IfSerifType}serif{/block:IfSerifType} {block:IfLargerTypeForCustomFont}large-type{/block:IfLargerTypeForCustomFont} {block:IfNotShowLatestTweet}hide-twitter{/block:IfNotShowLatestTweet} {block:IfNotShowThemeCredit}hide-credit{/block:IfNotShowThemeCredit} {block:IfNotHangingPunctuation}indented-punctuation{/block:IfNotHangingPunctuation} {block:IfDisableTitleFadeAnimation}disable-title-fade{block:IfDisableTitleFadeAnimation}">
<!-- Tumblr Theme #14093 -->

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

<!-- Wrapper -->
<div id="wrapper">

<div id="header">

<h1 id="title"><a href="/">{Title}</a></h1>

{block:IfNotTwoColumnLayout}
{block:Description}
<div id="bio">{Description}</div>
{/block:Description}

{block:IfShowAvatar}
<a id="avatar" href="/" title="{Title}"><img src="{PortraitURL-96}" alt="Avatar" /></a>
{/block:IfShowAvatar}
{/block:IfNotTwoColumnLayout}
</div>

<div id="profile">
{block:IfTwoColumnLayout}
{block:IfShowAvatar}
<a id="avatar" href="/" title="{Title}"><img src="{PortraitURL-128}" alt="Avatar" /></a>
{/block:IfShowAvatar}

{block:Description}
<div id="bio">{Description}</div>

<div class="clr"></div>

{/block:Description}
{/block:IfTwoColumnLayout}

{block:IfShowProfileLinks}
<div id="profile-external">
<ul class="link-list">
{block:IfShowFollowMeLink}
<li><a href="http://www.tumblr.com/follow/{name}"><span>{lang:Follow on Tumblr}</span></a></li>
{/block:IfShowFollowMeLink}

{block:AskEnabled}
<li><a href="/ask"><span>{AskLabel}</span></a></li>
{/block:AskEnabled}

{block:SubmissionsEnabled}
<li><a href="/submit"><span>{SubmitLabel}</span></a></li>
{/block:SubmissionsEnabled}

{block:HasPages}
{block:Pages}
<li><a href="{URL}"><span>{Label}</span></a></li>
{/block:Pages}
{/block:HasPages}
</ul>

<div class="clr"></div>

</div>
{/block:IfShowProfileLinks}

{block:IfShowLikes}
{block:IfTwoColumnLayout}
{block:IndexPage}
{block:Likes}
<div class="widget">
<h3 class="section-title"><a href="http://www.tumblr.com/liked/by/{Name}">{lang:Likes}</a></h3>
{Likes limit="5" width="200" summarize="200"}
</div>
{/block:Likes}
{/block:IndexPage}
{/block:IfTwoColumnLayout}
{/block:IfShowLikes}

{block:IfShowFooterLinksAndSearch}
<div id="footer">
<div id="search">
<form id="search-form" action="/search" method="get">
<input id="search-field" class="input-text" type="text" value="{lang:Search}" name="q"/>
<input id="search-submit" title="{lang:Search}" type="image" src="http://static.tumblr.com/eeftr7g/jrAl9k057/blank.png" />
</form>
</div>

<ul id="nav" class="link-list">
<li id="nav-archive"><a href="/archive"><span>{lang:Archive}</span></a></li>
<li id="nav-mobile"><a href="/mobile"><span>{lang:Mobile}</span></a></li>
<li id="nav-rss"><a href="{RSS}"><span>{lang:RSS}</span></a></li>
<li id="nav-tumblr"><a href="http://www.tumblr.com/"><span>Tumblr</span> ♥</a></li>
</ul>

<div class="clr"></div>
</div>
{/block:IfShowFooterLinksAndSearch}
</div>

<div id="content">
{block:IndexPage}
{block:SearchPage}
<div id="page-type" class="strip paginated">
<h6>{lang:Search results for SearchQuery}</h6>
</div>
{/block:SearchPage}

{block:TagPage}
<div id="page-type" class="strip paginated">
<h6>{lang:Posts tagged Tag 3}</h6>
</div>
{/block:TagPage}

<div id="pagination" class="strip">
<a id="page-top" class="icon-link" href="#wrapper">↑ <span>Top</span></a>

{block:PreviousPage}
<a id="page-prev" class="icon-link" href="{PreviousPage}">↑ <span>{lang:Previous page}</span></a>
{/block:PreviousPage}

<div id="page-strip">
<div id="page-location">{lang:Page CurrentPage of TotalPages 2}</div>

<!-- <div id="page-location">Page <span id="page-current">{CurrentPage}</span> of <span id="page-total">{TotalPages}</span></div> -->
</div>
</div>
{/block:IndexPage}


{block:IndexPage}
{block:Twitter}
<!-- Twitter -->
<div id="tweet" class="post quote twitter{block:SearchPage} hide{/block:SearchPage}{block:TagPage} hide{/block:TagPage}">
<a class="icon"></a>
<div class="body">
<div class="quotation short">
<span class="source"></span>
<blockquote>
<span class="tl"><span class="p1"></span><span class="p2"></span><span class="p3"></span><span class="p4"></span><span class="p5"></span></span><span class="tr"><span class="p1"></span><span class="p2"></span><span class="p3"></span><span class="p4"></span><span class="p5"></span></span><span class="bl"><span class="p1"></span><span class="p2"></span><span class="p3"></span><span class="p4"></span><span class="p5"></span></span><span class="br"><span class="p1"></span><span class="p2"></span><span class="p3"></span><span class="p4"></span><span class="p5"></span></span>

<div class="quote-wrapper">
<span class="left">“</span>
<span class="loading-string"><span class="icon"><span class="icon-inner"></span></span>Loading latest tweet</span>
</div>

<span class="right">”</span>
</blockquote>
</div>
</div>
<div class="meta">
<ul class="meta-list">
<li class="posted"><a href="#"><span class="icon"></span></a></li>
</ul>
</div>
<div class="clr"></div>
</div>
<!-- End Twitter -->
{/block:Twitter}
{/block:IndexPage}


<div id="page-{CurrentPage}">
<!-- 23dd13dd814b508f6e967fb40905a486 -->

{block:Posts}

{block:Text}
<!-- Text -->
<div id="post-{PostID}" class="post text">
<a class="icon" href="{Permalink}"></a>
<div class="body">
{block:Title}<h2 class="title"><a href="{Permalink}">{Title}</a></h2>{/block:Title}
<div class="content">
{Body}

{block:More}
<p class="read-more"><a href="{Permalink}">{lang:Read more}</a></p>
{/block:More}
</div>
<!-- End Text -->
{/block:Text}


{block:Photo}
<!-- Photo -->
<div id="post-{PostID}" class="post photo">
<a class="icon" href="{Permalink}"></a>
<div class="body">
<div class="media">
<div class="float">
{LinkOpenTag}
<img src="{PhotoURL-500}" alt="{PhotoAlt}" />
{block:HighRes}
<span title="{PhotoURL-HighRes}" class="high-res"><span class="icon"></span></span>
{/block:HighRes}
{LinkCloseTag}
</div>
</div>
{block:Caption}
<div class="content">
{Caption}
</div>
{/block:Caption}
<!-- End Photo -->
{/block:Photo}


{block:Photoset}
<!-- Photoset -->
<div id="post-{PostID}" class="post photoset">
<a class="icon" href="{Permalink}"></a>
<div class="body">
<div class="media">
<div class="float">
<div id="media-{PostID}" class="hide">
<!-- {Photoset-500} -->
</div>
</div>
</div>
{block:Caption}
<div class="content">
{Caption}
</div>
{/block:Caption}
<!-- End Photoset -->
{/block:Photoset}


{block:Quote}
<!-- Quote -->
<div id="post-{PostID}" class="post quote">
<a class="icon" href="{Permalink}"></a>
<div class="body">
<div class="quotation {Length}">
<span class="source"></span>
<blockquote>
<span class="tl"><span class="p1"></span><span class="p2"></span><span class="p3"></span><span class="p4"></span><span class="p5"></span></span><span class="tr"><span class="p1"></span><span class="p2"></span><span class="p3"></span><span class="p4"></span><span class="p5"></span></span><span class="bl"><span class="p1"></span><span class="p2"></span><span class="p3"></span><span class="p4"></span><span class="p5"></span></span><span class="br"><span class="p1"></span><span class="p2"></span><span class="p3"></span><span class="p4"></span><span class="p5"></span></span>

<div class="quote-wrapper">
<span class="left">“</span>
{Quote}
</div>
<span class="right">”</span>
</blockquote>
</div>
{block:Source}
<div class="content">
{Source}
</div>
{/block:Source}
<!-- End Quote -->
{/block:Quote}


{block:Link}
<!-- Link -->
<div id="post-{PostID}" class="post link">
<a class="icon" href="{Permalink}"></a>
<div class="body">
<h2 class="title"><a href="{URL}" {Target}><span class="string">{Name}</span> <span class="icon"><span class="icon-inner"></span></span></a></h2>
{block:Description}
<div class="content">
{Description}
</div>
{/block:Description}
<!-- End Link -->
{/block:Link}


{block:Chat}
<!-- Chat -->
<div id="post-{PostID}" class="post chat">
<a class="icon" href="{Permalink}"></a>
<div class="body">
{block:Title}<h2 class="title"><a href="{Permalink}">{Title}</a></h2>{/block:Title}
<div class="content">
<ul class="transcript">
{block:Lines}
<li class="{Alt}">{block:Label}<strong class="label">{Label}</strong>{/block:label} {Line}</li>
{/block:Lines}
</ul>
<div class="clr"></div>
</div&

This post has been edited by omfa: Feb 25 2013, 01:46 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Feb 25 2013, 03:59 PM
Post #5


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9
Then put the div.image-wrapper before the div#page-wrapper. You probably want to make some adaptions here and there to make the #page-wrapper start from right under .image-wrapper.

BTW, for your information, it's no use to show us all that Tumblr code as it's not HTML as such until it has past through some Tumblr script and rendered as HTML in a browser.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
omfa
post Feb 25 2013, 04:18 PM
Post #6





Group: Members
Posts: 8
Joined: 25-February 13
Member No.: 18,712
QUOTE(Frederiek @ Feb 25 2013, 03:59 PM) *

Then put the div.image-wrapper before the div#page-wrapper. You probably want to make some adaptions here and there to make the #page-wrapper start from right under .image-wrapper.

BTW, for your information, it's no use to show us all that Tumblr code as it's not HTML as such until it has past through some Tumblr script and rendered as HTML in a browser.

Frederiek, thanks for your reply. Being a newbie, I have no idea what you wrote smile.gif
Can you walk me through the steps and tell me where to place what? I'd appreciate it big time.

This post has been edited by omfa: Feb 25 2013, 04:21 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
omfa
post Feb 25 2013, 08:19 PM
Post #7





Group: Members
Posts: 8
Joined: 25-February 13
Member No.: 18,712
Okay so after a lot of researching, I found a way to edit the css file. I went on to delete both max-widths in screen.css:
  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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Feb 26 2013, 02:57 AM
Post #8


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9
The above was to make you understand the cascade. Deleting one of those max-widths would activate the other, no matter where they are in the CSS.

Put back a (max-)width to the page-wrapper div.
Then put the div with class="image-wrapper" before the start tag of the id="page-wrapper" (not inside), so the order of divs looks like this:

<div id="bg-wrapper">...</div>
<div class="image-wrapper"...>...</div>
<div id="page-wrapper">...</div>

(The ... only indicate the content of those divs and/or style attributes)

Done that, there will be some space between the black of the top and the white of the page-wrapper, caused by in-line style of padding-bottom: 9px; set to the image-wrapper div.

I hope you understand it better now.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
omfa
post Feb 26 2013, 09:47 AM
Post #9





Group: Members
Posts: 8
Joined: 25-February 13
Member No.: 18,712
@Frederiek: Thanks a million, you're amazing man smile.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Feb 26 2013, 11:02 AM
Post #10


WDG Member
********

Group: Root Admin
Posts: 8,365
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3
Please see the FAQ entries Where can I learn about HTML? and Where can I learn about CSS?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Feb 26 2013, 11:52 AM
Post #11


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9
QUOTE(omfa @ Feb 26 2013, 03:47 PM) *

@Frederiek: Thanks a million, you're amazing man smile.gif

You're welcome.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Web Site Functionality · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 25th April 2024 - 11:01 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC