0

I want to create a header image that is the background for part of the page. The requirements are as follows:

  • width: 100%
  • min-height: 400px
  • 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.

THolls30
  • 1
  • 1
  • possible duplicate of [css to center a image horizontally](http://stackoverflow.com/questions/11856150/css-to-center-a-image-horizontally) – Sheepy Feb 09 '15 at 02:40

1 Answers1

0

HTML for your pages:

<!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":

#banner {
height: 400px;
padding: 0;
background: #1d1e8a url(./images/website_banner.png) no-repeat;
color: #333;    
background-size: 100% 100%;
}
Reenactor Rob
  • 1,508
  • 1
  • 11
  • 20
  • Thank you for your response this has gotten me a lot closer. The only problem is that i have a 1440 x 400px image and I don't want to constrain the proportions of the image to make it stretched in any direction. I also would not like smaller screen sized to affect the aspect ratio of the image either. – THolls30 Feb 12 '15 at 04:19
  • Standard practice is to make a series of images to fit the various screen sizes. http://developer.android.com/guide/practices/screens_support.html – Reenactor Rob Feb 12 '15 at 06:05