WEB Background images

Discussion in 'OT Technology' started by adelacruz, Nov 28, 2007.

  1. adelacruz

    adelacruz New Member

    Joined:
    Apr 5, 2005
    Messages:
    6,991
    Likes Received:
    0
    Location:
    Saint Petersburg, Florida.
    I am a total noob at this i know some basic html and thats it. I was wondering how i can get a background image like what.cd, and the site im building is pretty simple should be 4 pages (1 splash page, 1 english page/blog, 1 spanish page/blog, 1 gallery) Im using dreamhost's 1 year deal, and am halfway through the splash page except for the background.
     
  2. Deepsix

    Deepsix OT Supporter

    Joined:
    Jan 22, 2004
    Messages:
    19,537
    Likes Received:
    0
    Location:
    Canada
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html dir="ltr" lang="en">
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <meta name="generator" content="vBulletin 3.6.7" />
    
    <meta name="keywords" content="Background images, import domestic rides performance off topic lazy cars fun entertainment drama" />
    <meta name="description" content="Background images The Webmaster Lab" />
    
    
    <!-- CSS Stylesheet -->
    <style type="text/css" id="vbulletin_css">
    <!--
    /* vBulletin 3 CSS For Style 'OT - Dim' (styleid: 7) */
    body
    {
    	background: #D7D7D7;
    	color: #000000;
    	font: 10pt verdana,arial,helvetica,sans-serif;
    }
    a:link, body_alink
    {
    	color: #000030;
    	text-decoration: none;
    }
    a:visited, body_avisited
    {
    	color: #000000;
    	text-decoration: none;
    }
    a:hover, a:active, body_ahover
    {
    	color: #3399FF;
    	text-decoration: none;
    }
    .page
    {
    	background: #D7D7D7;
    }
    td, th, p, li
    {
    	font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
    }
    .tborder
    {
    	background: #687587;
    }
    .tcat
    {
    	background: #D7D7D7;
    	color: #00000;
    	font-size: 10pt;
    }
    .tcat a:link, .tcat_alink
    {
    	color: #000030;
    	text-decoration: none;
    }
    .tcat a:visited, .tcat_avisited
    {
    	color: #000000;
    	text-decoration: none;
    }
    .tcat a:hover, .tcat a:active, .tcat_ahover
    {
    	color: #3399FF;
    	text-decoration: underline;
    }
    .thead
    {
    	background: #687587;
    	color: #FFFFFF;
    	font-size: 10px;
    	font-weight: bold;
    }
    .thead a:link, .thead_alink
    {
    	color: #FFFFFF;
    }
    .thead a:visited, .thead_avisited
    {
    	color: #FFFFFF;
    }
    .thead a:hover, .thead a:active, .thead_ahover
    {
    	color: #3399FF;
    }
    .tfoot
    {
    	background: #687587;
    	color: #FFFFFF;
    }
    .tfoot a:link, .tfoot_alink
    {
    	color: #FFFFFF;
    }
    .tfoot a:visited, .tfoot_avisited
    {
    	color: #FFFFFF;
    }
    .tfoot a:hover, .tfoot a:active, .tfoot_ahover
    {
    	color: #3399FF;
    }
    .alt1, .alt1Active
    {
    	background: #D0D0D0;
    }
    .alt2, .alt2Active
    {
    	background: #C0C0C0;
    }
    td.inlinemod
    {
    	background: #FFFFCC;
    	color: #000000;
    }
    .wysiwyg
    {
    	background: #D0D0D0;
    	color: #000000;
    	font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
    }
    textarea, .bginput
    {
    	background: #D7D7D7;
    	color: #000000;
    	font: 10pt verdana,arial,helvetica,sans-serif;
    }
    .button
    {
    	background: #D7D7D7;
    	color: #000000;
    	font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
    }
    select
    {
    	background: #D7D7D7;
    	color: #000000;
    	font: 11px verdana,arial,helvetica,sans-serif;
    }
    option, optgroup
    {
    	font-size: 11px;
    	font-family: verdana,arial,helvetica,sans-serif;
    }
    .smallfont
    {
    	font: 10px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
    }
    .time
    {
    	color: #000000;
    }
    .navbar
    {
    	font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
    }
    .highlight
    {
    	color: #FF0000;
    	font-weight: bold;
    }
    .fjsel
    {
    	background: #D7D7D7;
    	color: #000000;
    }
    .fjdpth0
    {
    	background: #F7F7F7;
    	color: #000000;
    }
    .panel
    {
    	background: #f2f2f2;
    	color: #000000;
    	padding: 10px;
    	border: 2px outset;
    }
    .panelsurround
    {
    	background: #E8E8E8;
    	color: #000000;
    }
    legend
    {
    	color: #22229C;
    	font: 11px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
    }
    .vbmenu_control
    {
    	background: #D7D7D7;
    	color: #000000;
    	font: bold 11px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
    	padding: 3px 6px 3px 6px;
    	white-space: nowrap;
    }
    .vbmenu_control a:link, .vbmenu_control_alink
    {
    	color: #000000;
    	text-decoration: none;
    }
    .vbmenu_control a:visited, .vbmenu_control_avisited
    {
    	color: #000000;
    	text-decoration: none;
    }
    .vbmenu_control a:hover, .vbmenu_control a:active, .vbmenu_control_ahover
    {
    	color: #000000;
    	text-decoration: underline;
    }
    .vbmenu_popup
    {
    	background: #F2F2F2;
    	color: #000000;
    	border: 1px solid #0B198C;
    }
    .vbmenu_option
    {
    	background: #E8E8E8;
    	color: #000000;
    	font: 10px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
    	white-space: nowrap;
    	cursor: pointer;
    }
    .vbmenu_option a:link, .vbmenu_option_alink
    {
    	color: #22229C;
    	text-decoration: none;
    }
    .vbmenu_option a:visited, .vbmenu_option_avisited
    {
    	color: #22229C;
    	text-decoration: none;
    }
    .vbmenu_option a:hover, .vbmenu_option a:active, .vbmenu_option_ahover
    {
    	color: #FFFFFF;
    	text-decoration: none;
    }
    .vbmenu_hilite
    {
    	background: #8A949E;
    	color: #FFFFFF;
    	font: 10px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
    	white-space: nowrap;
    	cursor: pointer;
    }
    .vbmenu_hilite a:link, .vbmenu_hilite_alink
    {
    	color: #FFFFFF;
    	text-decoration: none;
    }
    .vbmenu_hilite a:visited, .vbmenu_hilite_avisited
    {
    	color: #FFFFFF;
    	text-decoration: none;
    }
    .vbmenu_hilite a:hover, .vbmenu_hilite a:active, .vbmenu_hilite_ahover
    {
    	color: #FFFFFF;
    	text-decoration: none;
    }
    /* ***** styling for 'big' usernames on postbit etc. ***** */
    .bigusername { font-size: 10pt; }
    
    /* ***** small padding on 'thead' elements ***** */
    td.thead, div.thead { padding: 4px; }
    
    /* ***** basic styles for multi-page nav elements */
    .pagenav a { text-decoration: none; }
    .pagenav td { padding: 2px 4px 2px 4px; }
    
    /* ***** define margin and font-size for elements inside panels ***** */
    .fieldset { margin-bottom: 6px; }
    .fieldset, .fieldset td, .fieldset p, .fieldset li { font-size: 11px; }
    
    /* ***** don't change the following ***** */
    form { display: inline; }
    label { cursor: default; }
    .normal { font-weight: normal; }
    .inlineimg { vertical-align: middle; }
    body { margin: 0; padding: 0; }
    img { border: 0; }
    #header {
    position: relative;
    display: block;
    width: 100%;
    height: 17px;
    margin: 0;
    padding: 0;
    background: url(images/X/dim/images/nav_bg.gif) repeat-x;
    }
    #header #header-nav {
    position: absolute;
    top: 0;
    right: 0;
    }
    #header #header-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    }
    #header #header-nav ul li {
    display: inline;
    }
    #banners {
    position: relative;
    display: block;
    width: 100%;
    padding: 20px 0;
    background: url(images/X/dim/images/bg_banners.gif) repeat-x;
    }
    #banners #ads {
    position: relative;
    display: block;
    margin: 0 auto;
    width: 970px;
    }
    #banners #ads a {
    margin: 0 5px;
    _height: 1em
    }
    -->
    </style>
    
    <!-- / CSS Stylesheet -->
    
    <script type="text/javascript">
    <!--
    var SESSIONURL = "";
    var IMGDIR_MISC = "images/misc";
    var vb_disable_ajax = parseInt("0", 10);
    // -->
    </script>
    
    <script type="text/javascript" src="clientscript/vbulletin_global.js?v=367"></script>
    <script type="text/javascript" src="clientscript/vbulletin_menu.js?v=367"></script>
    
    <link rel="alternate" type="application/rss+xml" title="Offtopic.com RSS Feed" href="external.php?type=RSS2" />
    
    <link rel="alternate" type="application/rss+xml" title="Offtopic.com - The Webmaster Lab - RSS Feed" href="external.php?type=RSS2&amp;forumids=168" />
    
    
    <script type="text/JavaScript">
    <!--
    function MM_openBrWindow(theURL,winName,features) { //v2.0
      window.open(theURL,winName,features);
    }
    //-->
    </script>
    	<title>Background images - Offtopic.com</title>
    
    	<script type="text/javascript" src="clientscript/vbulletin_post_loader.js?v=367"></script>
    </head>
    <body onload="">
    <!-- Start OT X Header and Navigation -->
    <div id="header">
    <div id="branding">
    <a href="http://forums.offtopic.com"><img src="images/X/dim/images/nav_home.gif" width="146" height="17" border="0"></a>
    </div>
    <div id="header-nav">
    <ul>
    <li><a href="payments.php"><img src="images/X/dim/images/nav_sub.gif" width="91" height="17" border="0"></a></li><li><a href="http://www.blogphotohost.com" target=blank><img src="images/X/dim/images/nav_uploads.gif" width="72" height="17" border="0"></a></li><li><a href="search.php" accesskey="4" rel="nofollow"><img src="images/X/dim/images/nav_search.gif" width="66" height="17" border="0"></a></li><li><a href="usercp.php"><img src="images/X/dim/images/nav_settings.gif" width="70" height="17" border="0"></a></li><li><a href="faq.php" accesskey="5"><img src="images/X/dim/images/nav_help.gif" width="48" height="17" border="0"" ></a></li>
    </ul>
    </div>
    </div>
    <!-- End OT X Header and Navigation -->
    
    <!-- Start OT X Banners -->
    
    <div id="banners">
    <div id="ads">
    
    <SCRIPT LANGUAGE="Javascript"><!--
    function banner() {
    };
    banner = new banner();
    number = 0;
    // bannerArray
    
    banner[number++] = "<a href='http://www.ipodcarparts.com/' target='_blank'><img id='left-banner' src='http://www.offtopic.com/banners/ipod.gif' border='0'></a>"
    banner[number++] = "<a href='http://www.afboard.com' target='_blank'><img id='left-banner' src='http://www.offtopic.com/banners/afb.gif' border='0'></a>"
    
    increment = Math.floor(Math.random() * number);
    document.write(banner[increment]);
    //--></SCRIPT>
    
    <SCRIPT LANGUAGE="Javascript"><!--
    function banner() {
    };
    banner = new banner();
    number = 0;
    // bannerArray
    
    banner[number++] = "<a href='sendmessage.php' target='_blank'><img id='right-banner' src='http://www.offtopic.com/banners/adspot.jpg' border='0'></a>"
    banner[number++] = "<a href='http://bonkenmoos.fcas1.hop.clickbank.net' target='_blank'><img id='right-banner' src='http://www.offtopic.com/banners/cash.gif' border='0'></a>"
    
    increment = Math.floor(Math.random() * number);
    document.write(banner[increment]);
    //--></SCRIPT>
    
    </div>
    </div</html>
     
  3. adelacruz

    adelacruz New Member

    Joined:
    Apr 5, 2005
    Messages:
    6,991
    Likes Received:
    0
    Location:
    Saint Petersburg, Florida.
    that's OT's source code, i took my pointers from the what.cd design but they dont include a code for their background.
     
  4. ROFLCORE

    ROFLCORE Guest

    :hsugh:

    Code:
    body  { background: url("http://images.what.cd/pic/publicbg.png") repeat #FFFFFF; font-family: Bitstream Vera Sans, Tahoma, sans-serif; font-size: 11px; color: #333333; }
    table { font-family: Bitstream Vera Sans, Tahoma, sans-serif; font-size: 11px; color: #333333; }
    h1    { font-family: Bitstream Vera Sans, Tahoma, sans-serif; color: #333333; }
    h2    { font-family: Bitstream Vera Sans, Tahoma, sans-serif; color: #333333; text-align: center; }
    a     { color: #555555; }
     
  5. kingtoad

    kingtoad OT Supporter

    Joined:
    Sep 2, 2003
    Messages:
    55,923
    Likes Received:
    11
    Location:
    Los Angeles
    Code:
    body { 
      background: url("background.jpg");
    }
    
     
  6. adelacruz

    adelacruz New Member

    Joined:
    Apr 5, 2005
    Messages:
    6,991
    Likes Received:
    0
    Location:
    Saint Petersburg, Florida.
    ok this is what i ended up with www.jrxpainting.com thanks for the advice i was wondering if there was a way to integrate a blog onto a design that flows with the splash page i made, i need to add a gallery and a blog as well as an about us/contact us page, do you guys have any tips? at least being able to link to the gallery and splash page from wordpress would be nice but i dont know if thats possible.

    I also wanted to add a footer with our tel. # and email address.
     
  7. adelacruz

    adelacruz New Member

    Joined:
    Apr 5, 2005
    Messages:
    6,991
    Likes Received:
    0
    Location:
    Saint Petersburg, Florida.
    yes i guess it depends on whether your browser supports the character..
     
  8. ROFLCORE

    ROFLCORE Guest

    That's all very possible.

    You can create "pages" in your wordpress blog for the about us and contact pages. You just need to style the blog to match your splash page. Same with your gallery.


    I would have added the background image code into the style section and not in the html.
     
  9. adelacruz

    adelacruz New Member

    Joined:
    Apr 5, 2005
    Messages:
    6,991
    Likes Received:
    0
    Location:
    Saint Petersburg, Florida.
    I took some of your advice and found the header for wordpress and changed it in PS to have the company logo, also added a contact us and an about us page on the side, now i cant find how to change the gallery to a blue theme.
     

Share This Page