Home > Software design >  An error occurred while loading the image
An error occurred while loading the image

Time:10-17

I've got an issue with loading an image after hosting in GitHub. If I run my project on localhost, the issue will not appear. It runs well. But when I run the project by going to the generated link in GitHub, I will get the error.

The project has style.min.css and stlye.css as well. Inside the file index.html haves a link to style.min.css My part of code:

.promo {
  height: 650px;
  padding: 21px 0 93px 0;
  background-image: url(/../../img/background_first.jpg);
  background-repeat: no-repeat;
  background-position: center;
}

If you want to try running the project on your local machine, the link to GitHub (Image after solving the problem

Replace style.min.css with this:

*{font-family:MuseoSansCyrl,sans-serif}.container{max-width:950px;margin:0 auto}.promo{height:650px;padding:21px 0 93px 0;background-image:url(../img/background_first.jpg), url(img/background_first.jpg);background-repeat:no-repeat;background-position:center}.promo__wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end;text-align:right}.promo__header{text-transform:uppercase;color:#fff;font-weight:700;font-size:42px;line-height:42px;margin-top:90px}.promo__subheader{font-weight:500;color:#fff;font-size:24px;line-height:24px;margin-top:10px;text-transform:uppercase}.promo__icons{width:425px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;margin-top:64px}.promo__icon{display:block;width:108px;text-align:center;font-weight:500;font-size:14px;line-height:14px;color:#fff}.promo__icon img{display:block;margin:0 auto;margin-bottom:15px}.promo__link{font-weight:500;font-size:16px;margin-top:7px;color:#fff}.promo__link a{color:#fff}.promo__link a:hover{color:#c70101}.header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.header__logo{width:250px}.header__logo img{width:100%}.header__official{font-weight:500;font-size:12px;line-height:12px;color:#fff;text-align:center}.header__official span{display:block;font-size:18px;margin-top:7px}.header__phone{display:block;font-weight:700;font-size:18px;line-height:18px;color:#fff;text-decoration:none}.header__phone:hover{color:#c70101}.header__contact{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.button{margin-top:4px;width:153px;height:32px;background-color:#c70101;border:none;border-radius:5px;font-weight:500;font-size:12px;line-height:19px;color:#fff;text-align:center;text-transform:uppercase}.button_main{width:303px;height:54px;font-size:16px;line-height:25px;margin-top:67px}.button_submit{width:100%;width:303px;height:58px;background:#c70101;font-size:16px;line-height:25px;color:#fff;text-transform:uppercase}.advantages{background-color:#f6f6f6;padding:61px 0 65px 0}.advantages__items{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-flow:row wrap;flex-flow:row wrap;-ms-flex-pack:distribute;justify-content:space-around;margin-top:30px}.advantages__item{width:250px;text-align:center;margin:0 auto;margin-top:30px}.advantages__subheader{font-weight:700;font-size:18px;line-height:29px;margin-top:35px}.advantages__text{font-weight:300;font-size:14px;line-height:18px;margin-top:20px}.advantages__text a{color:#c70101;font-weight:700}.consultation{min-height:680px;padding:100px 0 92px 0;background-image:url(/../img/), url(/img/bg2.jpg);background-repeat:no-repeat;background-position:center}.consultation__descr{font-size:20px;line-height:30px;font-weight:500;color:#fff;text-align:left}.title{font-weight:700;font-size:30px;line-height:30px;color:#000;text-align:center;text-transform:uppercase}.title_left{text-align:left;font-size:36px;line-height:54px;color:#fff}.feed_form{margin-top:36px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;width:300px}.feed_form input{height:50px;border-radius:5px;background-color:#fff;margin-bottom:15px;border:none;padding:0 20px;font-weight:300;font-size:14px;color:#4b4b4b}.feed_form input:nth-child{margin-bottom:20px}@media(max-width:1200px){.promo__wrapper{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;text-align:center}}@media(max-width:991px){.header{-ms-flex-pack:distribute;justify-content:space-around}.header__logo img{width:80%}.header__official span{font-size:16px}.header__contact .button{width:130px}.header__phone{font-size:16px}.promo__header{font-size:38px}.promo__subheader{font-size:20px}.promo .button_main{width:260px}.promo__link{font-size:14px}.consultation .title_left{text-align:center}.consultation__descr{text-align:center}.consultation .feed_form{margin:0 auto;margin-top:36px}}@media(max-width:767px){.header__phone{display:none}.header button{display:none}}@media(max-width:575px){.header{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.header__logo{width:200px}.header__official{font-size:10px}.header__official span{font-size:14px}.promo{height:420px;padding:21px 5px 20px 5px}.promo__header{margin-top:70px;font-size:30px}.promo__subheader{margin-top:5px;font-size:16px}.promo__icons{display:none;margin:0}.promo .button_main{font-size:14px;margin-top:47px}.promo .button{width:220px}.title{font-size:26px}.consultation{padding-top:60px}.consultation .title_left{line-height:30px}}@media(max-width:370px){.header__logo{width:100%}.header__logo img{display:block;margin:0 auto;width:160px}.header__official{display:none}.promo{padding:21px 8px 25px 8px}.promo__header{font-size:26px}.promo__subheader{font-size:14px}.promo .button_main{margin-top:35px}.title{font-size:22px}}
  • Related