SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2009
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Background Image Doesn't Repeat

    In the atached CSS, I'm trying to get the fading image to fo all the way to the left side of the header div. It only goes about halfway.

    How do you code the background-repeat code to make it go the whole width of the header div?

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    background-repeat:repeat;
    No attached code tho.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    In the atached CSS

    How do you code the background-repeat code to make it go the whole width of the header div?
    Hi,
    I don't see any attached css but you would simply set repeat-x on the image.

    something like this -

    Code:
    #header {
    background: url(images/header.jpg) repeat-x;
    height: image height here;
    }

  4. #4
    SitePoint Enthusiast
    Join Date
    Jul 2009
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for thereply. This has to be the best forum on the internet! I failed to put the code in the previous post. I was interrupted and screwed up.

    I can't get background to extend the length of the header - it only goes half way. I'd like to have the fading background cover the whole length of the header. Here's the code:

    #container {
    width: 98%;
    margin: 0 auto;
    padding: 10px;
    }


    #header {
    font-family: Arial, Helvetica, sans-serif;
    font-style: italic;
    text-align: center;
    font-size: x-large;
    color:white;
    background-color:#99CCFF;
    height: 70px;
    width: 99%;
    margin-right: 6px;
    background-image:url(images/tagline-fade.jpg;
    background-repeat:repeat-x;

    }


    body {

    width: 100%;
    background-image:url(images/sky_picture.jpg);
    background-repeat: repeat-x;
    }

    #navigation {
    background-color: #999999;
    line-height: 60px;
    width: 15%;
    float: left;
    font-size: large;
    color: white;

    }

    #navigation ul {
    list-style: none;
    margin-left: 20px;
    margin-top:20px;
    }

    #content {
    width: 83%;
    float: left;
    margin-right: 4px;
    padding-left: 6px;
    padding-top: 4px;
    padding-right: 4px;
    font-family: Arial, Helvetica, sans-serif;
    background-color: #FFFFCC;
    }

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    Hi, it looks like you made a small error
    Code:
    #header {
    font-family: Arial, Helvetica, sans-serif;
    font-style: italic;
    text-align: center;
    font-size: x-large;
    color:white;
    background-color:#99CCFF;
    height: 70px;
    width: 99%;
    margin-right: 6px;
    background-image:url(images/tagline-fade.jpg;
    background-repeat:repeat-x; 
    
    }
    You don't end the ) before the semi colon.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •