SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2004
    Location
    Caracas
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS and background images

    Hello:
    I have a small site 'www.produccionescollage.com' and I use CSS to style pages. But the background images on div.top don't show when uploaded to the web host, although I see them locally. Instead of the images is the body background color. The file structure is the same locally and at the web host.
    Here is the code for the div.top.

    div.top {
    position: absolute;
    top: 60px;
    color: #ffffff;
    background-color: transparent;
    background-image: url(../images/top/qSomos.gif);
    background-repeat: no-repeat;
    font-family: Arial, Helvetica, sans-serif;
    height: 150px;
    width: 650px;
    z-index: 1;
    visibility: visible;
    }
    And on each page I have this:

    <link href="../CSS/qSomos.css" rel="stylesheet" type="text/css" />

    The file structure on the server is:
    Fólder CSS>qSomos.css
    Fólder images>top>qSomos.gif


    Thanks,

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    HI,

    This is the absolute address of your image according to your path details.

    http://www.produccionescollage.com/i...top/qSomos.gif

    However there doesn't seem to be anything there? If the image was there you could click the link and see it.

    Whereas this image shows up fine:

    http://www.produccionescollage.com/i...1_mercados.gif

    Check your image is in the correct folder .

    Paul

  3. #3
    SitePoint Enthusiast intheory's Avatar
    Join Date
    Jun 2004
    Location
    Overland Park, KS
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I wasn't sure if I should create a new thread for my question, as it is related to background-image and css positioning...so I'll try to piggyback this thread.

    What I want to do is use an image as a bullet for a paragraph without creating a UL. Here's what I've got:
    Code:
    p.journal {
    	background: transparent url(icon_journal.gif) no-repeat;
    	height: 30px;
    	padding: 0px 0 0 35px;
    	}
    And then in the HTML:

    Code:
    p class="journal">To test your understanding of the concepts presented in
        this topic, take the <strong>Practice</strong> quiz now.</p>
    But I'd like the P to align with the image as if I were using align: absmiddle; in the CSS...but apparently that doesn't work. Is there anyway to do this, other than using a UL? I'd really like to avoid that. Thanks in advance...

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You can align the image with the background position property.
    background: transparent url(icon_journal.gif) no-repeat left center;
    That should center the image vertically to the height of the specified element. You can use px or percentage as well. 0 0 is equivalent to left top and 100% 100% is equivalent to right bottom.

    Hope that help.s

    Paul


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
  •