{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 来，给爷笑一个 的问题《background-image on divs aren't showing; the d》','https://www.manongdao.com/q-442694.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
CSS:
body {
background: url("ninabg.jpg") left top no-repeat;
background-size: 100% auto;
}
.image {
background-repeat:no-repeat;
background-image:url("logo2fix.png");
position:absolute;
right:1%;
bottom:3%;
height:40%;
width:35%;
}
.slo {
background-repeat:no-repeat;
background-image:url("slo.png");
position:absolute;
width:5%;
bottom:10%;
right:21%;
}
.eng {
background-repeat:no-repeat;
background-image: url("eng.png");
position:absolute;
width:5%;
right:12%;
bottom:10%;
}
HTML:
<!DOCTYPE HTML>
<html>
<head>
<!-- META -->
<title>Nina Rakovec</title>
<meta name="description" content="Profesionalna igralka" />
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="shortcut icon" href="/favicon.ico" />
</head>
<body>
<div class="image"></div>
<div class="eng"></div>
<div class="slo"></div>
</body>
</html>
My website shows the background and only the <div class="image"></div>, why aren't the other two <div class="eng"></div> and <div class="slo"></div> showing up on my website?
I am clueless and have no idea how to fix this, please help me.. also another question, I would like to use the eng and slo on my website as two pictures which are links if you click on them. But I can't use div inside of a, how would I do that?
The images are not working because
.sloand.enghave no height or content so they, and their background-images, do not appear. Give them both a height:And for your second problem, you can just use an
<a>element instead of a<div>:Or use a
<img>element to display the images.JSFiddle Demo
Ok, here it is,
instead of wrapping divs or spans in anchor for image links use just anchors e.g.
if you using element with background image you must set both
width&heightanddisplayproperty toblockorinline-blockif element is not by default block or inline block level element.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.)