SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2008
    Location
    Santa Barbara, CA
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    background image display issue

    Why does the image not fill the viewport when I make it a background image using css? I get a display like this http://www.sbmusclecars.com/index2.php.

    here is the css that I wrote

    .header {
    width: 100%;
    height: 185px;
    background-image: url('http://www.sbmusclecars.com/images/upperheader.gif');
    background-repeat: no-repeat;
    margin: 0px 0px 10px;
    }

    But when I use code like this
    <a href="/index.php">
    <img src="images/upperheader.gif" width="100%" alt="" />
    </a>
    it displays as I want as shown here www.sbmusclecars.com/index.php

    If you need more information please let me know and thanks in advance for the assistance.

  2. #2
    Non-Member algozone's Avatar
    Join Date
    Jul 2006
    Location
    Hackensack, NJ
    Posts
    119
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I do not see a difference. Do not know if you fixed it.

    You have this background-repeat: no-repeat;
    It will not fill.
    Use:
    background-repeat: repeat-x;
    or remove it to fill full screen.

  3. #3
    SitePoint Member
    Join Date
    Aug 2005
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Added repeat-x after the background image so that the image repeats across the X axis (horizontally).

    Give this a try and see if it works for you.


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
  •