I'm fairly new to web design and I've been working on a pure CSS layered parallax page, like a landscape effect with overlapping div containers stacked at different depths... and to my pleasure I got it working perfectly in Chrome.
However when I load it in Firefox (ver. 47) (using Windows 10) it looks fine until I scroll down. My divs and their content completely disappear after various points and reappear when I scroll back up. Alternatively I can resize the browser and everything reloads perfectly, but will disappear again if I continue scrolling.
In IE and Edge the content disappears after completely scrolling off the top and doesn't appear when I scroll back up. Only reappears after resizing.
I have tried adding the browser specific prefixes and what not and that didn't help at all. I also tried changing the perspective value as noted in a similar post but that didn't fix it either. What is causing this discrepancy between the presentation in chrome and the others?
Here is my code, I have replaced the div background images with colors.
Thanks
HTML:
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<link href="../CSS/Styles.css" type="text/css" rel="stylesheet">
</head>
<body>
<img id="bannerlogo" src="http://placehold.it/350x65">
<div id="back1">
<p id="text1">Splash Text 1</p>
</div>
<div id="back2">
<p id="text2">Splash Text 2</p>
</div>
<div id="back3"></div>
<div id="back4"></div>
<div id="content"></div>
<div id="footer"></div>
</body>
</html>
CSS:
html {
height: 100%;
overflow:hidden;
}
body {
text-align:center;
margin:0;
padding:0;
perspective: 1px;
transform-style: preserve-3d;
height: 100%;
overflow-y: scroll;
overflow-y: visible;
overflow-x: hidden;
background-image: url(../IMAGES/Layer1.jpg);
background-size: cover;
background-attachment:fixed;
}
#text1, #text2{
position:relative;
font-weight:normal;
font-family:courier new;
}
#bannerlogo{
width:75%;
max-width:700px;
}
#text1{
left:-10%;
top:60%;
font-size:4vw;
}
#text2{
left:-5%;
top:60%;
font-size:4vw;
}
#content{
position:relative;
height:700px;
width:100vw;
background-color:rgb(3,0,20);
z-index:10;
}
#footer{
position:relative;
height:150px;
width:100vw;
background-color:rgb(30,30,50);
z-index:15;
}
#back1, #back2, #back3, #back4{
position:relative;
right:0px;
background-size:cover;
width:100vw;
height:100vh;
min-width:1280px;
min-height:720px;
background-size: 100% 100%;
text-align:center;
font-family:verdana;
font-size: 200%;
color:white;
font-weight:bold;
letter-spacing:5px;
line-height:100%;
transform-style:inherit;
min-height:100vh;
}
#back1{
background-color:rgb(100,100,150);
transform: translateZ(-5px) scale(6) translateY(0%);
z-index:-1;
margin-bottom:-30vh;
}
#back2{
background-color:rgba(100,150,100,.7);
transform: translateZ(-2px) scale(3.5);
}
#back3{
background-color:rgba(150,100,100,.5);
transform: translateZ(-1px) scale(2) translateY(-25%);
}
#back4{
min-height:0px;
height:30vh;
background-color:rgb(3,0,20);
transform: translateZ(-1px) scale(2) translateY(20%);
margin-bottom:-30vh;
}
Related
I have a webpage with a image placed onto it. the webpage the image is placed onto is a very long vertical page (4000px) for silly idea reasons.
The image I am placing is of a robot charging out of a city backdrop and I can hover over it and it fades into view. I've been testing out different browsers etc and the Firefox Mobile/Tablet scale view etc and it brought to my attention a few issues.
I've stabilized every other image in the webpage but 1. the robot: for some reason it just will not stay in one place when it resizes. When I Shift the Width scale of a window, the robot shrinks (as wanted) But also scales up or down from its original position.
I've been trying to suss it and no matter what solution, the robot will not stay in the same place and resize. It will always move up or down away from its original position due to resizing. I also cannot have the image at 100% as it's then far too large for the picture.
And because of it being a 4000px vertical screen, no matter how I resize the original image it will always stretch to suit the 4000px.
So I'm a bit stuck. Here is a little code to see if anybody can adjust this so the robot fits.
<style type="text/css">
.container{
width:100%;
hieght:100%;
top:0%;
left:0%;
margin: 0;
padding: 0;
text-decoration: none;
};
</style>
<style type="text/css">
.bakimg{
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
background-repeat: no-repeat;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
</style>
<style type= "text/css">
#rob{
position:absolute;
top:40%;
left:54.5%;
width:45%;
height: 45%;
};
</style>
<style type= "text/css">
.robofade {
-webkit-opacity: 0.1;
-moz-opacity: 0.1;
opacity: 0.1;
-webkit-transition: opacity 3s;
}
.robofade:hover {
-webkit-opacity: 1;
-moz-opacity: 1;
opacity: 1;
-webkit-transition: opacity 3s;
}
</style>
<script type="text/javascript" src="sound-mouseover.js"></script>
</head>
<body>
<Div class="container">
<img class="bakimg" src="webapp1b2.png";>
<img id="rob" class="robofade" src="robot1a.png";>
<embed src="menulista.html" style="position:fixed; top:0%;left:8.0%; width:100%; height:10%; z-index:100000;">
<img id="bakbar" src="backbar.png" style="position:fixed; top:0%; left:0%;width:100%; hieght:100%; z-index:9999;">
<img id="txt" src="linkmywebsitelogotext.png" style="position:fixed; top:1%; left:5%; width:90%; hieght:90%; z-index:9999;">
<!---<img name="slidetext1" class="fadeout" src="menuslide1.png" style="position:absolute; top:100%; left:26%; width:60%; hieght:100%;">--->
</div>
<!-- <img name="glowtxt" class="fadeout" src="glowtext.png" style="position:fixed; left:0.05%; top:90%; z-index:99999;">-->
<!--[if (gt IE 9)|!(IE)]><!-->
<body>
I am assuming that the issue is due to the large vertical image (4000px) throwing the size differential out of sync...
I can diagonally shift the window size and the image stays put in the correct position, but because of the large vertical backdrop. When i resize the width only of the image - i get the out of position issue... Thanks for any advice in advance.
http://jsfiddle.net/MgcDU/7239/
like this fiddle , but with a image that has to be at 40% size on a 4000px background image...Tricky . the 40% image just will not stay put... and i cant go 100% or the image is too big....
I sorted it, for those in the same position, it really is an easy fix... see code...
<!----responsive elements (images on images---->
<style>
.wrapper{
display: inline-block;
position:relative;
}
.bg {
width: 100%;
max-width: 100%;
}
.simg{
position:absolute;
right: 15.3%;
top: 3.5%;
height:16%;
width: 40%;
max-width:65%;
opacity: 0.1
}
.slidetxt1{
position:absolute;
right: 20%;
top: 28%;
width: 60%;
max-width:60%;
opacity: 0.1
}
</style>
</head>
<body>
<div class="wrapper";>
<img class="bg" src="webapp1b2.png";>
<img id="slide" class="simg" src="robot1.png"; onmouseover="enlarge2()"; onmouseout="delarge2()";>
<img id="simg" class="slidetxt1" src="menuslide1.png" onmouseover="enlarge()"; onmouseout="delarge()";>
<div>
<!--------------------->
<embed src="menulista.html" style="position:fixed; top:0%;left:8.0%; width:100%; height:10%; z-index:100000;">
<img id="bakbar" src="backbar.png" style="position:fixed; top:0%; left:0%;width:100%; hieght:100%; z-index:9999;">
<img id="txt" class="spinx" src="linkmywebsitelogotext.png" style="position:fixed; top:1%; left:5%; width:90%; hieght:90%; z-index:9999;">
<!-- <img name="glowtxt" class="fadeout" src="glowtext.png" style="position:fixed; left:0.05%; top:90%; z-index:99999;">-->
<!--[if (gt IE 9)|!(IE)]><!-->
<body>
I am in the process of making a website in HTML and CSS. I have a background image of me on the Home page. Despite my wild efforts of trying to figure it out, nothing I have tried will work. I have tried to not include the background with the main "Body". To be more clear I will include a Chunk of my CSS code that I have been trying to rotate, but instead it rotates the Whole website.
.site-wrap {
min-height: 100%;
min-width: 100%;
background-color: white;
position: relative;
top: 0;
bottom: 100%;
left: 0;
z-index: 1;
padding: 4em;
background-image: url("/Users/tjle------/Downloads/IMG_2057.JPG");
background-size: 100%;
}
This is only some of the code, but the image comes sideways when excuted. When I tried to rotate it, it would rotate the whole website which is not supposed to happen. Should I try to make the background separate from the site wrap? Thanks! Sorry if the question is hard to understand, please tell me if it is.
Here is the solution :
HTML :
<body>
<div class="bcg"> <!-- this is your background-->
<img src="http://img.theepochtimes.com/n3/eet-content/uploads/2013/06/Canada-Goose-PhotosCom-139956551-Janet-Forjan-Freedman-676x450.jpg"/>
</div>
<!-- The rest of your page -->
</body>
CSS:
body,html{
width:100%;
height:100%;
margin:0;
}
.bcg{
position:absolute;
z-index:-1;
width:100%;
height:100%;
max-width:100%;
max-height:100%;
overflow:hidden;
}
.bcg img{
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg); //the angle of rotation
margin:auto;
width:100%;
height:100%;
max-width:100%;
max-height:100%;
}
And here is working fiddle : https://jsfiddle.net/vxj4u5dy/2/
But this is not perfect solution so I'd suggest you to rotate your photo in image editing program and then apply it to your web page as original ;)
I'm trying to make my image full screen while overflowing the div
pulled from here:
CSS - how to overflow from div to full width of screen
Except instead of using a color, I'm using an image..but I want it to be full screen also. Any ideas?
.main-header:after {
content: "";
position: absolute;
height: 100%;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 99vw;
background-size: cover;
background: url(header_bg.jpg) no-repeat center center; /* help */
z-index: -1;
}
Like this?
body{
margin:auto;
}
#for_real,#top{
width:100px;
height:100px;
border:solid;
z-index:100;
}
#for_real img{
position:fixed;
top:0px;
left:0px;
opacity:0.5;
width:100vw ;
height:100vh;
}
<div id='top'>
TOP DIV WITH NO IMAGE
</div>
<div id='for_real'>
DIV WITH IMAGE
<img src='https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcT-gpy8G_VpoocZD5L5tuNO_hO_BC9zXl32WCjaHcE-ICiWhL5O'>
</div>
I wanted to know if it is possible to have an image within the HTML document that behaves like a background image (currently done in CSS)?. The reason is so that the client can upload a background image via the CMS rather then myself having to manually do it for the client in CSS (which they do not have access to).
This is the effect I would like to create: http://codepen.io/anon/pen/wabjyg
HTML
<div>
<h1>An example of text over an image</h1>
</div>
CSS
div {
background: url(http://lorempixel.com/g/1100/300/) no-repeat;
width:100%;
height:100%;
background-size:cover;
}
One of doing it would be to have the background image as an inline style like this... http://codepen.io/anon/pen/aOrGYX - That way I can create a dynamic tag in the template which pulls the image path they upload in the CMS.
HTML
<div style="background-image: url('http://lorempixel.com/g/1100/300')">
<h1>An example of text over an image</h1>
</div>
CSS
div {
background-repeat: no-repeat;
width:100%;
height:100%;
background-size:cover;
position:relative;
}
Just wanted to know if there was another way of doing it without using inline styles within the HTML markup? Maybe tricking the IMG tag to behave like a background image?
You could use object-fit to get an img to behave like a background image:
html, body {
height:100%;
margin:0;
padding:0;
}
div {
background-repeat: no-repeat;
width:100%;
height:100%;
position: relative;
}
img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
h1 {
font-family:sans-serif;
margin:0;
color:#fff;
position:absolute;
letter-spacing:-1px;
text-align:center;
left:50%;
top:50%;
text-shadow:0 0 30px rgba(0,0,0,0.8);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
<div>
<img src="http://lorempixel.com/g/1100/300">
<h1>An example of text over an image</h1>
</div>
After a bit Googling I found this tutorial that offers a different solution.
You can put a extra stylesheet in your header, for example background.php
<link rel='stylesheet' type='text/css' href='css/background.php' />
In that file you can set your variables and can use them in your stylesheet, like so.
<?php
header("Content-type: text/css; charset: UTF-8");
// DB Query here (or pass it with a function)
$background = "/img/user/background/1.png";
?>
body, html { background: url(<?php echo $linkColor; ?>); }
Hope it helps.
This might be the dumbest question, but Im building a single page website, where you have to scroll down to get to the "next page".. It has one background in a fixed position div and so far Ive only implemented css and html. Havent even started the real work.. Just sort of testing the design.. how I'd like to have things.
It works just fin under Chrome and Firefox, but almost dies on Safari.
I wonder if its just my mac or theres something to the way I do things. Safari does not like overlaying divs, or what?! :(
HTML
<div id="background"></div>
<div id="container">
<div id="header">Page title</div>
<!--menu comes here later on-->
<div id="content">CONTENT</div>
</div>
CSS
#background {
position:fixed;
top:0px; left:0px;
width:100%; height:100%;
background:url(bg.jpg) no-repeat center center fixed;
-webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover;
}
#container {
position:absolute;
top:0px; left:0px;
width:100%; height:100%;
}
#header {
position:absolute;
top:2%; left:7%;
font-family:"Times New Roman";
font-size:50px;
color:#ffffff;
}
#content {
position:absolute;
top:100%;
width:100%; height:1000px;
background:#ffffff;
box-shadow:0px -3px 25px #252525;
}
Any ideas?!
Thanks!