Results 1 to 3 of 3

Thread: css background image

Hybrid View

  1. #1
    Join Date
    Feb 2011

    css background image


    I am building website in wordpress.

    I am customizing it, however when I try to check some of the image in order to replace them I could not find them.

    Well I see them in the browser, but when I use the google chrome inspect element, I don't see any image.
    This is the website:

    I am talking about the six white squares, they have background around them, but when I inspect this I find no image tag.

    I try to check their css file and I find the following line:

    #slider-nav li a, #slider-nav li a:visited { display: block; width: 145px; height: 85px; background: url(images/backgrounds/periodic-sprite-02.png) no-repeat 0 -242px; padding: 30px 0 0 15px; }
    #slider-nav li a:hover, #slider-nav li a:active, #slider-nav li.activeSlide a { background-position: 0 -77px; }

    When I check the file periodic-sprite-02.png:

    But this file show me a lot of images that I don't see at all.
    instead in the website I see a gray square around the white square?

    I want to replace the gray square with something else, But I don't think that editing the file will solve my problem.

    What exactly is the image file that is used there?

    This is my main question.

  2. #2
    Join Date
    Mar 2011
    The page is using a method called a CSS Sprite to produce the background. Sprites let you use a single image file for the background on multiple elements by using background position controls. By putting many background images in a single file this way, it speeds up the page loading because there is only one file called from the server and the single file is sometimes smaller than the individual files would have required.
    Rick Trethewey
    Rainbo Design

  3. #3
    Join Date
    Feb 2011

    Thanks I am studding the subject.

Thread Information

Users Browsing this Thread

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

Tags for this Thread

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