最小高度和100％宽度的居中图像

Question

I want to create a header image that is the background for part of the page. 我想创建一个标题图像，该图像是页面部分的背景。 The requirements are as follows: 要求如下：

width: 100% 宽度：100％
min-height: 400px 最低高度：400像素
be below the header bar 在标题栏下方
be able to place text and/or an overlay on top of it 能够在其上放置文本和/或覆盖
most importantly I want the image to be centered no matter the screen-size 最重要的是，无论屏幕大小，我都希望图像居中

There is a header bar above where I want the image and the rest of the page will proceed below the image. 我想要图像的上方有一个标题栏，其余页面将在图像下方继续。 Basically trying to create the image as a background for the title of the page. 基本上是尝试将图像创建为页面标题的背景。

Answer 1

HTML for your pages: 页面的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>

And then in the .css file, you describe id-"banner": 然后在.css文件中，描述id-“横幅”：

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

最小高度和100％宽度的居中图像

问题描述

1 个解决方案

解决方案1
0 2015-02-09 03:04:45

最小高度和100％宽度的居中图像

问题描述

1 个解决方案

解决方案1 0 2015-02-09 03:04:45

解决方案1
0 2015-02-09 03:04:45