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 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Background image is not showing up!

    Hiya, i'm creating a theme for a blogging site called tumblr. everything is how i want it except i can't get the background image to show up!
    normally i put it into the style sheet and it works just fine! please help!

    Code:
    <html>
        <head>
             {block:Description}
            <meta name="description" content="{MetaDescription}" />
            {/block:Description}
    
            <meta name="font:Title" content="">
            <meta name="font:main" content="">
            <meta name="if:Show RSS Link" content="1">
            <meta name="if:Show Random Link" content="1">
            <meta name="if:Show Archive Link" content="1">
            <meta name="if:Show Submit LInk" content="1">
            <meta name="if:Show Personal Link" content="1">
            <meta name="image:PersonalPicture" content=""/>
            <meta name="color:Title font" content="">
            <meta name="color:main Font" content="">
            <meta name="image:header" content=""/>
            <meta name="color:hover font" content="">
    
    <title>{Title}</title>
            <link rel="shortcut icon" href="{Favicon}">
            <link rel="alternate" type="application/rss+xml" href="{RSS}">
            {block:Description}
                <meta name="description" content="{MetaDescription}" />
            {/block:Description}
        </head>
    <style>
    <style type="text/css">
    
    body { background-image: url('http://i51.tinypic.com/2lw9ac4.jpg'); }
    
    .header{ background: #fff; 
             width: 510px!IMPORTANT;}
    
    a, a:link, a:active, a:visited
      { color: {color:main Font}; }
    
    .container
      { width: 510px!IMPORTANT;
        text-align: center;
        background: #fff;
        margin-left: 300px; }
    
    .sidebar
      { text-align: justified;  
        width: 510PX!IMPORTANT;
        background: #fff; }
    
    .paginaters
      { font-family: {font:title}; 
        font-size: 42px; 
        line-height: 56pt; 
        letter-spacing: -5px; 
        display: inline; 
        text-shadow: 0.00em 0.00em 1px #bbb; }
    
    .paginaters a, .paginaters a:link, .paginaters a:active, .paginaters a:visited
      { text-decoration: none; 
        color: {color:titlefont}; 
        -webkit-transition: color .2s linear; }
    .paginaters a:hover
      { color: {color:hover Font}; }
    
    .desc { 
        background-color: #fff; 
        font-family: {font:main}; 
        font-size: 8pt; 
        WIDTH: 500PX!IMPORTANT;
        color: {color:main Font}; 
        text-align: justify; 
        margin: 0; padding: 0; }
    
    .desc ol, .desc ul
      { margin: 0; padding: 0; margin-left: 15px; }
    
    .post
      { background-color: #fff; 
        margin-top: 0px!important;
        padding: 5px; 
        margin: 0px; 
        width: 500px!IMPORTANT;
        max-width: 500px; 
        font-family: {font:main}; 
        font-size: 8pt;
        font-weight: normal; 
        color: {color:main Font}; }
    
    h3
      { font-family: {font:main}; 
        font-size: 7.5pt; 
        line-height: 8pt; 
        color: {color:main Font}; 
        margin: 0; padding: 0; 
        font-weight: normal; 
        width: 500px; }
    
    h4
      { font-family: {font:title}; 
        font-size: 20pt; 
        line-height: 3pt; 
        *line-height: 100%; 
        color: {color:title font}; 
        font-style: italic; 
        font-weight: normal; 
        text-align: right!important; 
        margin: 0; padding: 0; }
    
    h4 a, h4 a:link, h4 a:active, h4 a:visited
      { color: #4E4E4E; 
        text-decoration: none; 
        -webkit-transition: color .2s linear; }
    h4 a:hover
      { color: {color:Hover Font}; }
    
    h5
      { font-family: {font:title}; 
        font-size: 32pt; 
        line-height: 22pt; 
        text-align: left; 
        margin: 0; padding: 0;
        font-weight: normal; 
        color: {color:title font}; 
        letter-spacing: -1px; }
    
    .links
      { font-family: {font:title}; 
        font-size: 10pt; 
        line-height: 10pt; 
        text-align: center; 
        font-weight: normal; 
        WIDTH: 500PX!IMPORTANT;
        color: {color:title font}; 
        letter-spacing: -1px; 
        text-transform: uppercase; }
    
    h5 a, h5 a:link, h5 a:active, h5 a:visited, .links a, .links a:link, .links a:active, .links a:visited
      { color: {color:titlefont}; 
        text-decoration: none;
        -webkit-transition: color .1s linear; }
    h5 a:hover, .links a:hover
      { color: {color:hover font}; }
    
    h3 a
      { text-decoration: none; }
    
    .reg
      { text-align: justify; 
        margin: 0; padding: 0; }
    
    .reg a, .reg a:link, .reg a:active, .reg a:visited, .source a, .source a:link, .source a:active, .source a:visited
      { color: {color:main Font}; }
    
    .source
      { margin: 0; padding: 0; 
        margin-left: 50px; 
        font-size: 7.5pt; }
    
    .screenname
      { font-family: {font:title}; 
        font-size: 8pt; 
        color: {color:title font}; 
        margin: 0; padding: 0; }
    .im
      { font-family: {font:main}; 
        font-size: 8pt; 
        color: {color:main Font}; 
        margin: 0; padding: 0; 
        margin-left: 5px; }
    
    .player
      { background-color: #ff; 
        width: 100%; 
        height: 27px; 
        vertical-align: center; 
        font-size: 7.5pt; 
        text-align: center; 
        line-height: 30px; }
    
    .player a 
      { text-decoration: none; 
        color: #777777; }
    .player a:hover
      { color: {color:hover Font}; }
    
    img.albumart
      { width: 100%; }
    
    .post blockquote
      { margin-left: 20px; 
      	margin-right: 0px; }
    
    .perma
      { width: 100%;  
        font-family: {font:title}; 
        font-size: 7pt; 
        line-height: 5px; 
        text-transform: uppercase; 
        color: {color:title font}; 
        text-decoration: none; 
        -webkit-transition: color .2s linear; }
    
    .perma:hover
      { color: {color:hover Font} }
    
    img.pic
      { width: 194px; 
    	margin-top: 3px; }
    
    ol.notes
      { padding: 0px;
        margin: 25px 0px;
        list-style-type: none;
        border-bottom: solid 1px #E8E8E8; }
    
    ol.notes li.note
      { border-top: solid 1px #E8E8E8;
        padding: 3px; }
    
    ol.notes li.note img.avatar
     { vertical-align: -4px;
       margin-right: 10px;
       width: 16px;
       height: 16px; }
    
    ol.notes li.note span.action
     { font-weight: normal; 
       font-size: 7.5pt; }
    
    ol.notes li.note .answer_content
     { font-weight: normal; }
    
    ol.notes li.note blockquote
     { border-color: #f0f0f0;
       padding: 4px 10px;
       margin: 10px 0px 0px 25px; }
    
    ol.notes li.note blockquote a
     { text-decoration: none; }
    
    iframe
      { position: fixed!important; 
        *position: absolute!important; }
    .post iframe
      { height: auto!important; 
         overflow: visible!important; 
         position: relative!important; 
         display: inline!important; 
         width: 400px!important; }
    
    {CustomCSS}
    
    </style>
        <body>
    <div class="container">       
    <CENTER><div class="header">{block:IfHeaderImage}<img src="{image:Header}"/>{/block:IfHeaderImage}</div>
    <div class="links">{Title}<BR><BR>
            {block:IfShowRSSLink}&nbsp;<a href="{RSS}">rss</a>{/block:IfShowRSSLink}
            {block:IfShowArchiveLink}&nbsp;<a href="/archive">archive</a>{/block:IfShowArchiveLink}
            {block:IfShowRandomLink}&nbsp;<a href="/random">random</a>{/block:IfShowRandomLink}
            {block:AskEnabled}&nbsp;<a href="/ask">ask</a>{/block:AskEnabled}{block:IfShowSubmitLink}&nbsp;<a href="/submit">submit</a>{/block:IfShowSubmitLink}
    {block:IfShowPersonalLink}&nbsp;<a href="/tagged/personal">personal</a>{/block:IfShowPersonalLink}<BR><BR>
    {Description}
    {block:IfPersonalPictureImage}<br><a href=/><img src="{image:PersonalPicture}" /></a>{/block:IfPersonalPictureImage}</div></CENTER>
    
    <BR><BR>
        {block:Posts}
        <div class="post">
    
            {block:Text}
    {block:Title}<h5>{Title}</h5>{/block:Title}
    
    <div class="reg">{Body}</div>
            {/block:Text}
    
    
            {block:Photo}
    <img src="{PhotoURL-500}" alt="{PhotoAlt}" width="100%"><br>
    
    {block:Caption}<div class="reg">{Caption}</div>{/block:Caption}
            {/block:Photo}
    
    
            {block:Quote}
    <h5>&ldquo;{Quote}&rdquo;</h5>
    
    {block:Source}<div class="source">-- {Source}</div>{/block:Source}
            {/block:Quote}
    
    
            {block:Link}
    <h5><a href="{URL} class="link" {Target}>{Name}</a></h5>
    
    {block:Description}<div class="reg">{Description}</div>{/block:Description}
            {/block:Link}
    
    
            {block:Chat}
    {block:Title}<h5>{Title}</h5>{/block:Title}
    
    <table cellpadding="0" cellspacing="0">
        {block:Lines}
        <tr>
            {block:Label}
            <td class="screenname">
    {Label}
            </td>
            {/block:Label}
            <td class="im">
    &nbsp;{Line}
            </td>
        </tr>
        {/block:Lines}
    </table>
            {/block:Chat}
    
    
            {block:Video}
    {Video-400}
    
    {block:Caption}<div class="reg">{Caption}</div>{/block:Caption}
            {/block:Video}
    
    
            {block:Audio}
    {block:TrackName}
        <h5>'{TrackName}'{block:Artist} by {Artist}{/block:Artist}</h5>
    {/block:TrackName}
    
    <div class="player"><div style="float:left;">{AudioPlayerGrey}</div> &nbsp; {block:ExternalAudio}<a 
    
    href="{ExternalAudioURL}">Download</a></span>{/block:ExternalAudio}</div>
    {block:AlbumArt}<img class="albumart" src="{AlbumArtURL}">{/block:AlbumArt}
    
    {block:Caption}<div class="reg">{Caption}</div>{/block:Caption}
            {/block:Audio}
    
    
    <a href="{Permalink}" class="perma"><div class="perma">{NoteCount}<div style="float:right;">{Month} 
    
    {DayOfMonth}{DayOfMonthSuffix} {Year}</div></div></a>
    
    {block:PostNotes}
    {PostNotes}
    {/block:PostNotes}
    
        </div>
        {/block:Posts}
    <BR>
    
    {block:Pagination}
        <div class="paginaters">
            {block:PreviousPage}
    <a href="{PreviousPage}">back.</a>
            {/block:PreviousPage}
    
            {block:NextPage}
    <a href="{NextPage}">next.</a>
            {/block:NextPage}
        </div>
        {/block:Pagination}
    
    <h3>powered by <a href="http://tumblr.com">Tumblr</a> | designed by <a href=http://fatalsiren.tumblr.com>FATAL SIREN</a></h3></div>
        </body>
    </html>
    website is here:

    http://fatalsirentest.tumblr.com
    Last edited by fatalsiren; 07-22-2011 at 05:04 PM. Reason: closed parenthesis

  • #2
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    It looks like you just missed your closing parenthesis (see highlighted and bold change below):
    Code:
    <html>
        <head>
             {block:Description}
            <meta name="description" content="{MetaDescription}" />
            {/block:Description}
    
            <meta name="font:Title" content="">
            <meta name="font:main" content="">
            <meta name="if:Show RSS Link" content="1">
            <meta name="if:Show Random Link" content="1">
            <meta name="if:Show Archive Link" content="1">
            <meta name="if:Show Submit LInk" content="1">
            <meta name="if:Show Personal Link" content="1">
            <meta name="image:PersonalPicture" content=""/>
            <meta name="color:Title font" content="">
            <meta name="color:main Font" content="">
            <meta name="image:header" content=""/>
            <meta name="color:hover font" content="">
    
    <title>{Title}</title>
            <link rel="shortcut icon" href="{Favicon}">
            <link rel="alternate" type="application/rss+xml" href="{RSS}">
            {block:Description}
                <meta name="description" content="{MetaDescription}" />
            {/block:Description}
        </head>
    <style>
    <style type="text/css">
    
    body { background-image: url('http://i51.tinypic.com/2lw9ac4.jpg'); }
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #3
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Unfortunately still doesn't work, missed that off when i added it back in to copy and paste to you guys haha! i wish it was that simple

  • #4
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by fatalsiren View Post
    Unfortunately still doesn't work, missed that off when i added it back in to copy and paste to you guys haha! i wish it was that simple
    Oh, duh. I missed this part:
    Code:
    <html>
        <head>
             {block:Description}
            <meta name="description" content="{MetaDescription}" />
            {/block:Description}
    
            <meta name="font:Title" content="">
            <meta name="font:main" content="">
            <meta name="if:Show RSS Link" content="1">
            <meta name="if:Show Random Link" content="1">
            <meta name="if:Show Archive Link" content="1">
            <meta name="if:Show Submit LInk" content="1">
            <meta name="if:Show Personal Link" content="1">
            <meta name="image:PersonalPicture" content=""/>
            <meta name="color:Title font" content="">
            <meta name="color:main Font" content="">
            <meta name="image:header" content=""/>
            <meta name="color:hover font" content="">
    
    <title>{Title}</title>
            <link rel="shortcut icon" href="{Favicon}">
            <link rel="alternate" type="application/rss+xml" href="{RSS}">
            {block:Description}
                <meta name="description" content="{MetaDescription}" />
            {/block:Description}
        </head>
    <style>
    <style type="text/css">
    
    body { background-image: url('http://i51.tinypic.com/2lw9ac4.jpg'); }
    Remove that first <style> tag and I think you'll be set.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • Users who have thanked Rowsdower! for this post:

    fatalsiren (07-25-2011)

  • #5
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    just noticed that thank you so much guys it works now!

  • #6
    New Coder
    Join Date
    Jul 2011
    Location
    Kansas
    Posts
    15
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Smile

    Ya know, it'd be much easier to use a CSS file and do this:

    Code:
    html,body
    {
    	margin:0;padding:0;
    	background-image:url(images/BG.jpg); //replace this with the path to your background image.
    }

  • #7
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    851
    Thanks
    11
    Thanked 79 Times in 77 Posts
    Better:

    Code:
    For the body tag example:
    
    body {
    width: XXpx;
    height: YYpx;
    margin: 0 auto;
    background: #fff url(http://i51.tinypic.com/2lw9ac4.jpg) no-repeat center scroll;
    }
    Or:

    How to put a background image in your Tumblr theme
    ☠ ☠RON☠ ☠


  •  

    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
    •