The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Background image help
Kahroo
post Nov 10 2011, 09:56 PM
Post #1





Group: Members
Posts: 5
Joined: 10-November 11
Member No.: 15,832
Ok so on my tumblr: My Tumblr I have a background pic on there. Firefox confirms it when you right click and hit view background it show's this: BG Image. But I am not seeing it. Why won't it show up?

I did my coding right:
CODE
<style type="text/css">
                   body {
                    background: url("http://img847.imageshack.us/img847/3623/rainbowskullscolorfulda.gif")top left fixed repeat;  
                    }


Am I doing something wrong? Here is my code for my whole profile:

[spoiler]
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>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>{Title}{block:SearchPage} - {lang:Search results for SearchQuery}{/block:SearchPage}{block:PostSummary} - {PostSummary}{/block:PostSummary}</title>
        <link rel="icon" href="{Favicon}"/>                                          
        <!-- custom colours -->
        <meta name="color:Regular Entry" content="#5a308d"/>
        <meta name="color:Video Entry" content="#bb225a"/>
        <meta name="color:Audio Entry" content="#cf4039"/>
        <meta name="color:Link Entry" content="#8abd50"/>
        <meta name="color:Photo Entry" content="#90deec"/>
        <meta name="color:Twitter Entry" content="#01dded"/>
        <meta name="color:Description Link" content="#73b8c4"/>
        <meta name="font:Body" content="Helvetica, Arial, Sans-Serif"/>
        <meta name="font:Title" content="Helvetica, Arial, Sans-Serif"/>
        <!-- end custom colours -->
        
        <meta name="text:Disqus Shortname" content="" />

        <meta name="description" content="{MetaDescription}" />

        <link rel="alternate" type="application/rss+xml" title="RSS" href="{RSS}"/>
        <link rel="stylesheet" type="text/css" href="http://static.tumblr.com/xhpdxdi/YpZkip18h/style.css">
        <meta name="viewport" content="width=775"/> <!-- iPhone -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript" src="http://static.tumblr.com/xhpdxdi/iGMkinf8r/jqwidont-compressed.js"></script>
        <script type="text/javascript" src="http://static.tumblr.com/xhpdxdi/3mkkinfa8/shortcut.js"></script>
        <script type="text/javascript" src="http://static.tumblr.com/xhpdxdi/1H9kinfb0/lightbox.js"></script>
        <script type="text/javascript" src="http://static.tumblr.com/sajzoro/BgXkqqy95/me.js"></script>
        <script type="text/javascript">
        
        // enter your twitter username if you want it to display your most recent status.
        {block:IndexPage}
        var twitter_username = "KittyKahroo"
        {/block:IndexPage}


        function next_page(){
            //{block:NextPage}
            window.location = "{NextPage}"
            //{/block:NextPage}        
        }
        function previous_page(){
            //{block:PreviousPage}
            window.location = "{PreviousPage}"
            //{/block:PreviousPage}
        }
        
        var current_page = {CurrentPage}
        
        </script>
        <style type="text/css">
                                    
                   body {
                    background: url("http://img847.imageshack.us/img847/3623/rainbowskullscolorfulda.gif")top left fixed repeat;  
                    }
                    font-family: {font:Body};
                }
                h1 {
                    font-family: {font:Title};
                }
                .regular .content img {
                    max-width: 400px;
                }
                .regular .content blockquote img {
                    max-width: 150px;
                }

        .regular,
        .conversation,
        .quote{
            background-color:{color:Regular Entry};
        }
        .regular .caption h3 a,
        .conversation .caption h3 a,
        .quote .caption h3 a{
            color:{color:Regular Entry};
        }
        .video{
            background-color:{color:Video Entry};
        }
        .audio{
            background-color:{color:Audio Entry};
        }
        .link{
            background-color:{color:Link Entry};
        }        
        .link .caption h3 a{
            color:{color:Link Entry};
        }
        .photo{
            background-color:{color:Photo Entry};    
        }
        #twitter{
            background-color:{color:Twitter Entry};
        }
        #right a{
            color:{color:Description Link};
        }
        #disqus_thread h3 {
            font-size: 15px;
        }
        em { font-style: italic; }
        strong { font-weight: bold; }
        
        .search_query, .tag { font-weight: bold; }
        
        {CustomCSS}
        </style>
        <!--[if lt IE 7]>
            <style type="text/css">
            </style>
        <![endif]-->
    </head>
    <body>
        <div id="bg"></div>
        <div id="border_overlay"></div>
        <div id="loading"></div>
        <div id="right">
            <h1><a href="/" class="title"><img src="http://static.tumblr.com/vrzi4sf/BRilufhbu/kahroo.jpg"></a></h1>
            <p class="description"><small>Name: Kahroo/Pocky/Steve | Age: 22 | Loc: NJ</small></p>
            <div class="panel" id="search">
                <form action="/search" method="get">
                    <input type="text" name="q" value="Type and press enter to search." id="searchfield" />
                </form>
            </div>
            <a href="http://www.tumblr.com/follow/{Name}"><div class="" id="followontumblr">{lang:Follow on Tumblr}</div></a>
            <p class="colphon">{block:HasPages}{block:Pages}<a href="{URL}">{Label}</a> | {/block:Pages}{/block:HasPages}{block:AskEnabled}<a href="/ask">{AskLabel}</a> | {/block:AskEnabled}{block:SubmissionsEnabled}<a href="/submit">{SubmitLabel}</a> | {/block:SubmissionsEnabled}<a href="/archive" id="archive_link">{lang:Archive}</a> | <a href="{RSS}">{lang:RSS}</a></p>
            
        <div class="header2"><b>Kool People:</b></div>
        {block:Following}
        {block:Followed}<a href="{FollowedURL}"><img src="{FollowedPortraitURL-30}" border="0" /></a> {/block:Followed}
        <BR>{/block:Following}
        </div>
        
        <div id="posts">
            
            <div id="twitter" class="entry hide">
                <div class="icon">
                    <a href="#" class="permalink"></a>
                </div><!-- /.icon -->
                <div class="content">
                    <div class="caption">
                        <p class="latest">{lang:Latest Tweets}:</p>
                        <p id="twitter_status"></p>
                    </div><!-- /.caption -->
                </div><!-- /.content -->
            </div><!-- /.entry #twitter -->
            
            <!-- SEARCH RESULTS -->
            
            <!-- {block:SearchPage} -->
            <div class="entry search">
                <div class="icon">
                    <a class="permalink" href="/search?q={SearchQuery}"></a>
                </div><!-- /.icon -->
                <div class="content">
                    <div class="caption">
                        {block:SearchResults}
                            <p>{lang:Your search for SearchQuery returned SearchResultCount results 2}.</p>
                        {/block:SearchResults}
                        
                        {block:NoSearchResults}
                            <p>{lang:No search results for SearchQuery 2}.</p>
                        {/block:NoSearchResults}
                    </div><!-- /.caption -->
                </div><!-- /.content -->
            </div><!-- /.entry .search -->
            <!-- {/block:SearchPage} -->
            
            
            <!-- {block:Posts} -->
            
            <!-- DATES -->
            
            <!-- {block:NewDayDate} -->
            <div class="entry date">
                <div class="icon">
                    <a class="permalink" href="/archive/{Year}/{MonthNumber}"></a>
                </div><!-- /.icon -->
                <div class="content">
                    <div class="caption">
                        <p><a href="/archive/{Year}/{MonthNumber}">{Month} {DayOfMonth} {Year}</a></p>
                    </div><!-- /.caption -->
                </div><!-- /.content -->
            </div><!-- /.entry .date -->
            <!-- {/block:NewDayDate} -->
            
            <!-- PHOTO -->
            <!-- {block:Photo} -->
            <div class="post photo" id="p_{PostID}">
                <div class="icon">
                    <a class="permalink" href="{Permalink}"></a>
                    {block:HighRes}<a href="{PhotoURL-HighRes}" rel="lightbox" class="zoom"></a>{/block:HighRes}
                    {block:IndexPage}
                    {block:NoteCount}<a href="{Permalink}" class="notes">*{NoteCount}<br></a>{/block:NoteCount}
                    {/block:IndexPage}
                </div>
                <div class="content">
                    <div class="the_photo">
                        <div class="photo_inner photo_loading">
                        {LinkOpenTag}<img src="{PhotoURL-500}" class="faint" alt="{PhotoAlt}"/>{LinkCloseTag}
                        </div>
                    </div><!-- .the_photo -->
                    <!--{block:Caption}-->
                    <div class="caption">
                        <p>{Caption}</p>
                        {block:Date}{block:IfDisqusShortname}<p><a href="{Permalink}#disqus_thread"></a></p>{block:IfDisqusShortname}{/block:Date}
                    </div><!-- /.caption -->
                    <!--{/block:Caption}-->
                </div><!-- /.content -->
            </div><!-- /.post .photo -->
            <!-- {/block:Photo} -->
            
            <!-- VIDEO -->
            
            <!-- {block:Video} -->
            <div class="post video" id="p_{PostID}">
                <div class="icon">
                    <a class="permalink" href="{Permalink}"></a>
                    {block:IndexPage}
                    {block:NoteCount}<a href="{Permalink}" class="notes">*{NoteCount}<br></a>{/block:NoteCount}
                    {/block:IndexPage}
                </div><!-- /.icon -->
                <div class="content">
                    <div class="player">{Video-500}</div>
                    <!--{block:Caption}-->
                    <div class="caption">
                        <p>{Caption}</p>
                        {block:Date}{block:IfDisqusShortname}<p><a href="{Permalink}#disqus_thread"></a></p>{block:IfDisqusShortname}{/block:Date}
                    </div><!-- /.caption -->
                    <!--{/block:Caption}-->
                </div><!-- /.content -->
            </div><!-- /.post .video -->
            <!-- {/block:Video} -->
            
            <!-- LINK -->
            
            <!-- {block:Link} -->
            <div class="post link" id="p_{PostID}">
                <div class="icon">
                    <a class="permalink" href="{Permalink}"></a>
                    {block:IndexPage}
                    {block:NoteCount}<a href="{Permalink}" class="notes">*{NoteCount}<br></a>{/block:NoteCount}
                    {/block:IndexPage}
                </div><!-- /.icon -->
                <div class="content">
                    <div class="caption">
                        <h3><a href="{URL}" {Target}>{Name}</a></h3>
                        <p><span class="description">{Description}</span></p>
                        {block:Date}{block:IfDisqusShortname}<p><a href="{Permalink}#disqus_thread"></a></p>{block:IfDisqusShortname}{/block:Date}
                    </div><!-- /.caption -->
                </div><!-- /.content -->
            </div><!-- /.post .link -->
            <!-- {/block:Link} -->

            <!-- REGULAR -->

            <!-- {block:Regular} -->
            <div class="post regular" id="p_{PostID}">
                <div class="icon">
                    <a class="permalink" href="{Permalink}"></a>
                    {block:IndexPage}
                    {block:NoteCount}<a href="{Permalink}" class="notes">*{NoteCount}<br></a>{/block:NoteCount}
                    {/block:IndexPage}
                </div><!-- /.icon -->
                <div class="content">
                    <div class="caption">
                        <h3><a href="{Permalink}">{Title}</a></h3>
                        <p>{Body}</p>
                        {block:Date}{block:IfDisqusShortname}<p><a href="{Permalink}#disqus_thread"></a></p>{block:IfDisqusShortname}{/block:Date}
                    </div><!-- /.caption -->
                </div><!-- /.content -->
            </div><!-- /.post .regular -->
            <!-- {/block:Regular} -->
            
            <!-- QUOTE -->
            
            <!-- {block:Quote} -->
            <div class="post quote" id="p_{PostID}">
                <div class="icon">
                    <a class="permalink" href="{Permalink}"></a>
                    {block:IndexPage}
                    {block:NoteCount}<a href="{Permalink}" class="notes">*{NoteCount}<br></a>{/block:NoteCount}
                    {/block:IndexPage}
                </div><!-- /.icon -->
                <div class="content">
                    <div class="caption">
                        <p class="the_quote {Length}"><span class="quote_mark">"</span>{Quote}<span class="quote_mark">"</span></p>
                        <!-- {block:Source} -->
                        <p class="source">{Source}</p>
                        <!-- {/block:Source} -->
                        {block:Date}{block:IfDisqusShortname}<p><a href="{Permalink}#disqus_thread"></a></p>{block:IfDisqusShortname}{/block:Date}
                    </div><!-- /.caption -->
                </div><!-- /.content -->
            </div><!-- /.post .quote -->            
            <!-- {/block:Quote} -->
            
            <!-- AUDIO -->
            
            <!-- {block:Audio} -->
            <div class="post audio" id="p_{PostID}">
                <div class="icon">
                    <a class="permalink" href="{Permalink}"></a>
                    {block:ExternalAudio}<a href="{ExternalAudioURL}" class="download"></a>{/block:ExternalAudio}
                    {block:IndexPage}
                    {block:NoteCount}<a href="{Permalink}" class="notes">*{NoteCount}<br></a>{/block:NoteCount}
                    {/block:IndexPage}
                </div><!-- /.icon -->
                <div class="content">
                    <div class="the_player">{AudioPlayerGrey}</div>
                    <div class="caption">
                        <p>{Caption}</p>
                        {block:Date}{block:IfDisqusShortname}<p><a href="{Permalink}#disqus_thread"></a></p>{block:IfDisqusShortname}{/block:Date}
                    </div><!-- /.caption -->
                </div><!-- /.content -->
            </div><!-- /.post .quote -->
            <!-- {/block:Audio} -->
            
            <!-- CONVERSATION -->

            <!-- {block:Conversation} -->
            <div class="post conversation" id="p_{PostID}">
                <div class="icon">
                    <a class="permalink" href="{Permalink}"></a>
                    {block:IndexPage}
                    {block:NoteCount}<a href="{Permalink}" class="notes">*{NoteCount}<br></a>{/block:NoteCount}
                    {/block:IndexPage}
                </div><!-- /.icon -->
                <div class="content">
                    <div class="caption">
                        <!-- {block:Title} -->
                        <h3><a href="{Permalink}">{Title}</a></h3>
                        <!-- {/block:Title} -->
                        <p>
                            <ul>
                                <!-- {block:Lines} -->
                                    <li>
                                        {block:Label}<span class="label {Alt}">{Label}</span>{/block:Label}
                                        {Line}
                                    </li>
                                    <!-- {/block:Lines} -->
                            </ul>
                        </p>
                        {block:Date}{block:IfDisqusShortname}<p><a href="{Permalink}#disqus_thread"></a></p>{block:IfDisqusShortname}{/block:Date}
                    </div><!-- /.caption -->
                </div><!-- /.content -->
            </div><!-- /.post .conversation -->
            <!-- {/block:Conversation} -->
                  
            
            <!--{block:PermalinkPage}-->
            <!--{block:Date}-->
            <!--{block:PostNotes}-->
            <div class="entry post_notes">
                <div class="icon">
                    <a class="permalink" href="{Permalink}"></a>
                </div><!-- /.icon -->
                <div class="content">
                    <div class="caption">
                        <div class="the_notes">
                        {PostNotes}
                        </div>
                    </div><!-- /.caption -->
                </div><!-- /.content -->
            </div><!-- /.entry .notes -->
            <!--{/block:PostNotes}-->
            
            <!--{block:IfDisqusShortname}-->
            <div class="entry">
                <div class="content">
                    <div class="caption">
                        <div id="disqus_thread"></div>
                        <script type="text/javascript" src="http://disqus.com/forums/{text:Disqus Shortname}/embed.js"></script>
                        <noscript><a href="http://{text:Disqus Shortname}.disqus.com/?url=ref">{lang:View the discussion thread}</a></noscript>
                    </div>
                </div>
            </div>
            <!--{/block:IfDisqusShortname}-->
            <!--{/block:Date}-->
            <!--{/block:PermalinkPage}-->            
                   
            
            <!-- {/block:Posts} -->    

            <!-- PAGINATION -->
            <!--{block:IndexPage}-->
            <div class="entry pagination">
                <div class="icon">
                    
                </div>
                <div class="content">
                    <div class="caption">
                        <p>{block:PreviousPage}<a href="{PreviousPage}"><span>«</span> {lang:Previous}</a> / {/block:PreviousPage}{block:NextPage}<a href="{NextPage}">{lang:Next} <span>»</span></a>{/block:NextPage}</p>
                    </div><!-- /.caption -->
                </div><!-- /.content -->
            </div><!-- /.entry .pagination -->
            <!-- {/block:IndexPage} -->
        </div>
        
        {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}
    </body>
