The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Tumblr theme, Help with adding background image
terellwilson
post Jan 14 2011, 12:01 AM
Post #1





Group: Members
Posts: 1
Joined: 13-January 11
Member No.: 13,588
I have tried to add a background image to my tumblr theme without destroying the entire layout of the theme but I can't figure it out. Is there even a way to add a background image? If so, can someone please tell me how! THANK YOU!

Here is the html for the theme I am using:

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

<!--
Theme: The Untitled v1. (http://theuntitledtheme.tumblr.com/)
Design: The Minimalist (http://minimalist.co)
-->

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>{Title}{block:PostSummary} | {PostSummary}{/block:PostSummary}{block:SearchPage} | {lang:Search results for SearchQuery}{/block:SearchPage}</title>
<meta name="description" content="{MetaDescription}" />
<meta name="if:Show description" content="1" />
<meta name="if:Show search" content="1" />
<meta name="text:Twitter name" content="" />
<meta name="text:Disqus Shortname" content="" />
<meta name="text:Google Analytics ID" content="" />
<link rel="shortcut icon" href="{Favicon}" />
<link rel="alternate" type="application/rss+xml" title="{Title}" href="{RSS}" />

<!-- Styles -->

<link rel="stylesheet" href="http://static.tumblr.com/f1whv92/Mp9l6ewcg/reset.css" />
<style type="text/css">


/*----- GENERAL -----*/

header, footer, section, article, nav, aside {
display: block;
}

body {
background: #ffffff;
color: #222;
font: 12px/20px Georgia, "Times New Roman", Times, serif;
padding-top: 25px;
text-align: center;
width:500px;
margin: 0 auto;
}

h1, h2, h3, hQ {
font-family: Cufon;
}

h1 {
font-size: 50px;
line-height: 50px;
}

h2 {
font-size: 31px;
line-height: 37px;
}

h3 {
font-size: 21px;
line-height: 27px;
}

a:link, a:visited {
color: #222222;
font-weight: bold;
text-decoration: none;
}

a:hover, a:active {
text-decoration: underline;
}

hr{
border:0 #ccc solid;
border-top-width:1px;
clear:both;
height:0;
}

ol{list-style:decimal}

ul{list-style:disc}

li{margin-left:30px}

p,dl,hr,h1,h2,h3,h4,h5,h6,ol,ul,pre,table,address,fieldset{margin-bottom:15px}

#main {
padding: 0px;
}

/*----- MASTHEAD -----*/

.noMeta > div {
padding: 0px;
}

#masthead {
margin-bottom: 0px;
}

#masthead h1 {
margin-bottom: 0;
}

#masthead h1 a:link, #masthead h1 a:visited {
text-transform: Uppercase;
color: #222;
text-decoration: none;
}

#masthead h1 a:active {
outline: 0;
}

#masthead p {
font-family: Georgia, serif;
font-size: 20px;
color: #fff;
margin-bottom: 0;
}

#masthead a:link, #masthead a:visited {
color: #fff;
}

#siteDescription{
font-size: 13px;
color: #222;
text-transform: Uppercase;
border-top: 1px solid #222;
margin-top: 20px;
margin-bottom: -5px;
padding: 15px 0 0 0;
font-family: Cufon;
}

/*----- SEARCH FORM -----*/

#frmSearch {
padding-top: 20px;
display: none;
}

#txtSearch {
background: url(http://static.tumblr.com/bpryy0m/6lRl6gmys/search.jpg) left no-repeat;
width: 225px;
padding: 2px 0 0 20px;
font: 12px/12px Georgia, "Times New Roman", Times, serif;
color: #222;
border: 0px;
}

/*----- MAIN HEADER NAV STRIP -----*/

#mainNav {
border-top: 1px solid #222;
border-bottom: 2px solid #222;
margin-top: 20px;
padding: 15px;
font-family: Cufon;
}

#mainNav ul {
list-style: none;
margin: 0;
padding: 0;
}

#mainNav li {
margin: 5px;
display: inline;
padding: 0;
}

#mainNav a:link, #mainNav a:visited {
padding: 0;
font-size: 14px;
line-height: 14px;
margin: 0 2px;
text-decoration: none;
color: #222;
text-transform: Uppercase;
}

#mainNav a:hover, #mainNav a:active {
outline: none;
text-decoration: none;
border-bottom: 1px solid #222;
}

#mainNav a.active {
text-decoration: none;
border-bottom: 1px solid #222;
}

/*----- ARTICLE META INFO -----*/

#designline {
margin-top: 50px;
}

