PDA

Click to See Complete Forum and Search --> : [RESOLVED] Need help making a background in Blogger

speedemonspecv
03-15-2006, 07:42 PM
I found a small GIF that I want to use to make a background located here (http://i23.photobucket.com/albums/b370/speedemonspecv/corrugated_metal.gif)
I am going to be making this background in Blogger but I am having some problems. Could anybody help me out with this?
sta12s
03-24-2006, 02:22 AM
Do you currently have a template for blogger? Have you checked into any of the help forums through blogger?

if not check this link out then we can help you further http://help.blogger.com/bin/topic.py?topic=22
speedemonspecv
03-24-2006, 03:51 PM
Yes I do have a template in Blogger but I don't like it. What I want to do is take the GIF and tessalate it so it looks like a solid sheet of diamond cut metal. This blog will serve as the website for my podcast until I get a real domain. I have tried looking through the HTML for the template but have not been able to find the line of code that determines the background image or color. Because of this does it mean I have to write my own template?
sta12s
03-24-2006, 07:29 PM
Paste the code you use for your template and I'll show you what you need to change.

No need to get your own website until you're ready - but I do sujest buying the URL before someone else does
speedemonspecv
03-26-2006, 03:58 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title><$BlogPageTitle$></title>

<$BlogMetaData$>

<style type="text/css">
/*
-----------------------------------------------
Blogger Template Style
Name: Minima Black
Designer: Douglas Bowman
URL: www.stopdesign.com
Date: 26 Feb 2004
----------------------------------------------- */


body {
background:#000;
margin:0;
padding:40px 20px;
font:x-small "Trebuchet MS",Trebuchet,Verdana,Sans-Serif;
text-align:center;
color:#ccc;
font-size/* */:/**/small;
font-size: /**/small;
}
a:link {
color:#9ad;
text-decoration:none;
}
a:visited {
color:#a7a;
text-decoration:none;
}
a:hover {
color:#ad9;
text-decoration:underline;
}
a img {
border-width:0;
}


/* Header
----------------------------------------------- */
@media all {
#header {
width:660px;
margin:0 auto 10px;
border:1px solid #333;
}
}
@media handheld {
#header {
width:90%;
}
}
#blog-title {
margin:5px 5px 0;
padding:20px 20px .25em;
border:1px solid #222;
border-width:1px 1px 0;
font-size:200%;
line-height:1.2em;
color:#ccc;
text-transform:uppercase;
letter-spacing:.2em;
}
#blog-title a {
color:#ccc;
text-decoration:none;
}
#blog-title a:hover {
color:#ad9;
}
#description {
margin:0 5px 5px;
padding:0 20px 20px;
border:1px solid #222;
border-width:0 1px 1px;
font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.2em;
color:#777;
}


/* Content
----------------------------------------------- */
@media all {
#content {
width:660px;
margin:0 auto;
padding:0;
text-align:left;
}
#main {
width:410px;
float:left;
}
#sidebar {
width:220px;
float:right;
}
}
@media handheld {
#content {
width:90%;
}
#main {
width:100%;
float:none;
}
#sidebar {
width:100%;
float:none;
}
}


/* Headings
----------------------------------------------- */
h2 {
margin:1.5em 0 .75em;
font:bold 78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.2em;
color:#777;
}


/* Posts
----------------------------------------------- */
@media all {
.date-header {
margin:1.5em 0 .5em;
}
.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted #444;
padding-bottom:1.5em;
}
}
@media handheld {
.date-header {
padding:0 1.5em 0 1.5em;
}
.post {
padding:0 1.5em 0 1.5em;
}
}
.post-title {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
line-height:1.4em;
color:#ad9;
}
.post-title a {
text-decoration:none;
color:#ad9;
}
.post-title a:hover {
color:#fff;
}
.post div {
margin:0 0 .75em;
line-height:1.6em;
}
p.post-footer {
margin:-.25em 0 0;
color:#333;
}
.post-footer em, .comment-link {
font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.1em;
}
.post-footer em {
font-style:normal;
color:#777;
margin-right:.6em;
}
.comment-link {
margin-left:.6em;
}
.post img {
padding:4px;
border:1px solid #222;
}
.post blockquote {
margin:1em 20px;
}
.post blockquote p {
margin:.75em 0;
}


