中心图像,最小高度和100%宽度

时间:2015-02-09 02:35:19

标签: html css image responsive-design

我想创建一个标题图片,它是页面部分的背景。要求如下:

  • 宽度:100%
  • min-height:400px
  • 位于标题栏下方
  • 能够在其上放置文字和/或叠加层
  • 最重要的是,无论屏幕尺寸
  • ,我都希望图像居中

在我想要图像的位置上方有一个标题栏,页面的其余部分将在图像下方继续。基本上尝试将图像创建为页面标题的背景。

1 个答案:

答案 0 :(得分:0)

您网页的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>

<title>WebSite</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<link href="style.css" rel="stylesheet" type="text/css" />

</head>
<body>
<div id="banner">Text floating over image goes here</div>

然后在.css文件中,您描述了id-“banner”:

#banner {
height: 400px;
padding: 0;
background: #1d1e8a url(./images/website_banner.png) no-repeat;
color: #333;    
background-size: 100% 100%;
}