Search code examples
htmlcssimagebackgroundbackground-image

Linking to background images

I wanted each small image I put over the main background to be linkable. The problem is that they are also referred as backgrounds in the code (don't know how to do it other way). Is there a way to make each one of them clickable with a different link inside? Thanks in advance.

    body,
    html {
     height: 100%;
     margin: 0;
    }

    body {
     background-image: url("https://78.media.tumblr.com/c00202bad8ae39931e34a7efa861d18b/tumblr_p70bjja6xI1x5vw3ao1_500.png"),
     url("https://78.media.tumblr.com/c00202bad8ae39931e34a7efa861d18b/tumblr_p70bjja6xI1x5vw3ao1_500.png"), 
    url("https://78.media.tumblr.com/c00202bad8ae39931e34a7efa861d18b/tumblr_p70bjja6xI1x5vw3ao1_500.png"), 
    url("https://d2v9y0dukr6mq2.cloudfront.net/video/thumbnail/yI9FRzo/vertical-pan-of-red-lentils-on-white-background-2-this-video-was-shoot-using-custom-light-set-up-with-additional-custom-build-underneath-light-system-to-eliminate-shadows_nkcfxbgmx__F0000.png");
      height: 15%, 10%, 20%, 20%;
      background-position: 397px 30%, 540px 17%, 683px 30%, 0px 0px;
      background-repeat: no-repeat;
      background-size: 5%, 5%, 5%,cover;
    }

Solution

  • You can add the small images as elements by adding them into the body tag as 

    <body>
    <div id="smallimg1" class="smallimg">
        <a href="yourlinkhere" target="_blank">
            <img src="linktoimghere.jpg" alt="" />
        </a>
    </div>
</body>

    If you really want them to be backgroundimages instead of img, then add them as the background of your div and add the backgroundimage, as well as a height and width via css.