jp19 25


I am working on a quotations site on goodbye quotes. There is an image, the top 80px of which I want to use for some other purpose, and remaining image, I want to set as a full page background image.

I tried setting:

background-position: 0px -80px

but it does not work.

How to properly use css sprite (background position) and full page background image? The current answers do not work for me. Note that what I am sayings is that I want to use "single" image to reduce load time and request made to the server. The common uses of css sprite is to use part of image for normal inline images, but I want to use as full page background.



  • I'm not sure I understand what you're going for. Which image are you referring to, the main background image? Ktash over 5 years ago
  • Ya. So basically, there will be one image. I want the image except the top 80px to be used as "full page" background. I use background-position: -80 px; background-size:cover; but the -80px does not seem to do what I want. jp19 over 5 years ago
  • Still no solution. Had to use different images. Remember one of the programming quotes by Ken Thompson - When in doubt, use brute force. jp19 over 5 years ago

2 answers

jetfoo 0

Note: This works for me I use sprites for everything,

body {

    background-image: url(../img/example.jpg);

    background-position: 0 -80px;

    width: 100%;
    height: 760px;
Answered over 5 years ago by jetfoo

There is no way to do what you are asking for. You can't repeat a section of an image. I thought you might be able to use background-clip, but that only work on a full box, not a clipping a sprite.

Sorry, but unless your sprite is really tall and you want to "repeat-x" on the background, you'll have to use two images.

Answered over 5 years ago by David Leininger