Page loading problem
i'm designing simple landing page when tested in stage, noticed couple of problems, ive tried solve but
can't figure out issue is.
first issue, shadow box behind text, displays bigger should when refresh browser , after goes right size.it loses opacity
second issue, when load page, first white screen appears before background image appears, landing page going have full size image
which responsive different screen sizes, going single page website scroll down. dont think can put image body tag,
anyone help, makes sense.
also can tell me how can move down box without using <br>, ive tried top:200px, padding gives me issues.
when refresh browser.
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" xml:lang="en" lang="en">
<head>
<title>title</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="index2testingforvid.css" />
<link href='https://fonts.googleapis.com/css?family=pacifico|tangerine' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="animate.css">
<link rel="shortcut icon" href="images/mini.ico">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
</head>
<body>
<div id="landingpagecontainer">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><b r>
<div id="box">
<div id="logo">company name</div>
<div id="myname">by <br>name name</div>
</div>
</div>
</body>
</html>
css
body{}
*{
margin:0;
padding:0;
}
html
{
height: 100%;
}
body
{
height: 100%;
}
#landingpagecontainer{
height:100%;
background-color:pink;
border: ;
background: url(images/scotlandbw.jpg) no-repeat center center ;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#box{
height:auto;
background:black;
text-align:center;
opacity:0.8;
filter:alpha(opacity=80);
}
#logo{
color:white;
font-size:5em;
font-family: 'tangerine', cursive;
font-weight:normal;
}
.fadeinup{
-webkit-animation-duration: 1000000s;
-webkit-animation-delay: 0s;
}
.fadeinleft{}
#myname{
color:white;
font-size:2.5em;
font-weight:normal;
font-family:'tangerine', cursive;
}
i can't replicate initial 2 issues shadow box displaying bigger on refresh. guess white screen result of large image loading although i've tested large image , it's hardly noticeable (although have broadband connections).
as moving box down screen following way.
give 'landingpagecontainer' position of 'relative' below:
#landingpagecontainer{
height:100%;
background-color:pink;
border: ;
background: url(images/scotlandbw.jpg) no-repeat center center ;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: relative;
}
and 'box' container position of 'absolute', 'bottom 90px' , 'width 100%' below:
#box{
position: absolute;
bottom: 90px;
width: 100%;
background:black;
text-align:center;
opacity:0.8;
filter:alpha(opacity=80);
}
then can delete nasty <br> tags code.
nice image of forth road bridge across firth of forth. rumours have that time painters have painted have start on again - takes long.
More discussions in Dreamweaver support forum
adobe
Comments
Post a Comment