/* Comments
----------------------------------------------- */
#comments h4 {
margin:1em 0;
font:bold 78%/1.6em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.2em;
color:#999;
}
#comments h4 strong {
font-size:130%;
}
#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
}
#comments-block dt {
margin:.5em 0;
}
#comments-block dd {
margin:.25em 0 0;
}
#comments-block dd.comment-timestamp {
margin:-.25em 0 2em;
font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.1em;
}
#comments-block dd p {
margin:0 0 .75em;
}
.deleted-comment {
font-style:italic;
color:gray;
}


/* Sidebar Content
----------------------------------------------- */
#sidebar ul {
margin:0 0 1.5em;
padding:0 0 1.5em;
border-bottom:1px dotted #444;
list-style:none;
}
#sidebar li {
margin:0;
padding:0 0 .25em 15px;
text-indent:-15px;
line-height:1.5em;
}
#sidebar p {
color:#999;
line-height:1.5em;
}


/* Profile
----------------------------------------------- */
#profile-container {
margin:0 0 1.5em;
border-bottom:1px dotted #444;
padding-bottom:1.5em;
}
.profile-datablock {
margin:.5em 0 .5em;
}
.profile-img {
display:inline;
}
.profile-img img {
float:left;
padding:4px;
border:1px solid #222;
margin:0 8px 3px 0;
}
.profile-data {
margin:0;
font:bold 78%/1.6em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.1em;
}
.profile-data strong {
display:none;
}
.profile-textblock {
margin:0 0 .5em;
}
.profile-link {
margin:0;
font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.1em;
}


/* Footer
----------------------------------------------- */
#footer {
width:660px;
clear:both;
margin:0 auto;
}
#footer hr {
display:none;
}
#footer p {
margin:0;
padding-top:15px;
font:78%/1.6em "Trebuchet MS",Trebuchet,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.1em;
}
</style>

</head>

<body>

<div id="header">

<h1 id="blog-title">
<ItemPage><a href="<$BlogURL$>"></ItemPage>
<$BlogTitle$>
<ItemPage></a></ItemPage>
</h1>
<p id="description"><$BlogDescription$></p>
speedemonspecv
03-26-2006, 03:59 PM
</div>

<!-- Begin #content -->
<div id="content">


<!-- Begin #main -->
<div id="main"><div id="main2">

<Blogger>

<BlogDateHeader>
<h2 class="date-header"><$BlogDateHeaderDate$></h2>
</BlogDateHeader>



<!-- Begin .post -->
<div class="post"><a name="<$BlogItemNumber$>"></a>
<BlogItemTitle>
<h3 class="post-title">
<BlogItemUrl><a href="<$BlogItemUrl$>" title="external link"></BlogItemUrl>
<$BlogItemTitle$>
<BlogItemUrl></a></BlogItemUrl>
</h3>
</BlogItemTitle>

<div class="post-body">
<div>
<$BlogItemBody$>
</div>
</div>

<p class="post-footer">
<em>posted by <$BlogItemAuthorNickname$> at <a href="<$BlogItemPermalinkUrl$>" title="permanent link"><$BlogItemDateTime$></a></em>
<MainOrArchivePage><BlogItemCommentsEnabled>

<a class="comment-link" href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnclick$>><$BlogItemCommentCount$> comments</a>
</BlogItemCommentsEnabled><BlogItemBacklinksEnabled>
<a class="comment-link" href="<$BlogItemPermalinkUrl$>#links">links to this post</a>
</BlogItemBacklinksEnabled>
</MainOrArchivePage> <$BlogItemControl$>
</p>

</div>
<!-- End .post -->



<!-- Begin #comments -->
<ItemPage>
<div id="comments">

<BlogItemCommentsEnabled><a name="comments"></a>
<h4><$BlogItemCommentCount$> Comments:</h4>
<dl id="comments-block">
<BlogItemComments>
<dt class="comment-poster" id="c<$BlogCommentNumber$>"><a name="c<$BlogCommentNumber$>"></a>
<$BlogCommentAuthor$> said...
</dt>
<dd class="comment-body">

<p><$BlogCommentBody$></p>
</dd>
<dd class="comment-timestamp"><a href="#<$BlogCommentNumber$>" title="comment permalink"><$BlogCommentDateTime$></a>
<$BlogCommentDeleteIcon$>
</dd>
</BlogItemComments>
</dl>
<p class="comment-timestamp">

