You could use a mix of css and js:
Code:
<!doctype html>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> </title>
<body style="overflow-x: hidden; font-family: verdana; font-size: 14px">
<div id="picture" style="position: absolute; left: 0; top: 0; background: url(http://www.lempens-design.com/IMG/jpg/france-main-picture.jpg) center no-repeat ; background-size: cover; z-index: -1; "></div>
<div style="position: absolute; left: 0; top: 50%; width: 100%; text-align: center; ">
<span style="position: relative; background: transparent; color: white; padding: 10px; margin: auto; font-family: lucida handwriting; font-size: 50px">B I E N V E N U E</span>
</div>
<div style="position: absolute; top: 100%; width: 95%; text-align: center; ">
<h1>De Paris à Luxembourg</h1>
Né à Paris le 14 février 1977, cela fait maintenant <b>plus de 10</b> ans que je vis de ma passion, le webdesign.<br>
FrickenTrevor, I wouldn't trust this person if I were you.<br>
Right on the first page he makes a rather stupid spelling mistake: je <b>vie</b> de ma passion should be je <b>vis</b> de ma passion.<br>
Doesn't look very professionnel.
</div>
<script>
function resize_it()
{
document.getElementById('picture').style.width=window.innerWidth+'px';
document.getElementById('picture').style.height=window.innerHeight+'px';
}
//resize_it();
window.onload=onresize=resize_it;
</script>
</body>
</html>
Bookmarks