Image with background image not showing

Look at the following JSFiddle

看看下面的JSFiddle

.container {
	width: 100%;
	background-color: yellow;
}

.classic {
	display: block;
	position: relative;
	margin-left: auto;
	margin-right: auto;
	background-position: center center;
	background-image: url("http://www.pulsarwallpapers.com/data/media/3/Alien%20Ink%202560X1600%20Abstract%20Background.jpg");
	background-size: contain;
	background-repeat: no-repeat;
}

.classic-img {
	display: block;
	position: absolute;
	overflow: hidden;
	width: 100%;
	height: 100%;
	top: 0%;
	left: 0%;
}

.classic-img img {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}

.top-menu {
	width: 100%;
	height: 50px;
	position: relative;
	background-color: red;
}

.top-menu-buttons {
	position: absolute;
	margin-left: auto;
	margin-right: auto;
	bottom: 0;
	left: 0;
	right: 0;
	width: 50%;
	text-align: center;
}

.top-menu-buttons .button {
	display: inline-block;
	vertical-align: middle;
	font-size: 25px;
	color: white;
}

.top-menu-buttons span {
	display: inline-block;
	vertical-align: middle;
	font-size: 25px;
	color: white;
}

.bottom-menu {
	width: 100%;
	height: 50px;
	position: relative;
	background-color: green;
}

.bottom-menu-buttons {
	position: absolute;
	margin-left: auto;
	margin-right: auto;
	bottom: 0;
	left: 0;
	right: 0;
	width: 80%;
	text-align: center;
}

.bottom-menu-buttons .button {
	display: inline-block;
	vertical-align: middle;
	font-size: 35px;
	color: white;
	padding-left: 10px;
	padding-right: 10px;
}

<div class="list"> 
	<a class="item">
		<div id="container" class="container">

			<div class="top-menu">
				<div class="top-menu-buttons">
					<button>-</button>
					<span>20</span>
					<button>+</button>
				</div>
		   </div>


		   <div id="classic" class="classic">
			   <div id="classic-img" class="classic-img">
				   <img src="http://bc03.rp-online.de/polopoly_fs/1.4643662.1415087612!httpImage/2100575733.JPG_gen/derivatives/d540x303/2100575733.JPG" />
			   </div>
		   </div>
			

		   <div class="bottom-menu">
			   <div class="bottom-menu-buttons">
			   <button class="button button-icon ion-eye">1</button>
			   <button class="button button-icon ion-refresh">2</button>
			   <button class="button button-icon ion-crop">3</button>
			   <button class="button button-icon ion-android-options">4</button>
			   <button class="button button-icon ion-social-tumblr">5</button>
		   </div>
	   </div>
	</a>

</div>

CSS:

What i want to achieve is something like the following:

我想要达到的目标如下:

The red area should be a top menu. It should not be a fixed top position it should just always be on top of the image.

红色区域应该是*菜单。它不应该是固定的顶部位置,它应该始终位于图像的顶部。

As you can see the image has a white background and a black forground. It should look like a polaroid.

如您所见,图像具有白色背景和黑色地面。它应该看起来像宝丽来。

The green area should be a menu at the bottom but also not fixed to the bottom it should just always be underneath the image. If there is not enough space it should simply scroll not clinch or esize any of the divs. I guess the main problem is the div in the middle where the image with the background image is.

绿色区域应该是底部的菜单,但也不是固定在底部,它应该始终位于图像下方。如果没有足够的空间,它应该只是滚动而不是铆接或esize任何div。我猜主要的问题是中间的div,其中带有背景图像的图像是。

I try for ages now to get the correct css but unfortunately im very unexperienced and all i can do at the moment is try and error but i cant get it working.

我现在尝试获得正确的css但不幸的是我非常缺乏经验,我现在所能做的只是尝试和错误,但我不能让它工作。

3 个解决方案

#1

remove position: absolute from .classic-img and .classic-img img

从.classic-img和.classic-img img中删除position:absolute

add margin: 100px auto; adjust 100px as per your need, also you have set background-size: contain and the aspect ratio of bg image is almost equal to the image, therefore you would see only small portion of bg image here in the fiddle - jsfiddle.net/18vg13dt/3

添加保证金:100px auto;根据你的需要调整100px,你也设置了背景大小:包含和bg图像的宽高比几乎等于图像,因此你只会在小提琴中看到bg图像的一小部分 - jsfiddle.net/18vg13dt / 3

additionally if you want gap from left and right also the use - margin: 100px 50px; similarly according to your needs.

另外如果你想要左右差距也使用 - 保证金:100px 50px;同样根据你的需要。

jsfiddle

#2

I guess this is what you want?

我想这就是你想要的?

.classic {
    background: url("http://www.pulsarwallpapers.com/data/media/3/Alien%20Ink%202560X1600%20Abstract%20Background.jpg")no-repeat center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.classic-img {
    padding: 10px;
    box-sizing: border-box;
}

.classic-img img {
    display:block;
    width:100%;
    height:100%;
}

#3

You need to set the height for the class .classic-img

您需要为类.classic-img设置高度

Try this :

试试这个 :

.classic-img {
display: block;
position: relative; /*---absolute to relative*/
overflow: hidden;
width: 100%;
height: 100px; /*----Adjust the height---*/
top: 0%;
left: 0%;
}

If you still face the issue, do come back and let us know.

如果您仍然遇到问题,请回来告诉我们。

#1