CSS - Select area of an image and display

Question

CSS - Select area of an image and display

2.5k views Asked by Henrik Varga At 15 September 2024 at 16:46

I need help creating images for my navigation menu. I saw a site that has only one image that includes lots of small images and I guess the site recognises which to use and where and when.

For example: show image

How can I select the home button, the settings button, and the star button and use them separately?

Thanks

Original Q&A

There are 1 answers

**Simon** · Accepted Answer · 2014-11-15 23:48:21

This is not a PHP related question. Actually, it's about CSS. As mentioned above, the concept you're looking for is called 'Sprite'. Here is an example based on the link you provided:

<!DOCTYPE html>
<html>
<head>
<style>
#home {
    width: 45px;
    height: 45px;
    background: url(http://kepfeltoltes.hu/141116/4example_www.kepfeltoltes.hu_.jpg) 0 0;
}

#next {
    width: 45px;
    height: 45px;
    background: url(http://kepfeltoltes.hu/141116/4example_www.kepfeltoltes.hu_.jpg) -115px 0;
}
</style>
</head>
<body>

<img id="home" src=""><br><br>
<img id="next" src="">

</body>
</html>

TechQA.

CSS - Select area of an image and display

There are 1 answers

Related Questions in CSS

Related Questions in CSS-SPRITES

Popular Questions

Popular Tags

Trending Questions