Picture header is not showing

Page 1 of 1

4 Replies - 197 Views - Last Post: 09 October 2012 - 07:51 PM

#1 The_Programmer-  Icon User is offline

  • Death Scythe
  • member icon

Reputation: 23
  • View blog
  • Posts: 561
  • Joined: 24-October 11

Picture header is not showing

Posted 09 October 2012 - 04:45 PM 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" language="Javascript" src="/scripts/html5shiv.js"></script>
<title>kensclark.com - Under Construction</title>
<base target="_blank">
<meta name="description" content="Kenneth Clark's personal webpage.">
<meta name="keywords" content="HTML, PHP, Javascript, Java, Programming, Kenneth, Clark, Personal">
<style type="text/css">
body {background-color:black;}
p.a {color:white;}
</style>
</head>
<body>
<picture alt="Header">
    <source src="/images/header.gif" media="min-width:693px">
</picture>
<p class="a">Under Construction!
Send e-mail to admin@kensclark.com if you need to contact the owner.</p>
<br/>
<br/>
<nav>Home</nav>
<iframe width="420" height="315" src="http://www.youtube-nocookie.com/embed/6daIP-tT2vI" frameborder="0" allowfullscreen></iframe>
</body>
</html>


I think I'm doing it right with HTML5. I know my browser supports it so why isn't it working? I also included a script to make sure it works on IE6 but I'm using Google Chrome.

Is This A Good Question/Topic? 0
  • +

Replies To: Picture header is not showing

#2 Atli  Icon User is online

  • D.I.C Lover
  • member icon

Reputation: 3115
  • View blog
  • Posts: 4,675
  • Joined: 08-June 10

Re: Picture header is not showing

Posted 09 October 2012 - 05:41 PM

I'm pretty sure there is no <picture> element defined in any of the HTML specs, including HTML5. I even Googled it, just to be sure, and found no reference to anywhere. The W3C even has a list of elements, and it's not there. [ref]

Besides that, it really makes no sense. Why would we need another element for images when we have the <img> element?
Was This Post Helpful? 1
  • +
  • -

#3 The_Programmer-  Icon User is offline

  • Death Scythe
  • member icon

Reputation: 23
  • View blog
  • Posts: 561
  • Joined: 24-October 11

Re: Picture header is not showing

Posted 09 October 2012 - 06:41 PM

I just saw it on a tutorial. It said it was a new tag for HTML5. Oh well. Thanks for the help. +rep

Oh, and how would I scale the header image to the browser width? And if I have a background how do I make it not repeat PLUS scale to the browser size?
Was This Post Helpful? 0
  • +
  • -

#4 Atli  Icon User is online

  • D.I.C Lover
  • member icon

Reputation: 3115
  • View blog
  • Posts: 4,675
  • Joined: 08-June 10

Re: Picture header is not showing

Posted 09 October 2012 - 07:09 PM

You can scale an element to fit the browser width by setting the CSS width to 100%. To make a background image scale with the element it's in, you can use the new CSS3 background-size style.

Something like this ought to do it.
#theHeader {
    width: 100%;
    height: 90px;
    background: url(background.jpg) no-repeat;
    background-size: 100% 100%;
}


Note the Browser Compatibility table at the bottom of the MDN page. This will only work in IE9 and above. (As well as all the other browsers, of course.)
Was This Post Helpful? 1
  • +
  • -

#5 The_Programmer-  Icon User is offline

  • Death Scythe
  • member icon

Reputation: 23
  • View blog
  • Posts: 561
  • Joined: 24-October 11

Re: Picture header is not showing

Posted 09 October 2012 - 07:51 PM

I set up a usemap on my header. Now when the image stretches the usemap get's messed up. Is there a way to fix that? Also when the image stretches the words get stretched. Is there a way to scale that so it doesn't do it?
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1