Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!doctype html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>HTML5</title>
- <style>
- header {
- width:100%;
- height:300px;
- background-image:url(images/main.jpg);
- background-position: center;
- }
- nav {
- width:100%;
- height: 50px;
- background-color:rgb(0,0,0);
- }
- nav a {
- padding:0 10px;
- height:50px;
- color:white;
- font-size: 1.7em;
- line-height:50px;
- display:inline-block;
- text-decoration:none;
- }
- nav a:hover {
- background-color:#f00;
- }
- body { margin:0; }
- .wrap {
- width:1000px;
- margin:0 auto;
- }
- @media screen and (max-width: 1000px) {
- .wrap { width: 100%; }
- header { background-size:cover; }
- }
- @media screen and (max-width: 768px) {
- header { height:200px; }
- }
- @media screen and (max-width: 320px) {
- header { height:100px; }
- }
- </style>
- </head>
- <body>
- <div class="wrap">
- <header id="hdr"></header>
- <nav>
- <a href="#" onmouseover="bg('food')">HOME</a>
- <a href="#" onmouseover="bg('cats')">JavaScript</a>
- <a href="#" onmouseover="bg('sports')">CSS</a>
- <a href="#" onmouseover="bg('transport')">PHP&MySql</a>
- </nav>
- </div>
- <script>
- function bg(c) {
- var src = "images/" + c + ".jpg";
- var h = document.getElementById("hdr");
- var url = "url(" + src + ")";
- h.style.backgroundImage = url;
- }
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement