background-image on divs aren't showing; the divs are collapsing instead

Question

CSS:

body {
  background: url(\"ninabg.jpg\") left top no-repeat;
  background-size: 100% auto;
}

.image {
    background-repeat:no-repeat;
    background-image         


        

Answer 1

When you say you "can't use div inside of a" is that because of a real limitation or just something you read? HTML4 and earlier did not allow anchors to wrap block-level elements like <div>, but as of HTML5 (which you are using, based on your DOCTYPE), anchor elements (<a>) are allowed to wrap most other elements.

If you truly can't use an anchor element, you can use JavaScript to handle click events on the div instead. (This is not recommended for accessibility reasons, but it should work.)

// With jQuery
jQuery('.slo').click(function () {
  window.location = 'new-url';
});

// Without jQuery
document.querySelector('.slo').attachEventListener('click', function () {
  window.location = 'new-url';
}, false);

Answer 2

The images are not working because .slo and .eng have no height or content so they, and their background-images, do not appear. Give them both a height:

.slo {
    background-repeat:no-repeat;
    background-image:url("slo.png");
    position:absolute;
    width:5%;
    bottom:10%;
    right:21%;
    height:200px;
    display:block
}

.eng {
    background-repeat:no-repeat;
    background-image: url("eng.png");
    position:absolute;
    width:5%;
    right:12%;
    bottom:10%;
    height:200px;
    display:block;
}

And for your second problem, you can just use an <a> element instead of a <div>:

<a href="#" class="eng"></a>
<a href="#" class="slo"></a>

Or use a <img> element to display the images.

JSFiddle Demo

Answer 3

Ok, here it is,

instead of wrapping divs or spans in anchor for image links use just anchors e.g.

<a href="#" class="eng"></a>
<a href="#" class="slo"></a>

---

if you using element with background image you must set both width & height and display property to block or inline-block if element is not by default block or inline block level element.

.slo,
.eng {
  background-repeat:no-repeat;
  position:absolute;
  display: block;
  width:5%;
  height:2%; /* You forgot to set height */
  bottom:10%;
}
.slo {
  background-image:url("slo.png");
  right:21%;
}
.eng {
  background-image:url("eng.png");
  right:12%;
}