h5{
position: relative;
top: -35px;
margin-bottom: 0px;
font-family: Georgia, serif;
font-size: 10px;
color: #bca474;
text-decoration: none;
text-transform: Uppercase;
font-weight: bold;
border-bottom: 1px solid #bca474;
background: #fff;
}

h5 a:link, .line a:visited{
font-family: Georgia, serif;
font-size: 10px;
color: #bca474;
text-decoration: none;
text-transform: Uppercase;
font-weight: bold;
}

h5 a:hover{
text-decoration: underline;
}

h5 abbr{
display: inline-block;
position: relative;
margin: 0 auto;
padding: 0 8px;
background: #fff;
top: 10px;
}

h5.postDate a{
color: #bca474;
}

/*----- ARTICLE -----*/

article {
background: #fff;
margin-bottom: 20px;
text-align: left;
position: relative;
}

article img {
border: none;
margin-bottom: 15px;
max-width: 500px;
}

article p img {
margin: 0;
}
article > div {
padding: 0px;
overflow: hidden;
}
article .searchPage {
margin: 35px 0 0 0;
}

.searchPageText {
margin: 0 0 30px 0;
}

article .meta a:link, article .meta a:visited {
text-decoration: none;
}

article .meta a:hover, article .meta a:active {
text-decoration: underline;
}

article h2 {
text-align: center;
color: #222222;
}

article h2 a:link, article h2 a:visited {
text-transform: Uppercase;
color: #222;
text-decoration: none;
}

article h2 a:hover, article h2 a:active {
text-decoration: none;
border-bottom: 1px solid #222;
}

blockquote {
border-left: 2px solid #bca474;
margin-left: 0;
padding-left: 1em;
}

#quoteSource{
margin: 0 auto;
text-align: left;
}

#quoteText h2 {
text-align: left;
color: #222222;
}

article .chat {
list-style: none;
padding: 0;
margin: 0;
}

article .chat li {
margin: 0 0 2px;
padding: 2px 0 2px 0;
}

.photoCaption {
text-align: center;
}

/*----- AUDIO PLAYER -----*/

.audio {
height: 28px;
width: 26px;
overflow: hidden;
margin: auto;
padding-top: 7px;
}

.audioc {
background-image:url('http://static.tumblr.com/f1whv92/9iCl6bfgp/audiocircle.png');
background-repeat: no-repeat;
height: 41px;
width: 41px;
}

.audioCaption {
margin-top: 1px;
}

.audioleft {
width: 41px;
float: left;
}

.audioright {
width: 444px;
float: right;
}

.audioContainer {
margin-top: 5px;
}

.audioClear {
clear:both;
}

/*----- ARTICLE NOTES -----*/

.notes {
border-top: 1px solid #bca474;
list-style: none;
padding: 20px 0 5px 0;
margin: 30px 0 0 0;
}
.notes li {
margin: 0;
}

.notes .avatar {
margin: 0 5px 0 0;
position: relative;
top: 5px;
}

.notes blockquote {
margin: 10px 0 0 35px;
padding-left: 10px;
border-left: 2px solid #222222;
}

.media {
width: 500px;
margin-bottom: 20px;
}

/*----- PAGE NAVIGATION -----*/

#pageNav {
margin-top: 20px;
border-top: 1px solid #222;
}

#pageNav ul {
list-style: none;
padding: 10px 15px;
margin: 10px 0;
}

#pageNav li {
margin: 0;
display: inline;
}

#pageNav a:link, #pageNav a:visited {
font: 11px Georgia, "Times New Roman", Times, serif;
padding: 0;
margin: 0 2px;
background: #34hdf5;
color: #222;
text-decoration: none;
}

#pageNav a:hover, #pageNav a:active, #pageNav a.active:link, #pageNav a.active:visited {
text-decoration: underline;
}

#pageNavOlder:after {
content: " »";
font-size: 10px;
}

#pageNavNewer:before {
content: "« ";
}

/*----- FOOTER META -----*/

#sitemeta {
border-top: 2px solid #222;
color: #222;
padding: 20px 0 32px 0;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 11px;
}

#sitemeta p {
margin: 0;
}

#sitemeta a:link, #sitemeta a:visited {
color: #222;
font-weight: bold;
}

{CustomCSS}
</style>

<!-- Scripts -->

<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://static.tumblr.com/q9z1v7k/dgEkijh8r/cufon-yui.js" type="text/javascript"></script>
<script src="http://static.tumblr.com/f1whv92/fgIl65bo1/cufon_300.font.js" type="text/javascript"></script>

