Header doesn't work with background img
Question
I'm about to redesign my site. In the Body css I've put the background-img. Then I've made a div class="header" for the header, of course.
But when I publish the page the header don't show up. I've tried on several browsers and computers but nothing to see. Then I tried on my phone. On the phone It works only in portrait-mode, but not in landscape like on a desktop. On the iPad's the same.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Home</title>
<style type="text/css">
* {padding: 0; margin: 0;}
body {background: url(http://farm4.staticflickr.com/3785/9603354598_e7a32b5505_o.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
.header {margin-top: 50px; width: 1400px; position:fixed; height: 70px; background-color:rgba(0,0,0,0.5); /* Fallback for web browsers that doesn't support RGBa */ background: rgb(0, 0, 0) transparent; /* RGBa with 0.6 opacity */ background: rgba(0, 0, 0, 0.6); /* For IE 5.5 - 7*/ filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000); /* For IE 8*/ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)"; color: white; margin-top: 80%; }
.titles {opacity: 1; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 300;}
.title {margin-top: 10px; margin-left: 2%; font-size: 40px; font-family: Futura, "Trebuchet MS", Arial, sans-serif;}
.subtitle {margin-top: -12px; margin-left: 130px; font-size: 10px; font-family: Futura, "Trebuchet MS", Arial, sans-serif;}
</style>
</head>
<body>
<div class="header">
<div class="titles" align="left">
<div class="title">TITLE</div>
<div class="subtitle">subtitle</div>
</div>
</div>
</body>
</html>
Any idea where the problem is ? In my code application,the page work perfectly.
Thanks !
1 answers
solution1
0 ACCPTED 2014-02-22 14:34:36
Please remove your margin top in your header css. I commented this in example below. Please ignore my red border, just used it as "debug".
Check my DEMO
.header {
margin-top: 50px;
width: 1400px;
position:fixed;
height: 70px;
background-color:rgba(0,0,0,0.5);
/* Fallback for web browsers that doesn't support RGBa */
background: rgb(0, 0, 0) transparent;
/* RGBa with 0.6 opacity */
background: rgba(0, 0, 0, 0.6);
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
color: white;
/* margin-top: 80%;*/
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.