<$BlogItemCreate$>
</p>
</BlogItemCommentsEnabled>
<BlogItemBacklinksEnabled>
<a name="links"></a><h4>Links to this post:</h4>
<dl id="comments-block">
<BlogItemBacklinks>
<dt class="comment-title">
<$BlogBacklinkControl$>
<a href="<$BlogBacklinkURL$>" rel="nofollow"><$BlogBacklinkTitle$></a> <$BlogBacklinkDeleteIcon$>
</dt>
<dd class="comment-body"><$BlogBacklinkSnippet$>
<br />
<span class="comment-poster">
<em>posted by <$BlogBacklinkAuthor$> @ <$BlogBacklinkDateTime$></em>
</span>
</dd>
</BlogItemBacklinks>
</dl>
<p class="comment-timestamp"><$BlogItemBacklinkCreate$></p>
</BlogItemBacklinksEnabled>


<p class="comment-timestamp">
<a href="<$BlogURL$>">&lt;&lt; Home</a>
</p>
</div>

</ItemPage>

<!-- End #comments -->

</Blogger>
</div></div>
<!-- End #main -->







<!-- Begin #sidebar -->
<div id="sidebar"><div id="sidebar2">


<!-- Begin #profile-container -->

<$BlogMemberProfile$>

<!-- End #profile -->

<MainOrArchivePage>
<h2 class="sidebar-title">Links</h2>
<ul>
<li><a href="http://news.google.com/">Google News</a></li>
<li><a href="http://help.blogger.com/bin/answer.py?answer=110">Edit-Me</a></li>
<li><a href="http://help.blogger.com/bin/answer.py?answer=110">Edit-Me</a></li>
</ul>
</MainOrArchivePage>


<h2 class="sidebar-title">Previous Posts</h2>
<ul id="recently">
<BloggerPreviousItems>
<li><a href="<$BlogItemPermalinkURL$>"><$BlogPreviousItemTitle$></a></li>
</BloggerPreviousItems>
</ul>
<MainOrArchivePage>

<h2 class="sidebar-title">Archives</h2>
<ul class="archive-list">
<BloggerArchives>
<li><a href="<$BlogArchiveURL$>"><$BlogArchiveName$></a></li>
</BloggerArchives>

</ul>
</MainOrArchivePage>

<p id="powered-by"><a href="http://www.blogger.com"><img src="http://buttons.blogger.com/bloggerbutton1.gif" alt="Powered by Blogger" /></a></p>

<!--
<p>This is a paragraph of text that could go in the sidebar.</p>
-->



</div></div>
<!-- End #sidebar -->


</div>
<!-- End #content -->



<!-- Begin #footer -->
<div id="footer"><hr />
<p><!--This is an optional footer. If you want text here, place it inside these tags, and remove this comment. -->&nbsp;</p>

</div>
<!-- End #footer -->



</body>
</html>
speedemonspecv
03-26-2006, 04:00 PM
Sorry, the forum said the code was a couple hundred characters too long so I posted it in halves.
sta12s
03-26-2006, 04:25 PM
NP - Next time use the bracket for code like this in BBcode


body {
background:#000;
background-image:url('image.gif');
margin:0;
padding:40px 20px;
font:x-small "Trebuchet MS",Trebuchet,Verdana,Sans-Serif;
text-align:center;
color:#ccc;
font-size/* */:/**/small;
font-size: /**/small;
}


Notice I added the "background-image:url('image.jpg'); to the code you provided. This is telling the CSS to have a background image. You can upload your image to someplace like http://www.photobucket.com for free. Then in the 'image.jpg' area you would type in something like;

image-background:url('http://photobucketserver.com/username/image.jpg');

Check out this board for more tips on CSS Style sheets - that's blogger uses to customise your profile and make templates - when you get good enough you can make your own templates and trust me, CSS is fun and easy wonce you get the hang of it.

GL
speedemonspecv
03-26-2006, 04:42 PM
First off, thanks for the code example. But the thing is, it didn't work. Maybe you can tell me why. Here's the code:

body {
background:#000;
background-image:"http://i23.photobucket.com/albums/b370/speedemonspecv/corrugated_metal.gif";
margin:0;
padding:40px 20px;
font:x-small "Trebuchet MS",Trebuchet,Verdana,Sans-Serif;
text-align:center;
color:#ccc;
font-size/* */:/**/small;
font-size: /**/small;
}
sta12s
03-26-2006, 04:51 PM
background-image:url('http://i23.photobucket.com/albums/b370/speedemonspecv/corrugated_metal.gif');
speedemonspecv
03-26-2006, 05:05 PM
[b][i][u]yay It Worked Thanks So Much!!
sta12s
03-26-2006, 05:48 PM
YVW

Be sure to look into CSS for more things you can do. I sujest these site;

http://www.webcredible.co.uk/user-friendly-resources/css/css-tricks.shtml
http://www.w3schools.com/css/default.asp
http://www.cssimport.com/