为什么background-size或background-repeat属性在我的图像滑块上不起作用？

Question

I'm making an image slider in my JS and right now I'm just working on the right arrow button and having it cycle up through images in my img folder when that button is clicked. However when I click the arrow to go to the next image, the new image loses a couple properties I have set on it in the CSS; the background size and repeat properties. The fix I found was just adding them back on in the JS.

rightArrow.addEventListener('click', function() {
    num++;
    img.style.background = 'url(img/fam-' + num + '.jpeg)';
    img.style.backgroundRepeat = 'no-repeat'; // Have to add this property back on even though its already in the CSS
    img.style.backgroundSize = 'cover'; // Have to add this property back on even though its already in the CSS
})

I don't want to do this though. Why do these properties stop working when I change the image?? Also I can't post my full code here because its too long and and the fiddle link won't be much help because you can't see the images https://jsfiddle.net/yat5ncmk/3/

 const ham = document.querySelector('.nav-box'); const menu = document.querySelector('.menu'); const menuClose = document.querySelector('#menu-close'); const leftArrow = document.querySelector('#left'); const rightArrow = document.querySelector('#right'); const img = document.querySelector('.image-slider'); let num = 1; ham.addEventListener('click', function() { ham.classList.add('ham-open'); menu.style.marginLeft = '50px'; }) menuClose.addEventListener('click', function() { ham.classList.remove('ham-open'); menu.style.marginLeft = '-700px'; }) leftArrow.addEventListener('click', function() { }) rightArrow.addEventListener('click', function() { num++; img.style.background = 'url(img/fam-' + num + '.jpeg)'; img.style.backgroundRepeat = 'no-repeat'; img.style.backgroundSize = 'cover'; }) // window.sr = ScrollReveal(); // sr.reveal('.logo-wrap', { // duration: 2000, // origin: 'left', // }); // sr.reveal('.w1', { // duration: 2000, // origin: 'bottom' // }); // sr.reveal('.w2', { // duration: 3000, // origin: 'bottom' // }); // sr.reveal('.w3', { // duration: 4000, // origin: 'bottom' // }); // sr.reveal('.b1', { // duration: 2000, // origin: 'top', // distance: '50px' // }); // sr.reveal('.b2', { // duration: 1500, // origin: 'top', // distance: '75px' // }); // sr.reveal('.b3', { // duration: 1000, // origin: 'top', // distance: '100px' // }); // sr.reveal('#left', { // duration: 1000, // origin: 'top', // distance: '50px' // }); // sr.reveal('#right', { // duration: 1000, // origin: 'top', // distance: '50px' // }); 

 const ham = document.querySelector('.nav-box'); const menu = document.querySelector('.menu'); const menuClose = document.querySelector('#menu-close'); const leftArrow = document.querySelector('#left'); const rightArrow = document.querySelector('#right'); const img = document.querySelector('.image-slider'); let num = 1; ham.addEventListener('click', function() { ham.classList.add('ham-open'); menu.style.marginLeft = '50px'; }) menuClose.addEventListener('click', function() { ham.classList.remove('ham-open'); menu.style.marginLeft = '-700px'; }) leftArrow.addEventListener('click', function() { }) rightArrow.addEventListener('click', function() { num++; img.style.background = 'url(img/fam-' + num + '.jpeg)'; img.style.backgroundRepeat = 'no-repeat'; // Have to add this property back on even though its already in the CSS img.style.backgroundSize = 'cover'; // Have to add this property back on even though its already in the CSS }) // window.sr = ScrollReveal(); // sr.reveal('.logo-wrap', { // duration: 2000, // origin: 'left', // }); // sr.reveal('.w1', { // duration: 2000, // origin: 'bottom' // }); // sr.reveal('.w2', { // duration: 3000, // origin: 'bottom' // }); // sr.reveal('.w3', { // duration: 4000, // origin: 'bottom' // }); // sr.reveal('.b1', { // duration: 2000, // origin: 'top', // distance: '50px' // }); // sr.reveal('.b2', { // duration: 1500, // origin: 'top', // distance: '75px' // }); // sr.reveal('.b3', { // duration: 1000, // origin: 'top', // distance: '100px' // }); // sr.reveal('#left', { // duration: 1000, // origin: 'top', // distance: '50px' // }); // sr.reveal('#right', { // duration: 1000, // origin: 'top', // distance: '50px' // }); 

 html, body { margin: 0; padding: 0; box-sizing: border-box; } .header { background: url(img/mex-9.jpg); width: 100%; height: 100vh; background-size: cover; background-attachment: fixed; background-position: center; display: flex; } .nav-wrap { flex-basis: 40%; } .nav-wrap i { color: white; font-size: 2rem; position: absolute; right: -33px; top: 0px; transition: all .1s ease; } .nav-wrap i:hover { cursor: pointer; transform: scale(1.15); } .nav-box { margin-left: 50px; margin-top: 100px; max-width: 70px; cursor: pointer; position: fixed; z-index: 10; } .b1, .b2, .b3 { width: 70px; height: 8.5px; border-radius: 5px; background-color: #fff; margin-bottom: 10px; transition: all .15s ease; } .b1 { background-color: #56ff47; } .b3 { background-color: #ff4c4c; } .ham-open .b1 { background-color: #56ff47; transform: translateY(100px); position: relative; z-index: 1; } .ham-open .b2 { transform: translateY(81.5px); width: 110px; position: relative; left: 60px; z-index: 0; } .ham-open .b3 { background-color: #ff4c4c; transform: translateY(63px); width: 140px; position: relative; left: 160px; z-index: 2; } .menu { display: flex; border-left: 8px solid #56ff47; flex-direction: column; background-color: #fff; margin-left: -700px; width: 292px; padding-top: 10px; padding-bottom: 10px; position: fixed; border-radius: 5px; top: 225px; transition: all .15s; z-index: 10; } .menu a { text-decoration: none; color: limegreen; font-family: 'Kumar One Outline'; font-size: 2.3rem; text-align: center; margin-top: 12px; margin-bottom: 12px; transition: all .5s ease; } a:hover { color: #007001; } .info-wrap { flex-basis: 60%; } .info { font-family: 'Cedarville Cursive'; color: white; font-weight: bold; font-size: 4.5rem; text-align: center; margin-top: 60px; } .logo-wrap { display: flex; justify-content: center; flex-direction: column; } .logo-wrap div { font-family: 'Staatliches'; color: white; font-size: 13rem; font-weight: bold; letter-spacing: 10px; margin-bottom: -5rem; position: relative; margin-left: auto; margin-right: auto; } /*---------------ABOUT---------------*/ .about-section { background-color: #17a832; width: 100%; position: relative; } .about-section h1 { text-align: center; font-size: 4.5rem; margin-top: 0; margin-bottom: 30px; padding-top: 15px; color: white; font-family: 'Cedarville Cursive'; font-weight: bold; } .about-line { width: 350px; height: 5px; background-color: #ddae1a; border-radius: 4px; position: absolute; top: 120px; left: 0; right: 0; bottom: 0; margin: 0 auto; } .about-wrap { display: flex; padding-bottom: 150px; } .about-info, .image-slider-wrap { flex-basis: 50%; } .about-info p { color: white; font-family: 'Josefin Sans'; font-size: 2rem; margin-left: 100px; margin-bottom: 0; margin-top: 0; } .image-slider { width: 650px; height: 400px; background: url(img/fam-1.jpeg); background-position: center; background-size: cover; background-repeat: no-repeat; border-radius: 13px; margin-left: auto; margin-right: auto; position: relative; } .image-slider i { color: white; font-size: 5rem; position: absolute; top: 50%; margin-top: -40px; transition: all .1s ease; cursor: pointer; } #left { transform: rotate(-90deg); left: -30px; max-width: 50px; } #right { transform: rotate(90deg); right: -30px; } #left:hover { transform: rotate(-90deg) scale(1.3); } #right:hover { transform: rotate(90deg) scale(1.3); } .burrito, .taco, .guac, .nachos, .hot { position: absolute; transform: rotate(-45deg); bottom: -130px; right: 200px; width: 300px; height: 300px; z-index: 3; background-repeat: none; } .hot { right: 345px; width: 240px; height: 240px; z-index: 2; transform: rotate(0deg); } .burrito { bottom: -140px; right: 180px; z-index: 1; } .nachos { transform: rotate(0deg); right: 380px; width: 165px; height: 165px; bottom: -170px; } .taco { transform: rotate(0deg); width: 220px; height: 220px; bottom: -180px; right: 460px; } .guac { transform: rotate(0deg); right: 140px; bottom: -180px; width: 250px; height: 250px; } .food-wrap { position: relative; right: 20px; } /*---------------MENU---------------*/ .menu-section { background-color: #ddae1a; display: flex; width: 100%; top: -100px; position: relative; clip-path: polygon(0% 0%, 100% 3%, 100% 100%, 0% 100%); /*background-image: linear-gradient(4deg, #edb12f 92%, #17a832 92%, #17a832);*/ } .menu-section h1 { font-size: 9.5rem; position: absolute; top: 30px; left: 230px; margin-top: -30px; padding-top: 15px; color: white; font-family: 'Cedarville Cursive'; font-weight: bold; } .menu-line { width: 450px; height: 5px; background-color: #17a832; border-radius: 4px; position: absolute; top: 220px; left: 225px; } .column-left, .column-right, .column-middle { flex-basis: 33.33%; margin-top: 230px; padding-bottom: 120px; } .column-left { display: flex; justify-content: flex-end; } .column-left #combo-platter:after { display: block; content: "beans and rice included"; color: white; font-size: 1.5rem; font-family: 'Josefin Sans'; margin-top: -25px; } .column-left h2:not(#combo-platter):after, .column-middle h2:after, .column-right h2:after { content: ""; display: block; width: 100%; height: 2px; background-color: white; border-radius: 3px; margin-top: -25px; } .column-middle { display: flex; justify-content: center; } .column-right { display: flex; justify-content: flex-start; } .column { min-width: 420px; display: flex; flex-direction: column; position: relative; overflow: hidden; } .column h2 { display: inline-block; align-self: center; font-family: 'Cedarville Cursive'; color: #17a832; font-size: 3rem; } .row { font-family: 'Josefin Sans'; font-size: 1.5rem; } .row div { display: flex; justify-content: space-between; } .row div:after { display: inline-block; position: absolute; content: ""; width: 100%; margin-top: 33px; border-top: 4px dotted black; } .row div p { background: #ddae1a; overflow: hidden; position: relative; z-index: 1; padding: 0 6px; } .menu-h2 { text-align: center; } .design-left, .design-right { position: absolute; } .design-right { right: 0; transform: rotate(180deg); } .arrow-right { width: 0; height: 0; border-top: 30px solid transparent; border-bottom: 30px solid transparent; border-left: 60px solid green; position: relative; top: -10px; } .arrow-left { width: 0; height: 0; border-top: 30px solid transparent; border-bottom: 30px solid transparent; border-right:60px solid limegreen; position: relative; top: 20px; } .arrow-top { width: 0; height: 0; border-top: 30px solid transparent; border-bottom: 30px solid transparent; border-left: 60px solid #20a04b; position: relative; top: -100px; left: 60px; } .top-middle { position: relative; top: -110px; } .bottom-middle .arrow-left { top: -40px; } .bottom-middle .move { top: -70px; } .bottom { position: relative; top: -48px; } .bottom .arrow-left { top: -40px; } /*---------------HOURS---------------*/ .hours-section { background-color: #17a832; margin-top: -155px; clip-path: polygon(0% 5%, 4.8% 0%, 95% 0%, 100% 4.8%, 100% 100%, 0% 100%); position: relative; } .hours-section h1 { text-align: center; font-size: 5rem; margin-top: 0; margin-bottom: 30px; padding-top: 15px; color: white; font-family: 'Cedarville Cursive'; font-weight: bold; } .hours-line-left { width: 750px; height: 10px; border-radius: 4px; background-color: #ff4c4c; position: absolute; top: 10%; left: 50px; } .hours-line-right { width: 750px; height: 10px; border-radius: 4px; background-color: #56ff47; position: absolute; top: 10%; right: 50px; } .hours-wrap { display: flex; justify-content: center; padding-bottom: 100px; } .hours { display: flex; border: 7px solid green; padding: 25px; } .hours div div { background-color: white; color: black; margin-bottom: 20px; padding: 8px; font-size: 3rem; font-family: 'Josefin Sans'; border-right: 10px solid #56ff47; } .hours div div:last-child { margin-bottom: 0; } .hours p { margin: 0; text-align: center; } .hours-open div { margin-left: 30px; } .hours .hours-open p { padding: 0 5px; } .design-wrap-left-side { position: absolute; left: 0; top: 29.8%; } .hex-left, .hex-right { -webkit-clip-path: polygon(47% 5%, 87% 24%, 87% 76%, 47% 95%, 10% 76%, 10% 24%); width: 165px; height: 165px; background-color: limegreen; top: 152px; left: -16.5px; position: absolute; } .hex-right { top: 152px; right: -16.5px; } .hex-inner { -webkit-clip-path: polygon(47% 5%, 87% 24%, 87% 76%, 47% 95%, 10% 76%, 10% 24%); width: 135px; height: 135px; background-color: #17a832; position: absolute; left: 0; right: 0; bottom: 0; top: 0; margin: auto; } .hex-arrow-left, .hex-arrow-right { width: 0; height: 0; border-top: 35px solid transparent; border-bottom: 35px solid transparent; border-left: 70px solid limegreen; position: absolute; top: 200px; right: -150px; } .design-wrap-right-side { transform: rotate(180deg); position: absolute; right: 0; bottom: 19.4%; } .hours-wrap .design-wrap-left { transform: rotate(180deg); position: relative; top: -80px; } .hours-wrap .design-wrap-right { position: relative; top: 80px; } .design-wrap-left .arrow-top, .design-wrap-right .arrow-top, .design-wrap-left-side .arrow-top, .design-wrap-right-side .arrow-top { width: 0; height: 0; border-top: 30px solid transparent; border-bottom: 30px solid transparent; border-left: 60px solid limegreen; position: relative; top: -100px; left: 60px; } .change-color { width: 0; height: 0; border-top: 30px solid transparent; border-bottom: 30px solid transparent; border-left: 60px solid #6acc66; position: absolute; top: -10px; } /*---------------FOOTER---------------*/ .contact-section-background { background-color: #666; height: 300px; clip-path: polygon(0% 0%, 10% 30%, 90% 30%, 100% 0%, 100% 100%, 0% 100%); margin-top: -100px; } .contact-section { display: flex; background-color: #595959; margin-top: -225px; position: relative; padding-bottom: 18px; z-index: 1; } .contact, .location { flex-basis: 50%; display: flex; flex-direction: column; align-items: center; } .contact h1, .location h1 { margin: 0; font-family: 'Cedarville Cursive'; color: white; font-size: 7rem; } .hex { -webkit-clip-path: polygon(25% 60%, 75% 60%, 100% 100%, 0% 100%); background-color: #17a832; transform: rotate(180deg); width: 300px; height: 150px; margin: 0 auto; position: absolute; top: 0; right: 0; left: 0; bottom: 0; z-index: 2; } .rhombus { -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); background-color: #17a832; width: 80px; height: 80px; position: absolute; margin: 0 auto; top: 60px; right: 0; left: 0; bottom: 0; z-index: 2; } .contact p { font-family: 'Josefin Sans'; font-size: 2rem; margin-top: 0; margin-bottom: 10px; color: white; } .textarea { position: relative; min-width: 500px; } .contact textarea { resize: none; width: 100%; color: #595959; margin: 10px; min-height: 150px; font-family: 'Josefin Sans'; font-size: 1.5rem; padding: 5px; outline: none; border: none; background: #474646; border-radius: 4px; } .contact button { font-size: 1.5rem; font-family: 'Josefin Sans'; background: darkgrey; color: #595959; padding: 4px; padding-right: 6px; padding-left: 6px; border: none; border-radius: 4px; cursor: pointer; position: absolute; bottom: 10px; right: -20px; transition: all .4s ease; } .contact button:hover { color: #ddae1a; } .contact-line { margin-top: 170px; margin-bottom: 30px; width: 5px; border-radius: 3px; height: 350px; background: #ddae1a; position: relative; } .links { display: flex; position: relative; max-width: 400px; top: -5px; left: 7px; } .links i { font-size: 2.5rem; margin-right: 15px; } .links p { font-size: 1.5rem; margin-right: 30px; margin-top: 8px; } #facebook { color: #3b64ed; cursor: pointer; } #twitter { color: #5effeb; cursor: pointer; } #yelp { color: red; cursor: pointer; } .contact-design-wrap-left { position: absolute; left: 0; top: 40px; max-height: 500px; } .contact-design-wrap-right { position: absolute; bottom: 40px; right: 0; transform: rotate(180deg); } .contact-design-wrap-left .bottom { height: 0; } #align { position: absolute; left: 70px; top: -15px; } #align2 { position: absolute; left: 68px; top: -5px; } .grey { border-left: 60px solid #666; } .light-grey { border-right: 60px solid #848484; } .same { border-left: 60px solid #848484; } .lighter { border-right: 60px solid #a8a3a3; } .map { position: relative; top: 50px; } .map i { position: absolute; color: #ddae1a; font-size: 4rem; left: 50%; margin-left: -24px; } .location .map .street-1 { width: 300px; position: relative; top: 80px; height: 15px; transform: rotate(90deg); background-color: #848484; border-radius: 5px; } .location .map .street-2 { width: 300px; height: 15px; position: relative; top: 65px; left: 300px; transform: rotate(90deg); background-color: #848484; border-radius: 5px; } .location .map .street-3 { margin-top: 40px; width: 600px; position: relative; top: 30px; height: 18px; background-color: #848484; border-radius: 8px; } .street-info { color: white; position: absolute; font-family: 'Josefin Sans'; font-size: 1.2rem; left: 20px; padding-top: 3px; } .address { position: absolute; left: 50%; top: 75px; margin-left: -68.5px; color: #ddae1a; text-decoration: none; font-family: 'Josefin Sans'; font-size: 1.2rem; text-align: center; } .address:hover { color: #ddae1a; text-decoration: underline; } .copyright { position: absolute; bottom: 0; left: 50%; font-family: 'Josefin Sans'; color: #a8a3a3; font-size: 1.8rem; padding-bottom: 5px; margin: 0 0 0 -253.89px; } 

Answer 1

when you reset the background-image via background , you reset also every other properties.

first thing to do is to reset only background-image not background which is the shorthand for most of the bg properties.

then, you might not need to reset background-size

rightArrow.addEventListener('click', function() {
    num++;
    img.style.backgroundImage = 'url(img/fam-' + num + '.jpeg)';

})

fiddle uses lorempixel image for demo https://jsfiddle.net/rnxwsf2q/

Answer 2

The background property contains ALL of the background-x subproperties in it.

Just set background-image instead.