www.webdeveloper.com
Results 1 to 5 of 5

Thread: Background-image

  1. #1
    Join Date
    Jun 2012
    Posts
    13

    Background-image

    Hi I had some issues getting the background-image to display. I tested different browsers to see if that was the problem, but no difference. I've done this so many times before, but now it just won't work. I even tried to do a test file to see if I could figure. I would appreciate help

    - html

    <div class="menu-1"></div>

    - css

    .menu-1{
    display: block;
    width: 21px;
    height: 21px;
    background-image: url('images/screen/menu-1.jpg');
    }

  2. #2
    Join Date
    Jun 2012
    Posts
    13
    I might add that the image appears when I add it as a <img> so the path is right.

  3. #3
    Join Date
    Mar 2011
    Posts
    1,109
    Keep in mind that stylesheets determine relative URL paths based on the location of the stylesheet. So if you're using an external stylesheet, the same URL that worked for an <img> tag will not work if that stylesheet resides in a different directory than the referring HTML document.
    Rick Trethewey
    Rainbo Design

  4. #4
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,198
    A div element is already a block level element:
    Code:
    .menu-1 {
    width: 21px;
    height: 21px;
    background: url('images/screen/menu-1.jpg') no-repeat center scroll;
    }
    Really do need to use a class unless the image is to be used as a background image again on same page. I take it that the image is a 21 by 21 pixel image and not to be tiled?
    Last edited by Major Payne; 06-15-2012 at 02:31 AM.

  5. #5
    Join Date
    Jun 2012
    Posts
    13
    rtrethewey - That was the problem, I assumed that I would just use the same path. But that is so obvious right now. Thank you, your a madman :P

    Major_Payne - It's going to be reused, it's one of them long one-page websites.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles