As I'm trying to make a "our story" section, when I scroll, the divs on it move up and the background picture changes when the specific div comes in the center. I want a fixed background image. When the div moves to the middle, the background picture may be changed with ease. Background image and div are related.
I'm still learning how to style, I can't create it correctly.
I've included a reference link so you can see what I'm aiming for.
Reference: https://webflow.com/made-in-webflow/website/Change-Background-Image-on-Scroll
.parent {
background-image: url(https://picsum.photos/1080/1920);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
height: 300vh;
text-align: center;
color: white;
}
.div1{
background-color: aqua;
height: 50vh;
margin-top: 90vh;
padding: 20px;
width: 400px;
margin: 90px auto
}
.div2{
background-color: skyblue;
height: 50vh;
padding: 20px;
width: 400px;
margin: 90px auto
}
.div3{
background-color: grey;
height: 50vh;
margin-top: 90vh;
padding: 20px;
width: 400px;
margin: 90px auto
}
<div class="parent">
<div class="div1" >
Content about desert
</div>
<div class="div2" >
Content about mountains
</div>
<div class="div3" >
Content about birds
</div>
</div>
The code below is a rough example of how you might do it. It should give you a starter to experiment with, and things to lookup on the WWW.
var sections;
const backgrounds = [
"url(https://i.picsum.photos/id/604/1080/1920.jpg?hmac=ZGdArZ8jNmfX3SDYlQMsYeGsKy6b_1uBH2WGFt3wYzk)",
"url(https://i.picsum.photos/id/301/1080/1920.jpg?hmac=7cyfS0iaSux6TVm9Wnkg4vtXIWyg_YyhhWYHM6yUTnE)",
"url(https://i.picsum.photos/id/155/1080/1920.jpg?hmac=UZT1atpRomcjj2ijIjwR9C3DY0xtD4On3m5XMNLak6o)"
];
var parent;
var bottomOffset;
function getViewScrollingElements() {
parent = document.getElementById("parent");
sections = document.getElementsByClassName("section");
bottomOffset = window.getComputedStyle(parent).getPropertyValue("height");
bottomOffset = parseInt(bottomOffset.substr(0, bottomOffset.length - 2)) / 3;
// Do first check before a scroll could have occured
checkInView();
}
function checkInView () {
var boundingRect;
for ( var i = 0; i < sections.length; i++ ) {
// Get the extremities of the div
boundingRect = sections[i].getBoundingClientRect();
// Are the div's extremities in view
if ( boundingRect.top < window.innerHeight && boundingRect.bottom >= bottomOffset ) {
parent.style.backgroundImage = backgrounds[i];
break; // Only want one at a time
}
}
}
.background {
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
}
.parent {
text-align: center;
color: white;
height: 100%;
overflow-y: auto;
}
.section {
height: 70vh;
padding: 20px;
width: 400px;
margin: 90px auto;
opacity: 85%;
}
.section:nth-of-type(1) {
background-color: aqua;
}
.section:nth-of-type(2) {
background-color: skyblue;
}
.section:nth-of-type(3) {
background-color: grey;
}
<body onLoad="getViewScrollingElements()">
<div class="background"></div>
<div id="parent" class="parent" onScroll="checkInView()">
<div class="section">
Content about desert
</div>
<div class="section">
Content about mountains
</div>
<div class="section">
Content about birds
</div>
</div>
</body>
It does not like iframes as is so will not run properly in SOs fiddler, but does work in Chrome and Firefox.
Related
I am working with this parallaxish 3d effect i found in a codepen. However I need to add an additional wrapper around all the html. When i wrap the html contents in a <div> everything disappears. When I wrap it in a <span> tag everything is fine. Also if i set that <span> tag to display:block; everything disappears again.
Why is this happening when wrapped in a block element?
Thanks!
https://codepen.io/anon/pen/JapeJX
When you add display: block make sure u set its height to 100% as its inner elements have height set in %.
Checkout https://stackoverflow.com/a/5658062/7333443
CodePen: https://codepen.io/anon/pen/QVQJPR
!(function ($doc, $win) {
var screenWidth = $win.screen.width / 2,
screenHeight = $win.screen.height / 2,
$elems = $doc.getElementsByClassName("elem"),
validPropertyPrefix = "",
otherProperty = "perspective(1000px)",
elemStyle = $elems[0].style;
if (typeof elemStyle.webkitTransform == "string") {
validPropertyPrefix = "webkitTransform";
} else if (typeof elemStyle.MozTransform == "string") {
validPropertyPrefix = "MozTransform";
}
$doc.addEventListener("mousemove", function (e) {
var centroX = e.clientX - screenWidth,
centroY = screenHeight - (e.clientY + 13),
degX = centroX * 0.02,
degY = centroY * 0.01,
$elem;
for (var i = 0; i < $elems.length; i++) {
$elem = $elems[i];
$elem.style[validPropertyPrefix] =
otherProperty + "rotateY(" + degX + "deg) rotateX(" + degY + "deg)";
}
});
})(document, window);
/* CREDITS TO DESKTOPOGRAPHY FOR IMAGE USED */
html,
body {
width: 100%;
height: 100%;
}
body {
background: #004382;
overflow: hidden;
}
.wrapper {
transform-style: preserve-3d;
margin: 0 auto;
max-width: 982px;
width: 100%;
height: 100%;
position: relative;
display: flex;
justify-content: center;
align-self: center;
background: url("http://portalpacific.net/img/desk/icon-circles.png")
no-repeat center center;
background-size: contain;
}
.bloc {
height: 100%;
width: 100%;
position: relative;
display: flex;
justify-content: center;
align-self: center;
background-size: contain;
background-position: center;
}
.content {
transform: translateZ(80px) scale(1);
-webkit-transform: translateZ(80px) scale(1);
height: 100%;
width: 100%;
max-width: 720px;
position: absolute;
margin: auto;
color: #fff;
z-index: 3;
}
.content1 {
background: url("http://portalpacific.net/img/desk/Website.png") no-repeat;
background-position: center;
max-width: 982px;
width: 100%;
height: 100%;
position: relative;
display: flex;
justify-content: center;
align-self: center;
background-size: contain;
}
.content p:nth-of-type(1) {
font-size: 36px;
line-height: 60px;
position: absolute;
}
.content p:nth-of-type(2) {
position: absolute;
}
.block {
display: block;
height: 100%;
}
<span class="block">
<div class="wrapper elem" style="transform: perspective(700px) rotateY(0deg) rotateX(0deg);">
<div class="bloc">
<div class="content content1"></div>
<div class="content content2">
</div>
</div>
</div>
</span>
I have parallax background that's moving at a certain speed with javascript. I need to put the text inside those background divs, so each background has its own text block. But when I put the text inside it goes to the top of the page, despite the container it's located. Something in the positions needs to change but I'm not sure what exactly. Any ideas?
HTML
<div id='hero'>
<div class='layer-bg layer' data-depth='0.10' data-type='parallax'>
<img class="logo" />
</div>
<div class='layer-1 layer' data-depth='0.20' data-type='parallax'>
</div>
<div class="relative">
<div class='layer-2 layer' data-depth='0.30' data-type='parallax'>
<div class="video">
Text
</div>
</div>
</div>
<div class='layer-3 layer' data-depth='0.40' data-type='parallax'></div>
</div>
<div id='hero-mobile'></div>
CSS
body {
padding: 0;
margin: 0;
background-color: $bronze;
font-family: 'Playfair Display', serif;
color: $white;
}
//
#hero {
height: $heroHeight;
overflow: hidden;
position: relative;
}
#content {
background-color: $bronze;
}
.layer {
background-position: bottom center;
background-size: auto;
background-repeat: no-repeat;
width: 100%;
height: $heroHeight;
position: fixed;
z-index: -1;
}
.first-section {
padding: 50px 0 20px 0;
}
.text-header {
font-size: 50px;
text-align: center;
}
h1 {
line-height: 120%;
margin-bottom: 30px;
}
p {
color: #ede0d5;
font-size: 18px;
line-height: 150%;
}
// #hero, .layer {
// min-height: 800px;
// }
.layer-bg {
background-image: url('');
height: 4000px!important;
background-position: top center;
width: 100%;
}
.layer-1 {
background-image: url('
');
height: 3000px;
}
.layer-2 {
background-image: url('');
height: 5500px;
}
.layer-3 {
background-image: url('
');
height: 8000px;
}
.layer-4 {
background-image: url('
');
background-position: center bottom;
}
.layer-overlay {
background-image: url('
');
}
.relative {
position: relative;
}
.logo {
margin: 0px auto;
max-width: 600px;
margin-top: 100px;
display: block;
}
JS
(function() {
window.addEventListener('scroll', function(event) {
var depth, i, layer, layers, len, movement, topDistance, translate3d;
topDistance = this.pageYOffset;
layers = document.querySelectorAll("[data-type='parallax']");
for (i = 0, len = layers.length; i < len; i++) {if (window.CP.shouldStopExecution(1)){break;}
layer = layers[i];
depth = layer.getAttribute('data-depth');
movement = -(topDistance * depth);
translate3d = 'translate3d(0, ' + movement + 'px, 0)';
layer.style['-webkit-transform'] = translate3d;
layer.style['-moz-transform'] = translate3d;
layer.style['-ms-transform'] = translate3d;
layer.style['-o-transform'] = translate3d;
layer.style.transform = translate3d;
}
window.CP.exitedLoop(1);
});
}).call(this);
I don't why you are using 8000px height in your CSS but
check the link may be it will be helpful for you
https://www.w3schools.com/howto/tryhow_css_parallax_demo.htm
Its because you fixed the position of every .layer class div that's why they all are in same position of your DOM.
And overflow: hidden; of your main div #hero
Solution
You have to remove fixed position of your .layer class and overflow: hidden;.
Example:- see fiddle
I'm trying to achieve the following:
A background circle with a smaller colored circle inside of it, which must be centered
A small centered image inside of both circles
All of these items needs to be placed in a single div
I'm trying to do this with the minimum amount of code. I want to avoid duplication as much as possible. I believe that all of this can be achieved using before and after selectors, but I'm not sure how to get this done
Here's what I have so far:
CSS:
.grid-container {
display: grid;
grid: 100px / 100px;
}
.circle {
border-radius: 50%;
width: 100%;
height: 100%;
background-color: #e4e4e7;
}
.circle:before {
content: "";
border-radius: 50%;
width: 80%;
height: 80%;
top: 10%;
left: 10%;
background-color: blue;
display: block;
position: relative;
}
.image-one:before {
content: url("https://stackoverflow.com/favicon.ico");
}
.circle-01 {
grid-column: 1 / 2;
grid-row: 1 / 2;
}
HTML:
<div class="grid-container">
<div class="circle-01 circle image-one"></div>
</div>
I need a structure whereby I can easily change the color of the inner circle and/or image
Example
<div class="grid-container">
<div class="circle-01 circle image-one yellow"></div>
<div class="circle-01 circle image-two blue"></div>
<div class="circle-01 circle image-three green"></div>
</div>
You can do it with a pseudo element like this, putting the pseudo element on top of the main element and using borders and a background-image. You can even use a background color behind the image if it doesn't fill the whole pseudo element (note the no-repeat, the size and position settings for the background):
.x1 {
width: 300px;
height: 300px;
position: relative;
border-radius: 50%;
border: 10px solid #22f;
margin: 30px;
background: yellow;
}
.x1:after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 220px;
height: 220px;
border-radius: 50%;
border: 6px solid #f22;
background: #3d3 url(http://placehold.it/200x200/fa0/?text=this_is_an_image) center center no-repeat;
background-size: 100px 100px;
}
<div class="x1"></div>
Note: the orange square is an image, the green color around it is the background color, the red circle is the border of the pseudo element, the yellow area is the background color of the main element and the blue circle is the border of the main element. Each of these could as well be white or transparent.
ADDITION after additional question in comment:
You can also change the background-colors by adding seperate classes. In the following snippet I added two classes to the div, one that affects the background in the main element and one that affects the background-color of the pseudo element. In the latter case you have to make sure to use the background-color property, not background in the CSS rule - otherwise the background-image would disappear:
.x1 {
width: 300px;
height: 300px;
position: relative;
border-radius: 50%;
border: 10px solid #22f;
margin: 30px;
background: yellow;
}
.x1:after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 220px;
height: 220px;
border-radius: 50%;
border: 6px solid #f22;
background: #3d3 url(http://placehold.it/200x200/fa0/?text=this_is_an_image) center center no-repeat;
background-size: 100px 100px;
}
.aqua-outer-bg {
background: aqua;
}
.pink-inner-bg:after {
background-color: pink;
}
<div class="x1 aqua-outer-bg pink-inner-bg"></div>
Note: The original CSS rules remained unchanged, their background colors are overwritten by the additional classes.
ONE MORE ADDITION after additional question in comment from OP on September 18th:
Yes, you can also split that in two classes as I did below (.x1a and .x1b). I simply added both classes to the HTML tag and split up the CSS from x1:after into two rules, one for .x1a:after and one for .x2a:after
.x1a {
width: 300px;
height: 300px;
position: relative;
border-radius: 50%;
border: 10px solid #22f;
margin: 30px;
background: yellow;
}
.x1a:after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 220px;
height: 220px;
background: #3d3 url(http://placehold.it/200x200/fa0/?text=this_is_an_image) center center no-repeat;
background-size: 100px 100px;
}
.x1b:after {
border-radius: 50%;
border: 6px solid #f22;
}
.aqua-outer-bg {
background: aqua;
}
.pink-inner-bg:after {
background-color: pink;
}
<div class="x1a x1b aqua-outer-bg pink-inner-bg"></div>
Try running this snippet:
$(document).ready(function() {
var sourceIndex = 1;
var colorIndex = 1;
var colors = [
"rgb(0, 132, 203)",
"rgb(255, 192, 203)",
"rgb(50, 192, 103)",
"rgb(255, 165, 0)"
];
var sources = [
"https://www.linkedin.com/favicon.ico",
"https://www.google.com/favicon.ico",
"http://jsfiddle.net/favicon.ico",
"https://getbootstrap.com/favicon.ico",
"https://www.facebook.com/favicon.ico"
];
$("button").click(function() {
changeStuff($(this).hasClass("changeImage") ? sources : colors, $(this));
function changeStuff(list, selector) {
counter(list, selector);
if (list == sources) {
selector
.prev()
.prev(".outer-circle")
.find(".inner-circle")
.find("img")
.attr("src", list[sourceIndex]);
} else {
if (
selector
.prev(".outer-circle")
.find(".inner-circle")
.css("background-color") == colors[colorIndex]
) {
selector
.prev(".outer-circle")
.find(".inner-circle")
.css("background-color", "tan");
} else {
selector
.prev(".outer-circle")
.find(".inner-circle")
.css("background-color", colors[colorIndex]);
}
}
}
});
function counter(list, selector) {
if (list == sources) {
sourceIndex == list.length - 1 ? (sourceIndex = 0) : sourceIndex++;
} else {
colorIndex == list.length - 1 ? (colorIndex = 0) : colorIndex++;
}
}
});
.container {
display: flex;
align-items: center;
flex-direction: column;
}
.box {
display: flex;
}
.inner-circle {
border-radius: 50%;
width: 80%;
height: 80%;
display: flex;
align-items: center;
justify-content: center;
}
.box:first-child .inner-circle {
background-color: blue;
}
.box:nth-child(2) .inner-circle {
background-color: black;
}
.box:nth-child(3) .inner-circle {
background-color: maroon;
}
.outer-circle {
border-radius: 50%;
width: 100px;
height: 100px;
background-color: #e4e4e7;
display: flex;
justify-content: center;
align-items: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="box">
<div class="outer-circle">
<div class="inner-circle">
<img src="https://stackoverflow.com/favicon.ico" alt="">
</div>
</div>
<button class='changeColor'>Change Color</button>
<button class='changeImage'>Change Image</button>
</div>
<div class="box">
<div class="outer-circle">
<div class="inner-circle">
<img src="https://stackoverflow.com/favicon.ico" alt="">
</div>
</div>
<button class='changeColor'>Change Color</button>
<button class='changeImage'>Change Image</button>
</div>
<div class="box">
<div class="outer-circle">
<div class="inner-circle">
<img src="https://stackoverflow.com/favicon.ico" alt="">
</div>
</div>
<button class='changeColor'>Change Color</button>
<button class='changeImage'>Change Image</button>
</div>
</div>
Abracadabra
div {
border-radius: 50%
}
#a {
display: flex;
justify-content: center;
align-items: center;
height: 64px;
width: 64px;
border: 2px solid green;
}
img {
align-self: auto;
border: 2px solid blue;
border-radius: 50%;
padding:5%;
}
<div id="a">
<img src="https://rack.pub/media/janus.png" height="48">
</div>
I need the content box to reach to the footer even when the content box is empty. I want to achieve this using only CSS.
padding-bottom is not an option.
I don't want to use a background image, such as background-image: url center repeat-y;
How can I achieve this?
.wrap {
height: 100%;
}
.l-col {
padding-top: 0;
height: 100%;
}
.footer {
position: relative;
height: 60px;
clear: both;
float: left;
width: 100%;
z-index: 3;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="wrap">
<div class="container">
<div class="col-xs-12 l-col">
<div class="col-xs-12" style="padding:0px">
<table>Content</table>
</div>
</div>
</div>
</div>
Current Layout:
Desired Layout:
Using CSS's calc() function, you can use calculate the min-height of your content div.
body {
margin: 0
}
.header,
.footer {
width: 100%;
height: 60px;
background-color: grey;
}
.content {
width: 100%;
min-height: calc(100vh - 120px);
background-color: #FFF8DC;
}
<div class="wrap">
<div class="container">
<div class="header">
Header
</div>
<div class="content">
Content
</div>
<div class="footer">
Footer
</div>
</div>
</div>
If your preferred method is jQuery, the following code will work, even on page resize.
function setContentHeight() {
var headerHeight = $(".header").height();
var footerHeight = $(".footer").height();
var winHeight = $(window).height();
$(".content").css("min-height", winHeight-(headerHeight+footerHeight));
}
setContentHeight();
$(window).resize(setContentHeight);
Here you go just calculate your min height so if content gets more it will expand if you don't want that just use regular height.
body{margin:0;}
.head, .foot {
width: 100%;
background: gray;
height: 50px;
float: left;
display: inline-block;
}
.content {
width: 80%;
min-height: calc(100vh - 100px);
background: lightgray;
float: left;
display: inline-block;
}
<div class="head">Head</div>
<div class="content">hello</div>
<div class="foot">foot</div>
flex + html5, looks like a school case ...
html {
display:flex;
height:100%;
}
body {
flex:1;
display:flex;
flex-flow:column;
color:white;
}
header , footer{
text-align:center;
background:#4F81BD;
line-height:4em;
}
main {
flex:1;
display:flex;
justify-content:center;
padding-left:10%;/* cause aside is set to 10% width */
}
section {
border:30px #4F81BD solid;
padding:1em;
margin:2px;
box-shadow:0 0 0 2px , inset 0 0 0 2px ;
width:60%;/* whatever */
color: #385D8A
}
aside {
background: #4F81BD ;
box-shadow:0 0 0 2px #385D8A;
margin:auto 0;
width:10%;
min-height:30vh;/* demo purpose, use content instead */
display:flex;/* optionnal to center on XY axis */
align-items:center;
justify-content:center;
}
<header>
header (any height)
</header>
<main><!-- fill gap in between -->
<section>section, run snippet in full page mode and resize window</section>
<aside>aside</aside>
</main>
<footer>
footer (any height)
</footer>
pen to play with: http://codepen.io/gc-nomade/pen/ORyXZA
I am struggling with getting the layout of the header i have in mind together.
Here is the html so far:
<div id="header">
<img src="/img/headerBg.jpg" alt="" class="headerBg" />
<img src="/img/logo.png" alt="Logo" class="logo" />
<div id="loginBox">
other code
</div>
</div>
And the css so far:
#header {
height: 130px;
margin: 5px 5px 0 5px;
border: #0f0f12 outset 2px;
border-radius: 15px;
}
#loginBox {
float: right;
width: 23.5%;
height: 128px;
font-size: 75%;
}
.headerBg {
}
.logo {
width: 50%;
height: 120px;
float: left;
display: block;
padding: 5px;
}
What I am trying to accomplish, is have the image "headerBg.jpg" display to 100% width of the div "header", so essentially it will be the background of the div itself. Then have the image "logo.png" and the div "loginBox" display above "headerBg.jpg".
The logo should be floated to the far left end and the loginBox floated to the far right as in the css.
With the image removed, the logo and div are placed correctly, but when the image is introduced they two floated items are placed after the image in the flow.
I have tried various additions and reconfigurations but none have proven to work out how I want them to.
I have added the image in the css as a background to the header div, but it does not stretch 100% that way.
Would anyone be able to provide some insight on this?
Also any tutorials covering things like this would be a great addition to my collection!
Thank you!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Render this</title>
<style type="text/css">
#header {
position:relative;
height: 130px;
margin: 5px 5px 0 5px;
border: #0f0f12 outset 2px;
border-radius: 15px;
}
#loginBox {
position:relative;
float: right;
width: 23.5%;
height: 128px;
font-size: 75%;
}
.headerBg {
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
}
.logo {
position:relative;
width: 50%;
height: 120px;
float: left;
display: block;
padding: 5px;
}
</style>
</head>
<body>
<div id="header">
<img src="img/headerBg.jpg" alt="" class="headerBg" />
<img src="img/logo.png" alt="Logo" class="logo" />
<div id="loginBox">
other code
</div>
</div>
</body>
</html>
.header {
position: relative;
}
.headerBg {
position: absolute;
left: 0px;
right: 0px;
width: 100%;
}
Note that this will scale the image to fit the width of the <div>; if you only want it to resize horizontally then you should set the height explicitly.
You could also try max-width: 100%; if you only want the image to scale on large windows.
Just make the header background image the true background of that div. Float does not ignore other objects the way that position: absolute does.
#header {
height: 130px;
margin: 5px 5px 0 5px;
border: #0f0f12 outset 2px;
border-radius: 15px;
background: url(headerBg.jpg);
}
Set the div class which will not show any extra parts.
div {
overflow: hidden;
}
These settings worked perfect for me.. it will size ur photo for all pics..
#headerBg {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
width: 100%;
height: 100%;
}
<!DOCTYPE html>
<html>
<head>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta content="text/html; charset=iso-8859-2" http-equiv="Content-Type">
<!--link rel="stylesheet" href="#"-->
<style>
.mySlides {
display: none;
}
.header {
background-color: #f1f1f1;
padding: 30px;
text-align: center;
height: 195px;
display: flex;
align-items: center;
align-items: center;
justify-content: center;
}
.img2 {
float: center;
display: inline-block;
}
</style>
<style type="text/css">
.c4 {
max-width: 500px
}
.c3 {
width: 100%
}
.c2 {
display: inline-block;
text-align: center;
width: 100%;
}
.c1 {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<h2 class="c2">Automatic Slideshow</h2>
<div id="header" class="c2">
<img class="img2 c1" src="./img/16px/avi.png" alt="Pineapple">
<h1 class="c2">
I want to be
</h1>
<div class="c4">
<img id="carousel" src="" class="c3">
</div>
</div>
<script>
//set up things
var images = [];
images[0] = "./img/16px/avi.png";
images[1] = "./img/16px/bmp.png";
images[2] = "./img/16px/cpp.png";
var n = images.length - 1;
var carouselimg = document.getElementById("carousel");
var header = document.getElementById("carousel");
// preload all images
carouselimg.style.display = "none";
for (var i = 0; i < n; i++) {
carouselimg.src = images[i];
}
carouselimg.style.display = "block";
//prepare first round
var carouselIndex = 0;
// start show
rotate();
function rotate() {
var dr = header.getBoundingClientRect();
carouselimg.style.width = dr.width;
carouselimg.src = images[carouselIndex];
//index is a global variable
//so its state will be kept and we can load the first / next image
carouselIndex++;
// increment image array index
if (carouselIndex > n) {
// do we rech the end
carouselIndex = 0
// start from begin
}
setTimeout(rotate, 2000);
// restart rotation every 2 seconds
}
</script>
</body>
</html>
try using in your css:
max-height:100%;