1. Computer problem? Tech Support Guy is completely free -- paid for by advertisers and donations. Click here to join today! If you're new to Tech Support Guy, we highly recommend that you visit our Guide for New Members.

Solved: Help with Background page

Discussion in 'Web Design & Development' started by CSIlover, Apr 13, 2008.

Thread Status:
Not open for further replies.
Advertisement
  1. CSIlover

    CSIlover Thread Starter

    Joined:
    Dec 22, 2006
    Messages:
    130
    Hi,

    I am trying to make my own background page for my website on Freewebs. However I keep asking for help and I am getting none over there. They use to have this great forum where everyone helped everyone. I have been trying to find it but all i find is there support forum where noone answers you. Does anyone know what happened to the old forum??? :confused:

    Anyway I made my own background page and I am trying to figure out what format it should be in to take up the least space and the have the best loading time. I am also trying to fix the tiling problem. Does anyone know how I can make it STOP tiling so I just have my text one time?

    Thanks for the help! :D
     
  2. Gigacore

    Gigacore

    Joined:
    Jul 19, 2007
    Messages:
    577
    use the all wonders of CSS and set the background as that image or watever and set no-repeat and set the appropriate resolution... If u want more details, fire it..
     
  3. CSIlover

    CSIlover Thread Starter

    Joined:
    Dec 22, 2006
    Messages:
    130
    I don't know CSS. I use page builder not HTML but I know how to put the code in.

    How do I do this and set the right resolution? I have a 17 inch and others a 15 inch how can I fix it so it is right for everyone. Thanks.
     
  4. Gigacore

    Gigacore

    Joined:
    Jul 19, 2007
    Messages:
    577
    hmm.. better opt for a image which has width no more than 1000 pixels.

    Assuming that u know how to link an external style sheet, here's how u gonna do it.

    Enter this in style sheet (CSS)

    Code:
    [SIZE="2"]#content-background {
            width: 1000px;
    	height: 800px;
    	background: #CCC url(filename.jpg) no-repeat center top;
    	padding: 0;[/SIZE]
    }
    Now the background image must be the same directory of ur CSS file.

    In HTML page create a div id...

    Code:
    [SIZE="2"]<div id="content-background"></div>[/SIZE]
    Note that u need to start <div id="content-background"> at content start and close it at the end </div>

    like this:

    Code:
    [SIZE="2"]<div id="content-background">
    <div id="blah">
    Blah blah blah
    I love TSG
    .
    .
    .
    .
    </div>
    </div>[/SIZE]
     
  5. CSIlover

    CSIlover Thread Starter

    Joined:
    Dec 22, 2006
    Messages:
    130
    Hi Gigacore,

    I had so many problems and FWs just let me know my current template does not have CSS. That figures... at least I know why i am having so much trouble! LOL

    Umm, They have one I am going to give a try and change my current template over to the CSS one. Freewebs told me it would be fine and I shouldn't lose anything. I am still worried.

    WHere in this css area do I paste the code? Thank you so much for the help!

    Here's what the page shows me... I am just confused as where to put it.


    /* Waveform YELLOW*/

    body {
    font:12px verdana, arial;
    color:#fef89f;
    min-width: 760px;
    margin: 0px;
    padding: 0px;
    background-color: #000;
    }

    /*
    * Container surrounding all content on the page
    */
    .fw-container {
    margin: 0 auto;
    padding: 0;
    width: 760px;
    border: ;
    overflow:hidden;
    }

    a,
    a:visited {
    color:#fdeb00;
    text-decoration: none;
    }

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

    code,pre {
    font-size:12px
    }

    fieldset {
    margin:1em 0;
    padding:1em;
    border:1px solid #CCC
    }

    legend {
    color:#000;
    font-weight:bold;
    }

    label {
    cursor:pointer
    }

    /*
    * This can be used to decorate around any advertisements that appear on the page (non-premium users only)
    * It is STRICTLY forbidden to modify this code as to obstruct the view of the advertisement
    */
    .fw-advertisement,
    #fw-advertisement {
    margin:0 auto;
    padding-top: 10px;
    padding-bottom: 10px;
    width:760px;
    border:0;
    text-align: center;
    background: #000;
    }

    /*
    * Container surrounding Site Title, Small Title, Logo, and home-link
    */
    .fw-head {
    height: 196px;
    margin:0;
    border:0;
    background: #242424 ;
    position:relative;
    }

    /*
    * Site Title
    */
    .fw-head h1 {
    font:bold 26px verdana;
    letter-spacing: -1px;
    color: #fff;
    border: ;
    text-align: left;
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 10;
    padding:0px;
    margin:0px;
    }

    /*
    * Site Small Title
    */
    .fw-head h3 {
    font:normal 12px arial;
    color: #fff;
    border: ;
    text-align: left;
    position: absolute;
    top: 60px;
    left: 20px;
    z-index: 10;
    padding:0px;
    margin:0px;
    }

    .fw-logo {
    width:760px;
    height:196px;
    }

    .fw-home-link {
    width:0px;
    height:0px;
    display:none;
    }

    hr {
    display:none;
    }

    /*
    * NavBar
    * UL containing all the NavBar links
    */

    .fw-nav-menu {
    background: #242424;
    padding: 10px 20px 10px 20px;
    margin: 0px;
    font-family: arial;
    font-weight: normal;
    color: #fdeb00;
    border-top: solid 1px #000;
    }

    .fw-nav-menu ul {
    margin:0px;
    padding:0px;
    border: ;
    background: transparent;
    list-style:none;
    text-align:left;
    cursor:default;

    }

    /*
    * Individual NavBar LI's
    */
    .fw-nav-menu li {
    margin:0px 15px 0px 0px;
    display: inline;
    }

    /*
    * Individual NavBar links
    */
    .fw-nav-menu a {
    text-decoration:none;
    }

    /*
    * This is the container that holds the main content (paragraphs) of the page.
    */
    .fw-with-mini {
    float:left;
    width: 70%;
    margin: 0px 0px 0px 0px;
    font-size: 12px;
    overflow: hidden;
    background: #242424;
    }

    /*
    * The fw-no-mini class is applied to the fw-content DIV
    * when there are no mini-paragraphs on the page.
    * This statement must remain in the css even if there are mini paragraphs.
    * If there are mini paragraphs on the page, this will be ignored.
    */
    .fw-content {
    float:none;
    width:100%;
    }

    .fw-content h2 {
    font:bold 18px verdana;
    color: #fff;
    letter-spacing: -1px;
    margin: 0px 0px 10px 0px;
    padding-top: 15px;
    }

    .fw-paragraph {
    padding: 0px 20px 20px 20px;
    border-top: solid 1px #000;
    background: #242424 url('http://images.freewebs.com/Members/Generationz/CSSStyles/WaveForm/Yellow/bg-p.gif') repeat-x top left;
    overflow: hidden;
    clear:both;
    }


    .fw-text {
    margin: 0px 0px 0px 0px;
    overflow: hidden;
    height: 100%;
    }

    .fw-content ul,.fw-content ol,.fw-content dd {
    margin-left:2em;
    }

    .fw-mini-pars {
    float:right;
    width:30%;
    }

    .fw-mini-pars dt {
    color:#000;
    font-weight:bold;
    margin-top:1em;
    border-bottom:.3em solid #EEE;
    }

    .fw-mini-pars dd {
    margin-top:.2em;
    color:#333;
    }

    .fw-footer {
    font-size: 10px;
    font-family: verdana, sans-serif;
    background: #161616;
    margin: 0px 0px 0px 0px;
    padding: 6px 0px 6px 20px;
    clear: both;
    border-top: solid 1px #000;
    color: #999
    }

    .fw-footer p {
    padding: 0px 0px 0px 0px;
    margin: 0px
    }

    .fw-tracker {
    background: #242424;
    margin: 0px 0px 0px 0px;
    padding: 4px 0px 4px 20px;
    font-size: 10px;
    font-family: verdana, sans-serif;
    clear: both;
    border-top: solid 1px #000;
    color: #999
    }

    /* forms */

    label,button,input[type="submit"] {
    cursor:pointer;
    }

    input,textarea {
    padding:.1em;

    }

    textarea {
    font:1em tahoma,verdana,arial,sans-serif;
    }

    .formSpan {
    display:block;
    margin:1em 0 0
    }

    /* The following styles are for the blog.
    * Remember, if a CSS property is already defined in blog.css,
    * you must use the !important rule.
    */

    /*
    * blog entry container
    */
    .fwBlogEntryDisplay {
    border-bottom: 0 !important;
    margin: 0px !important;
    margin-bottom: 30px !important;
    padding: 0px !important;
    }

    /*
    * blog entry title
    */
    .fwBlogEntryTitle {
    font:bold 18px verdana !important;
    color: #fff !important;
    letter-spacing: -1px !important;
    margin: 0px 0px 0px 0px !important;
    padding: 0px !important;
    padding-top: 15px !important;
    }

    /*
    * blog entry date
    */
    .fwBlogEntryDate {
    margin: 0px 0px 0px 0px !important;
    padding: 0px !important;
    font-size: 11px !important;
    font-family: verdana !important;
    color: #fff !important;
    }

    .fwBlogEntryDate BR {
    display: none;
    }

    /*
    * blog entry body
    */
    .fwBlogEntryBody {
    border-bottom: solid 4px #000 !important;
    }

    /*
    * blog comments
    */
    .fwBlogCommentContainer{
    border: solid 1px #ada211 !important;
    padding: 10px !important;
    margin: 10px 0px 0px 0px !important;
    background-color: #000 !important;
    }

    /* Google ad colors */

    #googlecolors1 {
    background-color:#000; /*bg*/
    color:#fef89f; /*text*/
    }
    #googlecolors1 a, #googlecolors1 a:visited {
    color:#fff; /*link*/
    }
    #googlecolors2 {
    background-color:#000; /*border*/
    color:#fdeb00; /*url*/
    }
     
  6. Sponsor

As Seen On
As Seen On...

Welcome to Tech Support Guy!

Are you looking for the solution to your computer problem? Join our site today to ask your question. This site is completely free -- paid for by advertisers and donations.

If you're not already familiar with forums, watch our Welcome Guide to get started.

Join over 733,556 other people just like you!

Loading...
Thread Status:
Not open for further replies.

Short URL to this thread: https://techguy.org/703499

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice