Jump to content
Karaethon

background-image failure

Recommended Posts

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? 

Share this post


Link to post
Share on other sites

You're using a relative URL. Don't do that. They're relative.

Use an absolute URL.

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

Remove the period from in front of your relative paths.  The location of the files should be relative to your site document root.  

  • Thanks 1

Share this post


Link to post
Share on other sites

Ok, that worked? So why does the period need to be in the inline but not the external?

Share this post


Link to post
Share on other sites

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.

 

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.