SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Using a jpg image for a banner background

    div#banner
    {
    background-image: url(topborder.jpg);
    background-repeat: repeat-y;
    }

    div#banner h1
    {
    margin: 0;
    padding: .3em 0 .3em .5em;
    font-size: 2.2em;
    font-weight: normal;
    }

    The image does not show up in the banner. Any ideas??

  2. #2
    Barefoot on the Moon! silver trophy Force Flow's Avatar
    Join Date
    Jul 2003
    Location
    Northeastern USA
    Posts
    4,606
    Mentioned
    56 Post(s)
    Tagged
    1 Thread(s)
    Is the image located in the same directory as the CSS code is?
    Visit The Blog | Follow On Twitter
    301tool 1.1.5 - URL redirector & shortener (PHP/MySQL)
    Can be hosted on and utilize your own domain

  3. #3
    SitePoint Enthusiast
    Join Date
    Jun 2003
    Location
    Melbourne, Australia
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Antoine_Layton View Post
    div#banner
    {
    background-image: url(topborder.jpg);
    background-repeat: repeat-y;
    }

    div#banner h1
    {
    margin: 0;
    padding: .3em 0 .3em .5em;
    font-size: 2.2em;
    font-weight: normal;
    }

    The image does not show up in the banner. Any ideas??
    The path to the image must be relative to where this CSS sits - or an absolute path

    Also, it will only ever be as big as the content within that H1 tag as you havent specified a height or width on that DIV

  4. #4
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is the image located in the same directory as the CSS code is?
    Yep

  5. #5
    SitePoint Guru downtroden's Avatar
    Join Date
    Dec 2004
    Location
    illinois
    Posts
    974
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    are you doing this locally or on a live server?

    There could be issues with the permissions on the image.
    What are the dimensions of the banner? Is the background image just not showing up or is it not showing up because the banner div isn't large enough?
    your brain reacts in the same way whether you are
    looking at something or thinking about it...

  6. #6
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    are you doing this locally or on a live server?
    locally

    Below is the complete the comple code for my style.css

    body
    {
    margin: 0;
    padding: 0;
    font-size: 95%;
    font-family: georgia, times, "times new roman", serif;
    color: #000;
    background-color: #fff;
    }

    a:link { color: #036; }
    a:visited { color: #066; }

    a:hover, a:active
    {
    color: #fff;
    background-color: #036;
    }

    div#banner
    {
    background-image: url(topborder.jpg);
    background-repeat: repeat-y;
    }

    div#banner h1
    {
    margin: 0;
    padding: .3em 0 .3em .5em;
    font-size: 2.2em;
    font-weight: normal;
    }

    div#container
    {
    background-image: url(nav_col_base.jpg);
    background-repeat: repeat-y;
    }

    div#container2
    {
    background-image: url(more_col_base.jpg);
    background-repeat: repeat-y;
    background-position: right;
    }

    div#navigation
    {
    float: left;
    width: 150px;
    padding-top: 2em;
    }

    div#navigation ul
    {
    list-style-type: none;
    padding: 0;
    margin: 0;
    }

    div#navigation ul li { margin-top: 4px; }

    #navigation ul li a
    {
    display: block;
    width: 135px;
    padding: 3px 5px 3px 10px;
    text-decoration: none;
    color: #000;
    background-image: url(nav_base.jpg);
    background-repeat: repeat-y;
    }

    #navigation ul li a:hover
    {
    color: #fff;
    background-color: #ccc;
    background-image: url(nav_base2.jpg);
    background-repeat: repeat-y;
    }

    div#more
    {
    float: right;
    width: 160px;
    margin: 0;
    padding: 2em 10px 0 0;
    color: #fff;
    }

    div#more h3
    {
    margin-top: 0;
    color: #fff;
    padding: .2em;
    background-image: url(more_base.jpg);
    background-position: right;
    background-repeat: repeat-y;
    }

    div#content
    {
    margin-left: 190px;
    margin-right: 200px;
    }

    div#content h2
    {
    font-size: 2em;
    color: #036;
    margin: 0;
    padding-top: 1em;
    font-weight: normal;
    }

    div#content { line-height: 150%; }

    #cleardiv
    {
    clear: both;
    height: 1em;
    }

    div#footer
    {
    clear: both;
    padding: .5em 1em;
    border-top: 1px solid #999;
    text-align: right;
    }

    div#footer ul
    {
    padding: 0;
    margin: 0;
    list-style-type: none;
    }

    div#footer li
    {
    display: inline;
    margin-right: 1em;
    }

  7. #7
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    topborder.jpg is 500x83


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
  •