Центрированное изображение с минимальной высотой и 100% шириной

Я хочу создать изображение заголовка, являющегося фоном для части страницы. Эти требования заключаются в следующем:Центрированное изображение с минимальной высотой и 100% шириной

ширина: 100%
мин-высота: 400px
быть ниже строки заголовка
иметь возможность размещать текст и/или наложение поверх него
самое главное, я хочу, чтобы изображение центрируется независимо от размера экрана

Существует бар заголовок выше, где я хочу, чтобы образ, а остальные страницы будут продолжаться ниже изображения. В основном пытается создать изображение в качестве фона для названия страницы.

источник

2015-02-09 THolls30

возможно дубликат [CSS для центрирования изображения по горизонтали] (http://stackoverflow.com/questions/11856150/css-to-center-a-image-horizontally) – Sheepy

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 { 
height: 400px; 
padding: 0; 
background: #1d1e8a url(./images/website_banner.png) no-repeat; 
color: #333;  
background-size: 100% 100%; 
}

источник

2015-02-09 03:04:45

Благодарим вас за ответ, который мне намного ближе. Единственная проблема заключается в том, что у меня есть изображение 1440 x 400 пикселей, и я не хочу ограничивать пропорции изображения, чтобы он растянулся в любом направлении. Я также не хотел бы, чтобы размер меньшего экрана влиял на соотношение сторон изображения. – THolls30

Стандартная практика заключается в том, чтобы сделать серию изображений в соответствии с различными размерами экрана. http://developer.android.com/guide/practices/screens_support.html –

Центрированное изображение с минимальной высотой и 100% шириной

ответ

Смежные вопросы