</html>
[/spoiler]
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Kahroo
post Nov 10 2011, 10:33 PM
Post #2





Group: Members
Posts: 5
Joined: 10-November 11
Member No.: 15,832
Anyone?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Nov 10 2011, 11:21 PM
Post #3


WDG Member
********

Group: Root Admin
Posts: 8,365
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3
Interesting. The background you specify for the html element seems to override the background you specify for the body element. I'm not sure why that is happening.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Kahroo
post Nov 10 2011, 11:34 PM
Post #4





Group: Members
Posts: 5
Joined: 10-November 11
Member No.: 15,832
QUOTE(Darin McGrew @ Nov 10 2011, 11:21 PM) *

Interesting. The background you specify for the html element seems to override the background you specify for the body element. I'm not sure why that is happening.


Neither do I? I am doing everything right. And I really like this theme, just don't like the all white background.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Nov 11 2011, 01:01 AM
Post #5


WDG Member
********

Group: Root Admin
Posts: 8,365
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3
Have you tried just removing the background for the html element?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Kahroo
post Nov 11 2011, 01:14 AM
Post #6





Group: Members
Posts: 5
Joined: 10-November 11
Member No.: 15,832
QUOTE(Darin McGrew @ Nov 11 2011, 01:01 AM) *

Have you tried just removing the background for the html element?


