CSS背景图像比例以适合屏幕高度

Question

I'm trying to add two images as a background of the page. 我正在尝试添加两个图像作为页面背景。 The first background is fine and fits to the screen width & height but the second one is not scaling to fit the screen height. 第一个背景很好，适合屏幕宽度和高度，但第二个背景却不能缩放以适合屏幕高度。 Kindly help me with this. 请帮助我。 Its CSS code is given below. 其CSS代码如下。

body
{
margin:0;
padding:0;  
background-image:url('../images/bgs/bg.jpg');
background-repeat:no-repeat;
background-attachment:fixed;
margin: 0;
background-size:contain;
padding: 0;
height: 100%;
width: 100%;
position:relative;
bottom:0px;
top:0px;
margin-top:0px;
margin-bottom:0px;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
max-height:100%;
max-width:100%;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/bgs/bg.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/bgs/bg.jpg', sizingMethod='scale')";
font-family:Trebuchet MS, Arial, 'Helvetica', sans-serif;
font-size:1em;
}

.taste
{
background-image:url('../images/bgs/bg2.jpg');
background-repeat:no-repeat;
background-attachment:fixed;
margin: 0;
background-size:contain;
padding: 0;
height: 100%;
width: 100%;
position:relative;
bottom:0px;
top:0px;
margin-top:0px;
margin-bottom:0px;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
max-height:100%;
max-width:100%;
background-position:center;
}

And the relevant HTML is here 和相关的HTML在这里

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
<meta name="keywords" content="" />
<meta name="author" content="Aamir Ali Bangash | ATOM Digital" />
<meta name="description" content="" />
<title>Sweet!</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery-scrolltofixed.js" type="text/javascript"></script>
<script src="js/smooth-scroll.js"></script>
<script>
$(document).ready(function() {
// Dock the header to the top of the window when scrolled past the banner.
// This is the default behavior.        
$('.header').scrollToFixed();
});
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
</script>
</head>

<body>
<div class="banner">
<div class="main" align="center"><a href="main.html"><img src="images/logo1.png" style="display:block;" border="0"></a></div>
</div>
<div class="header">
<div class="main"><span class="title">
<ul class="nav">
<li><a href="main.html" class="scroll" data-speed="2000" data-easing="easeInOutCubic">THE SWEET! TASTE</a></li>
<li> | </li>
<li><a href="#shaka" class="scroll" data-speed="2000" data-easing="easeInOutCubic">THE SWEET! SHAKA</a></li>
<li> | </li>
<li><a href="#match" class="scroll" data-speed="2000" data-easing="easeInOutCubic">THE SWEET! MATCH</a></li>
<li> | </li>
<li><a href="#hub" class="scroll" data-speed="2000" data-easing="easeInOutCubic">THE SWEET! HUB</a></li>
</ul>
</span>
</div>
</div>
<div class="taste" id="taste">
<div class="taste-div">
Everyone is loving the sweet taste, easy drinking wines packed with flavour, fruitiness and fun.</td>
<p><h3>sweet! White 75cl</h3>
<strong>Description!</strong> Sweet peach and apricot fruit flavours with a hint of lychee and tangy citrus. Ripe, fruity and very refreshing. <br />
<strong>Origin!</strong> Western Cape, South Africa<br />
<strong>Grape variety!</strong> Blend of Chenin Blanc, Semillon and Muscat d’Alexandrie<br />
<strong>Alcohol!</strong> 12% by volume</p>
<p>
<h3>sweet! Red 75cl</h3>
<strong>Description!</strong> Sweet red and black berry flavours with a hint of tropical fruit and mocha spice. Smooth, easy-drinking and moreish. 
Origin! Western Cape, South Africa<br />
<strong>Grape variety!</strong> Blend of Merlot, Pinotage and Muscat d’Alexandrie<br />
<strong>Alcohol!</strong> 13.5% by volume</p>
</div>
<div style="text-align:center;padding-bottom:10px;"><a href="#shaka">
<img src="images/lb/bottom.png" border="0" /></a></div>
</div>
</div>

Body Background is fine but I need to scale the taste background to fit all of the screen's height. 身体背景还不错，但我需要调整味觉背景以适合屏幕的所有高度。

Thanks 谢谢

Answer 1

try 尝试

.taste {
    min-height: 100%;
    min-width: 100%;
}

CSS背景图像比例以适合屏幕高度

问题描述

1 个解决方案

解决方案1
1 已采纳 2014-01-01 10:03:57

CSS背景图像比例以适合屏幕高度

问题描述

1 个解决方案

解决方案1 1 已采纳 2014-01-01 10:03:57

解决方案1
1 已采纳 2014-01-01 10:03:57