<script type="text/javascript">
Cufon.replace('h1',{ fontFamily: "Cufon" });
Cufon.replace('h2',{ fontFamily: "Cufon" });
Cufon.replace('h3',{ fontFamily: "Cufon" });
Cufon.replace('#mainNav',{ fontFamily: "Cufon" });
Cufon.replace('#siteDescription',{ fontFamily: "Cufon" });
</script>

<script>
$(function() {
var search = $("#txtSearch").val();
var placeholder = "Search...";
var fadeToOpacity = 0.4;
$("#txtSearch").fadeTo("normal", fadeToOpacity);
if (search == "") {
$("#txtSearch").val(placeholder);
}
$("#txtSearch").blur(function() {
search = $("#txtSearch").val();
if (!(search != "" && search != placeholder)) {
$("#txtSearch").val(placeholder);
}
$("#txtSearch").fadeTo("normal", fadeToOpacity);
});
$("#txtSearch").focus(function() {
search = $("#txtSearch").val();
if (search == placeholder) {
$("#txtSearch").val("");
}
$("#txtSearch").fadeTo("normal", 1);
});
$("#btnSearch").click(function() {
$("#frmSearch").slideToggle("normal");
$(this).toggleClass("active");
// $("#txtSearch").focus();
});
});
</script>

<script type="text/javascript" src="http://o.aolcdn.com/art/merge?f=/_media/sp/sp-player.js&f=/_media/sp/sp-player-tumblr.js&expsec=86400&ver=11&bgcolor=#2f3033&clickimg=true&autoplay=true&progressfrontcolor=ffffff&progressbackcolor=ffffff&btncolor=white-gray"></script>

</head>
<body>

<header id="masthead" class="clearfix">
<div id="thehead">
<h1 class="cufon"><a href="/">{Title}</a></h1>
<form action="/search" method="get" id="frmSearch">
<input type="text" id="txtSearch" name="q" value="{SearchQuery}" />
</form>

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

<nav id="mainNav">
{block:HasPages}
{block:Pages}<li><a href="{URL}">{Label}</a></li>{block:Pages}
{/block:HasPages}
{block:AskEnabled}<li><a href="/ask">Ask</a></li>{/block:AskEnabled}
{block:SubmissionsEnabled}<li><a href="/submit">Submit</a></li>{/block:SubmissionsEnabled}
<li><a href="/archive">Archive</a></li>
<li><a href="/random">Random</a></li>
<li><a href="{RSS}">RSS</a></li>
<li><a href="java script:;" id="btnSearch">Search</a></li>
{block:IfTwitterName}
<li><a href="http://twitter.com/{text:Twitter name}">Twitter</a></li>
{/block:IfTwitterName}
</nav>
</div>
</header>

<section id="main" class="clearfix">
<div class="layout">
{block:SearchPage}
<article>
<div>
<div class="searchPage">
<h2>Search results for <a href="{URLSafeSearchQuery}">{SearchQuery}</a></h2>
</div>
{block:NoSearchResults}
<div class="searchPageText">
<p>I’m sorry, but we couldn't find anything matching "<b>{SearchQuery}</b>". Suggestions:</p>
<ul>
<li>Make sure all words are spelled correctly.</li>
<li>Try different keywords.</li>
<li>Try more general keywords.</li>
</ul>
</div>
{/block:NoSearchResults}
</div>
</article>
{/block:SearchPage}

{block:TagPage}
<article>
<div>
<div class="searchPage">
<h2>Posts tagged <a href="{TagURL}">{Tag}</a></h2>
</div>
</div>
</article>
{/block:TagPage}

{block:Posts}
<div id="designline">
<h5 class="postDate">
<abbr>{block:Date}<a href="{Permalink}">{DayOfMOnth}{DayOfMonthSuffix} {ShortMonth} {Year}</a>{/block:Date}{block:NoteCount} | <a href="{Permalink}#notes">{NoteCountWithLabel}</a>{/block:NoteCount}
</abbr>
</h5>
</div>

<article>
<div>
{block:Text}
{block:Title}<h2><a href="{Permalink}">{Title}</a></h2>{/block:Title}
{Body}
{/block:Text}

{block:Photo}
{LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}" />{LinkCloseTag}
{block:Caption}<div class="photoCaption">{Caption}</div>{/block:Caption}
{/block:Photo}

