Karaethon Posted June 20, 2019 Share Posted June 20, 2019 I have a bakground-image problem, If I put the image info in my external style sheet nothing will appear in the browser but if I cut&paste it into the body tag it works perfectly. NO CHANGE IN CODE! <body class='startup body' style='background-image: url("./img/coins.png"), url("./img/coins.png"); background-attatchment: scroll; background-position: left, right; background-size: 10vw; background-repeat: repeat-y; background-color: black;'> Works perfectly but.. body{ background-image: url("./img/coins.png"), url("./img/coins.png"); background-attatchment: scroll; background-position: left, right; background-size: 10vw; background-repeat: repeat-y; background-color: black; } Does not. WHY?!? ARGHHH Can anyone explain or figure out if I'm doing something wrong? Quote Link to comment Share on other sites More sharing options...
requinix Posted June 21, 2019 Share Posted June 21, 2019 You're using a relative URL. Don't do that. They're relative. Use an absolute URL. Quote Link to comment Share on other sites More sharing options...
Karaethon Posted June 21, 2019 Author Share Posted June 21, 2019 Ok, tried that, it didn't change anything... So why not use relative URLs? I was always told that relatives are best when they're URLs... it makes for a whole lot of extra typing to type the full url in every call and if I change domains... yikes! Quote Link to comment Share on other sites More sharing options...
gizmola Posted June 21, 2019 Share Posted June 21, 2019 Remove the period from in front of your relative paths. The location of the files should be relative to your site document root. 1 Quote Link to comment Share on other sites More sharing options...
Karaethon Posted June 21, 2019 Author Share Posted June 21, 2019 Ok, that worked? So why does the period need to be in the inline but not the external? Quote Link to comment Share on other sites More sharing options...
gizmola Posted June 21, 2019 Share Posted June 21, 2019 I don't know that you ever need to use a period. Like all file system related files, a period is relative to the current working directory. If that is truly what you wanted then you can just omit the leading slash. These are equivalent: Quote url("./img/coins.png") and url("img/coins.png") In most cases, css, js, images and the like are deployed to a specific set of directories relative to the document root, so it removes confusion to always reference these files using "/img...", "/css...", "/js..." etc. Quote Link to comment Share on other sites More sharing options...
cyberRobot Posted June 25, 2019 Share Posted June 25, 2019 On 6/21/2019 at 9:26 AM, Karaethon said: Ok, that worked? So why does the period need to be in the inline but not the external? I'm guessing that your external style sheet is stored in a different directory than the page where you used the inline style. The period technically works in both external style sheets and inline with the code. Just be aware that the period is relative to the document where they are used. For example, lets say your website structure looks like the following: Website root folder inc stylesheet.css img coins.png index.php Using "./img/coins.png" in your index.php file works. However, using that same code in stylesheet.css will not work because the browser is looking for an "img" folder within the "inc" folder. If you really want to use relative links, you would need to change stylesheet.css to "../img/coins.png" so that it's looking for the "img" folder in the parent directory. With that said, this gets much easier (and cleaner) with using root-relative links (e.g. "/img/coins.png"). Root-relative links start with a slash. Then if you ever move your CSS files or pages with inline styles, you don't need to worry about things like image links breaking. Quote Link to comment Share on other sites More sharing options...
Karaethon Posted June 25, 2019 Author Share Posted June 25, 2019 AHHHHHH! I see now! Thank you for the explanation, I was getting confuddled on why sometimes it works and others dont... ok, gonna have to get rid of the (dot) habit. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.