Which part? I am not HMTL Smart. I know how to do a few things.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Nov 11 2011, 12:44 PM
Post #7


WDG Member
********

Group: Root Admin
Posts: 8,365
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3
In http://static.tumblr.com/xhpdxdi/YpZkip18h/style.css :
CODE
html{color:#000;background:#FFF;}
/* ... */
html{
    background-color:#f9f9f9;
    overflow:auto;
}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Nov 11 2011, 02:43 PM
Post #8


.
********

Group: WDG Moderators
Posts: 9,661
Joined: 10-August 06
Member No.: 7
Could it have something to do with the lack of spacing between the URL ending parenthesis and the "top" value here:

CODE
rainbowskullscolorfulda.gif")top

?

Edit: tested now, and it doesn't seem to matter to Firefox 8.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Nov 11 2011, 02:51 PM
Post #9


.
********

Group: WDG Moderators
Posts: 9,661
Joined: 10-August 06
Member No.: 7
When I enable Block Structure in my browser I can see a 20px high strip of the background image at the very top. When I disable absolute positioning, it becomes about 300px high.

Keep in mind that a BODY element can be smaller than the actual viewport. Normally BODY backgrounds fill the whole viewport anyway, but not when you specify a background for the HTML element, in which case the real size of the BODY element is revealed. Maybe your BODY is simply too small for some reason (floating? absolute positioning?).
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Kahroo
post Nov 13 2011, 03:08 AM
Post #10





Group: Members
Posts: 5
Joined: 10-November 11
Member No.: 15,832
QUOTE(Darin McGrew @ Nov 11 2011, 12:44 PM) *

In http://static.tumblr.com/xhpdxdi/YpZkip18h/style.css :
CODE
html{color:#000;background:#FFF;}
/* ... */
html{
    background-color:#f9f9f9;
    overflow:auto;
}



Yup that fixed it. Thank you so much <3
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Markup (HTML, XHTML, XML) · 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: 27th April 2024 - 08:43 PM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC