Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 3 days ago.
Improve this question
When i use the live server in VS Code everything works as expected, however when I open the site via files it doesn't show certain elements. I've noticed that it's the ones that require linking to other files. For example #font-face and background-image: url()
I've tried restarting my PC thinking that it just didn't load or something but that wasn't the case. The files and paths are structured correctly since it works in live server mode so I doubt that that's the problem
Heres parts of code that are most likely problematic and screenshots of file vs. live server
#font-face {
font-family: Raleway;
src: url(/fonts/Raleway-Medium.ttf);
}
main{
background-image: url('/img/pozadina.png');
background-repeat: no-repeat;
background-position: center;
}
Live server
HTML file
Try to add dots (.) before folders in path
#font-face {
font-family: Raleway;
src: url(./fonts/Raleway-Medium.ttf);
}
main{
background-image: url('./img/pozadina.png');
background-repeat: no-repeat;
background-position: center;
}
I found the solution, instead of adding one dot i had to add two. Now it works for both, browser file protocol and live server.
#font-face {
font-family: Raleway;
src: url(../fonts/Raleway-Medium.ttf);
}
main{
background-image: url('../img/pozadina.png');
background-repeat: no-repeat;
background-position: center;
}
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 months ago.
Improve this question
body {
background-image: url('./circle.svg');
}
straight up not working for me.
Are you sure the SVG is in the right directory? try placing it in the same directory as your style.css and adding background-size: cover;
If your SVG is in the same directory as your css this should work:
body {
background-image: url('circle.svg');
background-size: cover;
}
If your SVG is in the parent directory of your style .css make sure the url() has ../ infront of it.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 9 months ago.
Improve this question
I can't seem to get any font to work. It was working originally, but I did something and now can't get it back. The error I get in JSFiddle is "Unexpected missing generic font family".
body {
background-color: #ffffff;
font-family: Aldhabi;
}
You need to import it first to your css by using #import then you can use it.
#import url('http://fonts.cdnfonts.com/css/aldhabi');
body{
background-color: #ffffff;
font-family: 'Aldhabi', sans-serif;
}
Whenever you want to use a new font-family, you have to import it from Google-fonts.
For example, if you want to import Poppins you have to include this line
`#import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Pacifico&family=Poppins:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto+Slab:wght#100;200;300;400;500;600;700;900&display=swap');`
in the top of your CSS file.
And then use it where ever you want, Like this:
body{
font-family: 'Poppins', sans-serif;
}
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 6 years ago.
Improve this question
I recently changed monitors and now that I'm using a 1920x1080 resolution I've noticed that background-size property is malfunctioning on one of my sites (either that or I've misunderstood how it works for all this time).
The thing is, no matter if I set it to cover nor to 100% 100%. It just will never cover the whole page height (and both html and body tags have min-height: 100vh. I applied a blue background to the body just to check it had the proper size).
The website in question can be found here.
body {
background: url("../resources/images/bg.jpg") fixed;
background-size: cover;
margin: 0;
color: $c-golden-darker;
text-shadow: #1a0e0b 0 0 3px, #1a0e0b 0 0 3px;
font-family: Verdana, Arial;
overflow-y: scroll;
min-height: 100vh;
height: auto;
}
EDIT: After a second look, the image itself is a JPEG so it makes no sense for it to have transparent pixels.
EDIT2: Re-uploading the image to the server somehow fixed the problem.
it's working fine, the problem is in your image which contain an empty space at the end of it.
as you see, I just inspect element and change your image with another and it work fine.
You can also can see the problem of your image here :
your image has grey space in the bottom...
The property background-size is working correctly.
Have a look here:
http://metaltxus.altervista.org/animelist/resources/images/bg.jpg
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 8 years ago.
Improve this question
Hi been trying to get this for quite some time. Ive done it before which is why i feel pretty pathetic for having to ask. The background will not show up.
Im trying to set a background image for my footer and the top menu on my website located HERE
This is my CSS for the Footer:
.blog-footer {
padding: 40px 0;
color: #999;
text-align: center;
background-image: url('./classy_fabric/classy_fabic.png');
border-top: 1px solid #e5e5e5;
}
And here is the CSS for the top nav:
.blog-masthead {
background-image: url('./classy_fabric/classy_fabic.png');
box-shadow: inset 0 -2px 5px rgba(0,0,0,.1);
}
You have fabric mispelled so it can't find it.
http://sadin.me/css/classy_fabric/classy_fabric.png
I found one glitch in you code.
background-image: url('./classy_fabric/classy_fabic.png'); one (.) is missing
background-image: url('../classy_fabric/classy_fabic.png');
I think you just need to move your file into the right directory.
Request URL:http://sadin.me/css/classy_fabric/classy_fabic.png
Request Method:GET
Status Code:404 Not Found
If you're using Chrome, check out the network tab of your debug console for any 404 errors.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
If I inspect the network activity (using Google Chrome inspector) to serve this page I notice a request for a file named close.gif which cannot be found.
The odd thing about this request for a file is first of all that the initiator for the request is listed as "Other" --- in most other cases the initiator is the same domain name as the original request. Next, I grepped the entire source tree and I cant find close.gif anywhere in it.
Any help on identifying what aspect of this static html site is initiating the request for this unknown file is appreciated.
Open the chrome inspector,
click "Elements"
hit [Ctrl]+[F]
type "close.gif"
notice this line:
<div id="template04_close" style="display: none; padding: 0px; position: absolute; left: 163px; top: 0px; width: 20px; height: 20px; background-image: url(http://www.freegold.biz/supreme/close.gif); cursor: pointer; z-index: 10003; visibility: hidden; background-position: initial initial; background-repeat: no-repeat no-repeat;"></div>
especially this part
background-image: url(http://www.freegold.biz/supreme/close.gif);
profit from free gold.
It's loaded in from the ads plugin.