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 (https://github.com/mrfrankyn/mrankyn.github.io).
P.S. I get it, that the problem is with the path of the image, but I tried a lot of other variants of paths.
One of the variant:
url(/img/background_first.jpg)
Thanks!
I found the problem! In this project, there was also style.min.css file and it needed to be edited.
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}}
Try this code:
.promo {
height: 650px;
padding: 21px 0 93px 0;
background-image: url(../img/background_first.jpg);
background-repeat: no-repeat;
background-position: center;
}
Related
I am trying to place a menu icon on my webpage. On my CSS document I use the following code:
.nav-menu-btn{
background: url(../images/menu-btn.png)no-repeat;
filter: var(--color-filter);
background-size: 30px;
background-position: center;
width: 40px;
height: 40px;
cursor: pointer;
display: block;
}
I have my css document in a different folder within my project folder, as well as a seperate folder for my images. Any ideas?
I have tried moving the image to my main project file, and every combination of quotes "", and single quotes '' that i can think of. I have also tried using background-image: url(); instead, but nothing has produced any different results
I believe if I'm seeing this right you are missing double quotation marks inside your url. Try below if that works and let me know. If this doesnt works maybe you are using a wrong path Try to use your website path and see if that works. Please provide your folders on your server how it looks like so everyone can see.
.nav-menu-btn{
background: url("https://yourwebsite.com/images/menu-btn.png")no-repeat;
filter: var(--color-filter);
background-size: 30px;
background-position: center;
width: 40px;
height: 40px;
cursor: pointer;
display: block;
}
I created my portfolio on Gitlab Pages. My style.CSS work partially. background-image: url(..) doesn't display in navigator. However, everything else seems to be working.
My content is in public/img/.png
I tried :
url(/img/.png);
url(public/img/.png);
url(/public/img/.png);
You can check my code here : https://medjaherirany.gitlab.io/resume/
Edit: I went into your code on the inspector, use background-image: url("../img/portrait0.png"); and it works. I will include a screenshot. This is used to go backwards in the directory.
I hope this helps.
As I can see in your CSS file you have used
figure {
background: url(/img/portrait0.png);
background-repeat: no-repeat;
background-position: 80% 111px;
height: 727px;
background-size: 690px;
background-color: #f2f2f2;
}
Change it to
figure {
background: url("img/portrait0.png");
background-repeat: no-repeat;
background-position: 80% 111px;
height: 727px;
background-size: 690px;
background-color: #f2f2f2;
}
Here actually your CSS says to look for img directory in the parent directory of "https://medjaherirany.gitlab.io/"
But your code is in https://medjaherirany.gitlab.io/resume That's why the browser was searching for "https://medjaherirany.gitlab.io/img/portrait0.png"
But actually it is in "https://medjaherirany.gitlab.io/resume/img/portrait0.png"
Here I changed the URL of background image and I got the image working.
Hope this helped you. Feel free to ask any further doubts.
Happy Coding
For my portfolio site, I had a gif for my background image. It was fine for a few weeks, but now it has stopped working. I tried putting in a different GIF. It looks fine on my local machine, but when pushed up to my host, it no longer works. Not sure what the problem is for it to show up on my computer but not when it's hosted.
When it's working properly on my machine - see the triangles?
When it's not working on the actual website
The site is hosted at http://www.KimberlyScarabello.com.
I'm fairly certain I'm updating the files correctly, because other changes are showing up just fine. This is the CSS that I'm using. I have already tried saving the gifs to my local machine and putting the file path in the url, but that didn't work (though it also works on my machine).
#wrapper > .bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #212931;
background-image: url('https://media.giphy.com/media/xTg8BbPcaAP43oVyeY/giphy.gif'), linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1));
background-size: cover, auto, 100% auto;
background-position: center, center, top center;
background-repeat: repeat, no-repeat, no-repeat;
background-attachment: scroll, scroll, scroll;
z-index: -1;
filter: brightness(10%)
}
It's working fine for me.
This will most likely be caused by your cache. Whenever you have issues like this, just hard reload your site using ctr+f5 (cmd+shift+r for mac I think?). Let me know if that doesn't work for you.
Hello I have been trying to fix this issue all day. With Chrome's latest release
Version 53.0.2785.116 m
The svg sprites I had been using no longer appear. They appear in their correct positions in firefox and ie with no issues.
I looked at the release notes and could find nothing mentioning SVG. I really don't know how to remedy this problem since they show on all other browsers. Does any one have any clue?
Here is the some code I'm using for reference
&.ico-nav {
width: 60px;
height: 60px;
border: 2px solid #eia_green;
border-radius: 100%;
float: left;
margin: 0 15px 15px 0;
background: url(../images/global-nav-icons.svg) no-repeat;
background-size: 1700% 1700%;
/*Sources and Uses Menu*/
&.petro {
background-position: -20px -225px;
}
&.natural {
background-position: -20px -330px;
}
&.elec {
background-position: -20px -430px;
}
&.con {
background-position: -20px -530px;
}
&.coal {
background-position: -20px -635px;
}
&.renew {
background-position: -20px -735px;
}
I also have used the symbol and defs method for calling SVG inline and that has not worked either.
I have played around with dimensions and have gotten a icon to show but not with out truncating the sprite itself which has about 80 icons in total on it.
Any help is appreciated.
EDIT-----------------------------!
This issue appears to be related to SVG and border radius. My SVGs look normal on Chrome Canary (Beta) and hopefully the change is coming down the pipeline.
Here is a chromium bug that was related to my issue so the devs at Chrome are aware!
Hope this helps anyone experiencing anything similar.
https://bugs.chromium.org/p/chromium/issues/detail?id=643623
Something weird started happening to me today - when changing the HTML/CSS of my Backbone Marionette Rails app the changes no longer seem to be propagating in my app. It seems like there's some sort of weird caching going on. Has anyone run into this before? If I rake assets:clean it doesn't seem to update the javascript changes, just the css.
Does anyone know how to force the assets to be reloaded on each GET request in development?
Thanks in advance!
EDIT:
I'd also point out that I've tried re-starting my server and restarting my computer but the changes still don't seem to propagate. Example, in my CSS folder I changed the padding from padding: 20px 10px 20px 10px; to 20px 0px 20px 0px
#free-text-answer {
border-radius: 4px;
margin: 10px 20px 20px 20px;
background: #EEE;
border: 1px dashed #DDD;
padding: 20px 0px 20px 0px;
text-align: center;
color: #666;
}
but inspecting the element it still shows padding: 20px 10px 20px 10px;
Ok I think I finally fixed it. I deleted the public/assets folder and set this in my development.rb file:
config.serve_static_assets = false