Home › Forums › CSS › Hacking away at building my own website, want to dive deeper › Reply To: Hacking away at building my own website, want to dive deeper
djhphtOkay, so I’ve doing some trial and error and now I’m on a bit of different path now. Still wanting the, somewhat, same thing, but now horizontally. I’ve discovered how to get images to display vertically, full screen and auto resize to different size browser windows with this coding (note: did not paste the java script for the parallax or the end tags for the body):
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style type="text/css">
body {
margin:0;
padding:0;
}
ul {
margin:0;
padding:0;
}
ul li {
list-style:none;
overflow:hidden;
height:700px;
}
.parallax-background {
height:800px;
}
.frame1 {
background-image:url('JS2.jpg');
background-size:cover;
background-position:50% 30%
}
.frame2 {
background-image:url('BR1000.jpg');
background-size:cover;
background-position:50% 50%
}
.frame3 {
background-image:url('whiskey1a.jpg');
background-size:cover;
background-position:50% 70%
}
.frame4 {
background-image:url('ona1000.jpg');
background-size:cover;
}
</style>
</head>
<body>
<ul class="parallax">
<li>
<div class="parallax-background frame1"></div>
</li>
<li>
<div class="parallax-background frame2"></div>
</li>
<li>
<div class="parallax-background frame3"></div>
</li>
<li>
<div class="parallax-background frame4"></div>
</li>
</ul>
I’m curious how to get them to be displayed horizontally with the same dynamics, full screen and resizing automatically to fit the browser window.
Any suggestions on how to recode this? Will not be using the parallax for these pages, only to showcase images in a horizontal scroll.
Thank you!
