Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 10 of 10
  1. #1
    Junior Member
    Join Date
    Jan 2013
    Posts
    7
    Member #
    34478

    I am having an issue adding a background behind my page.
    This issue is best explained through images. Right now here is an example of what my website looks like so far:

    http://imageshack.us/a/img835/6745/noback.png

    Now this is what i would like to add to my website template. (The part in Blue on the left and right sides) A background behind the rest of my white page. that stays fixed even when i scroll.
    Example Here:
    http://imageshack.us/a/img824/399/backrc.png

    Is there a specific HTML code to use? if so were would i add it. thank you to anyone that can help

  2.  

  3. #2
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    It all depends on if this is a static page, a CMS ( content management system), template...

    Looks like ( on my phone ), its just a color background... Which can easily be done with CSS ( not HTML ). Even if its an image, it can be a very small image, repeated fairly easy using CSS.

    More info ( code example ), would be helpful... If you're using a template or CMS, as much detail as you can share.

  4. #3
    Junior Member
    Join Date
    Jan 2013
    Posts
    7
    Member #
    34478
    yeah the only thing is it seems as if the entire page is the background. (the white) i was wondering if i would be able to add a background behind the white page. I am using a template from weebly but i edited it in there CCS/HTML editor

  5. #4
    Junior Member
    Join Date
    Jan 2013
    Posts
    7
    Member #
    34478
    /* Resets
    --------------------------------------------------------------------------------*/
    ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, body, html, p, blockquote,
    fieldset, input {
    margin: 0;
    padding: 0;
    }
    a img {
    border: 0;
    }
    a {
    text-decoration: none;
    }
    /* General Styling and Structure
    --------------------------------------------------------------------------------*/
    body {
    font-family: 'Quattrocento', serif;
    font-size: 16px;
    color: #3e3e3e;
    background:url(footer-bg.png) repeat;
    }
    .container {
    margin: 0 auto;
    width: 960px;
    }
    #header-wrap,
    #banner-wrap,
    #nav-wrap,
    #main-wrap,
    #footer-wrap
    {
    width:100%;
    min-width:960px;
    background:#fff;
    }
    p a, #nav-wrap a, h2 a {
    color: #000;
    border-bottom:1px dashed #000;
    }
    a:hover {
    border-bottom:none;
    }
    blockquote {
    font-style:italic;
    border-left:4px solid #ddd;
    margin:10px 0 10px 0;
    padding-left:20px;
    line-height:1.5;
    color:#888;
    }
    .wsite-multicol-table-wrap {margin:0 !important;}
    h2 {
    font-size: 24px;
    padding: .5em 0 .2em 0;
    line-height: 1.2;
    font-weight: normal;
    color: #000;
    }
    p {
    line-height: 1.5;
    padding: .5em 0;
    }
    div#content {min-height:400px;}
    /* Header
    --------------------------------------------------------------------------------*/
    #header-wrap {
    padding:50px 0px 5px;
    }
    #logo,
    #logo a {
    color:#000;
    font-size:30px;
    border:none;
    }
    #header, #nav-table {
    border-collapse: collapse;
    border-spacing: 0;
    width:100%;
    }
    #header td {
    vertical-align: middle;
    text-align: left;
    }
    .header-right table {
    float: right;
    width: 1px;
    }
    .header-right td {
    padding: 0;
    }
    /* Header: Phone Number
    --------------------------------------------------------------------------------*/
    .header-right .phone-number .wsite-text {
    display: block;
    white-space: nowrap;
    }
    /* Header: Social Links
    --------------------------------------------------------------------------------*/
    .header-right .wsite-social {
    vertical-align: middle;
    }
    .wsite-social-item {
    width: 28px;
    height: 30px;
    margin: 1px 0 0 4px;
    }
    .wsite-social-rss {
    background: url(social-icons.png) no-repeat -130px 0px;
    }
    .wsite-social-rss:hover {
    background-position: -130px -30px;
    }
    .wsite-social-rss:active {
    background-position: -130px -60px;
    }
    .wsite-social-linkedin {
    background: url(social-icons.png) no-repeat -65px 0px;
    }
    .wsite-social-linkedin:hover {
    background-position: -65px -30px;
    }
    .wsite-social-linkedin:active {
    background-position: -65px -60px;
    }
    .wsite-social-facebook {
    background: url(social-icons.png) no-repeat 0px 0px;
    }
    .wsite-social-facebook:hover {
    background-position: 0px -30px;
    }
    .wsite-social-facebook:active {
    background-position: 0px -60px;
    }
    .wsite-social-twitter {
    background: url(social-icons.png) no-repeat -32px 0px;
    }
    .wsite-social-twitter:hover {
    background-position: -32px -30px;
    }
    .wsite-social-twitter:active {
    background-position: -32px -60px;
    }
    .wsite-social-mail {
    background: url(social-icons.png) no-repeat -97px 0px;
    }
    .wsite-social-mail:hover {
    background-position: -97px -30px;
    }
    .wsite-social-mail:active {
    background-position: -97px -60px;
    }
    .wsite-social-pinterest {
    background: url(social-icons.png) no-repeat -227px 0px;
    }
    .wsite-social-pinterest:hover {
    background-position: -227px -30px;
    }
    .wsite-social-pinterest:active {
    background-position: -227px -60px;
    }
    .wsite-social-youtube {
    background: url(social-icons.png) no-repeat -325px 0px;
    }
    .wsite-social-youtube:hover {
    background-position: -325px -30px;
    }
    .wsite-social-youtube:active {
    background-position: -325px -60px;
    }
    .wsite-social-plus {
    background: url(social-icons.png) no-repeat -195px 0px;
    }
    .wsite-social-plus:hover {
    background-position: -195px -30px;
    }
    .wsite-social-plus:active {
    background-position: -195px -60px;
    }
    .wsite-social-flickr {
    background: url(social-icons.png) no-repeat -162px 0px;
    }
    .wsite-social-flickr:hover {
    background-position: -162px -30px;
    }
    .wsite-social-flickr:active {
    background-position: -162px -60px;
    }
    .wsite-social-vimeo {
    background: url(social-icons.png) no-repeat -260px 0px;
    }
    .wsite-social-vimeo:hover {
    background-position: -260px -30px;
    }
    .wsite-social-vimeo:active {
    background-position: -260px -60px;
    }
    .wsite-social-yahoo {
    background: url(social-icons.png) no-repeat -292px 0px;
    }
    .wsite-social-yahoo:hover {
    background-position: -292px -30px;
    }
    .wsite-social-yahoo:active {
    background-position: -292px -60px;
    }
    /* Header: Search Box
    --------------------------------------------------------------------------------*/
    .header-right .wsite-search {
    margin-left:10px ;
    vertical-align: middle;
    background:url(search-bg.png) no-repeat top right;
    height:32px;
    width:200px;
    }
    .header-right .wsite-search-input {
    width: 150px;
    border: none;
    margin:3px;
    background: none;
    }
    .header-right .wsite-search-button {
    position: relative;
    right:0;
    margin: 8px;
    background: url(search-icon.png) no-repeat;
    }
    /* Navigation
    --------------------------------------------------------------------------------*/
    #nav-wrap {
    padding:0px 0px 40px;
    }
    #nav-wrap .container {
    clear: both;
    overflow: hidden;
    position: relative;
    }
    #nav-wrap .container ul {
    list-style: none;
    }
    #nav-wrap .container ul li {
    list-style: none;
    float: left;
    background:url(nav-separator.png) no-repeat right center;
    padding-right:6px;
    }
    #nav-wrap .container ul > li:first-child a,
    #nav-wrap .container ul span:first-child li a {
    padding-left:0px;
    }
    #nav-wrap .container ul > li:last-child,
    #nav-wrap .container ul span:last-child li {
    background:none;
    padding:0px;
    }
    #nav-wrap .container ul li a {
    display: block;
    padding: 5px 20px;
    border: 0;
    outline: 0;
    list-style-type: none;
    }
    #nav-wrap .container ul li#active a,
    #nav-wrap .container ul li a:hover {
    border: 0;
    }
    /* Navigation Submenu's
    --------------------------------------------------------------------------------*/
    #wsite-menus .wsite-menu li a {
    border: 0;
    background:none;
    }
    #wsite-menus .wsite-menu li:first-child a:hover {
    border-radius:5px 5px 0 0;
    }
    #wsite-menus .wsite-menu li:last-child a:hover {
    border-radius:0 0 5px 5px;
    }
    #wsite-menus .wsite-menu {
    border:1px solid #aaa;
    border-radius:5px;
    background:url(banner-wrapper.png);
    }
    /* Banner
    --------------------------------------------------------------------------------*/
    #banner-wrap {
    background:url(banner-wrapper.png);
    border-top:1px dashed #ddd;
    border-bottom:1px dashed #ddd;
    }
    /* Page type: Tall header
    --------------------------------------------------------------------------------*/
    .tall-header-page #banner {
    position:relative;
    }
    .tall-header-page .corner-left {
    background:url(banner-tall-bg-left.png) no-repeat top left;
    position:absolute;
    top:0px;
    left:0px;
    width:37px;
    height:348px;
    }
    .tall-header-page .corner-right {
    background:url(banner-tall-bg-right.png) no-repeat top left;
    position:absolute;
    top:0px;
    right:0px;
    width:37px;
    height:348px;
    }
    .tall-header-page .wsite-header {
    width: 960px;
    height: 348px;
    background: url(banner-tall.jpg) no-repeat 0px 0px;
    }
    /* Page type: Short header
    --------------------------------------------------------------------------------*/
    .short-header-page #banner {
    position:relative;
    }
    .short-header-page .corner-left {
    background:url(banner-short-bg-left.png) no-repeat top left;
    position:absolute;
    top:0px;
    left:0px;
    width:9px;
    height:178px;
    }
    .short-header-page .corner-right {
    background:url(banner-short-bg-right.png) no-repeat top left;
    position:absolute;
    top:0px;
    right:0px;
    width:10px;
    height:178px;
    }
    .short-header-page .wsite-header {
    width: 960px;
    height: 178px;
    background: url(banner-short.jpg) no-repeat;
    }

  6. #5
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    You have the correct CSS for displaying the image as a background and repeating it...

    background:url(footer-bg.png) repeat;
    if it's not showing with this code

    1. make sure the image is visible on the site, you should be able to call it directly in the browser by http://yoursite.com/footer-bg.png , if the image displays in the browser, you should be good.

    2. Perhaps your browser cache is keeping it from displaying, sometimes with CSS, some browsers keep a copy of the cache and don't refresh it as often. try deleting your browser cache and see if the image displays as it should.

    if neither of these work..

    try dropping the image and just displaying a color for the page background...

    change:

    body {
    font-family: 'Quattrocento', serif;
    font-size: 16px;
    color: #3e3e3e;
    background:url(footer-bg.png) repeat;
    }

    to:

    body {
    font-family: 'Quattrocento', serif;
    font-size: 16px;
    color: #0000ff;
    }

    that should at least display the background portion of your "BODY" as blue...

    if this doesn't work...

    perhaps a link to the site would be appropriate at that time as something else might be happening.

    I've read in the past that weebly doesn't support JS and some CSS stuff, but this should not be one of those things... only way to tell is see the source code that the server is sending out ( by viewing the source from the actual web page )

  7. #6
    Junior Member
    Join Date
    Jan 2013
    Posts
    7
    Member #
    34478
    ok what you are saying worked. the only problem the page size stretches from corner to corner so you can not see the blue background underneath it im guessing. Every time i change the color/ change the image it still just stays white. I wish to structure it something like this

    http://www.pinkdolphinonline.com/

    only difference is mine would not scroll with the page it would stay static.

    by the way thank you so much for your help so far. you have been absolutely amazing. very very informative.

  8. #7
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    so then it's margins on the "content container" need to be set to push in that container...

    can't see your code though:

    guessing its:

    .container {
    margin: 0 auto;
    width: 960px;
    }

    change to:

    .container {
    margin: 0 50px 0 50px;
    width: auto;
    }

    what that should do it put a 50 pixel padding on both sides and make that container flexible, based on the browser with...

    if you're using a solid image... it wont appear as though the background is scrolling

  9. #8
    Junior Member
    Join Date
    Jan 2013
    Posts
    7
    Member #
    34478
    i did what you said. it kind of shows on only the right side. not only that the banner is glitching. i have no clue whats going on. maybe its the page layout im using. it just wont let me do what i want. any other ideas? if not thanks man. i really want to do to my site like the link i send you above. :/

  10. #9
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    Without the HTML code or link to the actual page, I can only guess at this point... So many different things involved here

  11. #10
    Junior Member
    Join Date
    Jan 2013
    Posts
    7
    Member #
    34478
    how can i send you the html code?


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 05:55 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com