{block:Photoset}
<div class="media">{Photoset-500}</div>
{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
{/block:Photoset}

{block:Quote}
<div id="quoteText"><h2>{Quote}</h2></div>
{block:Source}<div id="quoteSource"><p>—{Source}</p></div>{/block:Source}
{/block:Quote}

{block:Link}
<h2><a href="{URL}" {Target}>{Name}</a></h2>
{block:Description}
<div>{Description}</div>
{/block:Description}
{/block:Link}

{block:Chat}
{block:Title}<h2>{Title}</h2>{/block:Title}
<ul class="chat">
{block:Lines}
<li>{block:Label}<strong>{Label}</strong>{/block:Label} {Line}</li>
{/block:Lines}
</ul>
{/block:Chat}

{block:Audio}
<div class="audioleft">
<div class="audioc">
<div class="audio">{AudioPlayerBlack}</div>
</div>
</div>
<div class="audioright">
<div class="audioCaption">{block:Artist}<b>{Artist}</b>{/block:Artist}
<p>—{block:TrackName}{TrackName}{/block:TrackName}</p>
</div>
</div>
<div class="audioClear"></div>
<div class="audioContainer">
{block:Caption}{Caption}{/block:Caption}
</div>
{/block:Audio}

{block:Video}
<div class="media">{Video-500}</div>
{block:Caption}<div>{Caption}</div>{/block:Caption}
{/block:Video}

{block:Answer}
<h3>{Asker} asked: {Question}</h3>
{Answer}
{/block:Answer}

{block:Date}

{block:IfDisqusShortname}
<script type="text/javascript">
//<![CDATA[
(function() {
var links = document.getElementsByTagName('a');
var query = '?';
for(var i = 0; i < links.length; i++) {
if(links[i].href.indexOf('#disqus_thread') >= 0) {
query += 'url' + i + '=' + encodeURIComponent(links[i].href) + '&';
}
}
document.write('<script charset="utf-8" type="text/javascript" src="http://disqus.com/forums/{text:Disqus Shortname}/get_num_replies.js' + query + '"></' + 'script>');
})();
//]]>
</script>
{/block:IfDisqusShortname}

{block:PostNotes}
{PostNotes}
{/block:PostNotes}

{block:Date}

</div>
</article>
{/block:Posts}

{block:PermalinkPagination}
<nav id="pageNav">
<ul class="clearfix">
{block:PreviousPost}<li><a href="{PreviousPost}" id="pageNavNewer">Previous</a></li>{/block:PreviousPost}
{block:NextPost}<li><a href="{NextPost}" id="pageNavOlder">Next</a></li>{/block:NextPost}
</ul>
</nav>
{/block:PermalinkPagination}

{block:Pagination}
<nav id="pageNav">
<ul class="clearfix">
{block:PreviousPage}<li><a href="{PreviousPage}" id="pageNavNewer">Newer</a></li>{/block:PreviousPage}
{block:JumpPagination length="5"}
{block:CurrentPage}<li><a href="{URL}" class="active">{PageNumber}</a></li>{/block:CurrentPage}
{block:JumpPage}<li><a href="{URL}">{PageNumber}</a></li>{/block:JumpPage}
{/block:JumpPagination}
{block:NextPage}<li><a href="{NextPage}" id="pageNavOlder">Older</a></li>{/block:NextPage}
</ul>
</nav>
{/block:Pagination}

{block:DayPagination}
<nav id="pageNav">
<ul class="clearfix">
{block:PreviousDayPage}<li><a href="{PreviousDayPage}">« {DayOfMonth} {ShortMonth}</a></li>{/block:PreviousDayPage}{block:NextDayPage}|<li><a href="{NextDayPage}">{DayOfMonth} {ShortMonth} »</a></li>{block:NextDayPage}
</ul>
</nav>
{/block:DayPagination}

</div><!-- END layout -->
</section>

<footer id="sitemeta">
<div class="clearfix">
<div class="thefooter">
<p><a href="http://www.tumblr.com/theme/12051">The Minimalist Theme</a> designed by <a href="http://minimalist.co">The Minimalist</a> | Powered by <a href="http://tumblr.com">Tumblr</a></p>
</div>
</div>
</footer>

{block:IfGoogleAnalyticsID}
<script type="text/javascript">var gaJsHost=(("https:"==document.location.protocol)?"https://ssl.":"http://www.");document.write(unescape("%3Cscript src='"+gaJsHost+"google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));</script><script type="text/javascript">try{var pageTracker=_gat._getTracker("{text:Google Analytics ID}");pageTracker._trackPageview()}catch(err){}</script>
{block:IfGoogleAnalyticsID}

</body>
</html>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 14 2011, 02:28 AM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
A background doesn't affect anything else, it doesn't upset the layout. It might not look pretty, but that's another thing. happy.gif

You have several backgrounds in your CSS. Could you tell us which one causes you trouble and link to the page so we can see what happens?
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:20 PM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC