Custom CSS not working

  • Hi All,

    I am converting my static site business in to WP, all going well so far until I discovered that my background images are not displaying. They display if I copy the CCS rules from style.css and drop them in via the ‘Customise’ & ‘Additional CSS’ but it’s not pulling in the CSS from my style.css file. Very strange indeed. Here is my CSS:

    profile-image-me {
  position: relative;
  left: -50px;
  width: 170px;
  height: 170px;
  border: 3px solid var(--primary-color);
  background: url('wp-content/uploads/profile-pic.jpg') no-repeat center center/cover;
  border-radius: 50%;
}
    • This topic was modified 4 years, 2 months ago by bcworkz. Reason: code fixed
Viewing 8 replies - 1 through 8 (of 8 total)

  • I’m surprised that would work at all (unless you mistyped the leading slash of the image URL).
    In CSS, URLs are relative to the stylesheet when it’s external, and relative to the page if it’s not external.
    So the style.css would be in the theme’s folder, and a URL in that file with no leading slash would be under that same theme folder.
    The Custom CSS is added to the page as <style>, so a URL in there with no leading slash would be under that page’s address.

    With WP, if a static HTML file exists (your old site files), those are shown. If you delete them and use the same address in WP, WP handles it (showing it if you created that page in WP or 404 if you did not).

    Thread Starter maccready

    (@maccready)

    Leading slash is a typo. Style sheet has been successfully enqueued. Style sheet is located within the themes folder ‘mysite/style.css’. All other styles are loading correctly.

    How about the leading dot for profile-image-me ? There should be either a dot(for a class) or a hash(for an ID), because there is no HTML tag named profile-image-me.

    Thread Starter maccready

    (@maccready)

    This is the CSS:

    .profile-image-me {
  position: relative;
  left: -50px;
  width: 170px;
  height: 170px;
  border: 3px solid var(--primary-color);
  background: url("img/profile-pic.jpg") no-repeat center center/cover;
  border-radius: 50%;
}

    When placed inside Customizing Additional CSS the images appear. Something is very wrong here, scripts are enqueued correctly.

    • This reply was modified 4 years, 2 months ago by bcworkz. Reason: code fixed

    CSS has nothing to do with scripts being enqueued correctly. The style has to be enqueued in order to be output.
    The CSS you now posted does not have a leading slash for the URL, so if it is in Custom CSS, it will be output with <style> tags and use the page’s URL to be relative to. If your page is domain/pagename then the image would be domain/pagename/img/profile-pic.jpg.

    Hey @maccready,
    Could you share the site/page URL where the issue is faced??

    Thread Starter maccready

    (@maccready)

    Hi,

    Thanks for replying. Issue has been resolved. I double checked the file path to the img folder which was correct. Cleared cache, reinstalled WP and now it’s working.

    Cheers.

    Happy to hear that ??

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Custom CSS not working’ is closed to new replies.