发表新帖
发表新帖

How to refer to static files in my css files?

后端 未结
关注
8 1743
醉话见心
醉话见心 2020-12-24 11:19

I have a reference inside my CSS file that refers to a static image: 

#logo
{
  background: url(\'/static/logo.png\')
}

This works just fi

相关标签:
8条回答
  • 无人共我
    2020-12-24 11:30

    Use a relative path. Relative to the folder where the css file reside

    0 讨论(0)
  • 傲寒
    2020-12-24 11:36

    If you want to use {% static %} tag in your CSS file, you should use {% include %} tag. Here is an example to do so:

    foo.html

    {% load static %}
{% load i18n %}
{% load widget_tweaks %}

<!DOCTYPE html>
<html>
<head>
    <style>
        {% include "path/to/custom_styles_1.css" %}
    </style>
    <link rel="stylesheet" href="{% static 'css/custom_styles_2.css' %}">
</head>
<body>
<!-- Your HTML body -->
</body>
</html>

    custom_styles_1.css

    {% load static%}

{
     background: url('{% static "/img/logo.png" %}')
}

    custom_styles_2.css

    .fa {
    position: relative;
    text-align: center;
    font-family: BTitrBold;
    font-size: 3.5em;
}

.name {
    position: absolute;
    top: 37%;
    right: 15%;
}

.school {
    position: absolute;
    top: 530px;
    right: 200px;
}

.id {
    position: absolute;
    top: 700px;
    right: 200px;
}

.degree {
    position: absolute;
    top: 740px;
    left: 195px;
}

    custom_styles_1.css is the CSS file that includes {% static %} tag. You should integrate it with your foo.html file with {% include %} tag. In this way, Django will put all the styles you need at the appropriate place and render the static tags correctly.

    custom_styles_2.css is a normal CSS file located in STATIC_ROOT directory, so you can use {% static %} tag for it without any problem.

    0 讨论(0)
  • 臣服心动
    2020-12-24 11:36

    If you're using django-libsass to generate your css, you can use custom functions to bridge django and the sass precompiler.

    As a matter of fact, the function static is already implemented, and you can use it:

    .foo {
    background: url(static("myapp/image/bar.png"));
}

    as described here: https://github.com/torchbox/django-libsass#custom-functions

    0 讨论(0)
  • 栀梦
    2020-12-24 11:43

    If your images aren't too big you can use data URIs, which can be embedded right in the css file without any links. They look like this:

    .box-with-background {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgI=')
  background-repeat: repeat;
}

    Usually they're a bit longer then the one I've shown. You can generate them with javascript and you can find some online generators.

    0 讨论(0)
  • 别跟我提以往
    2020-12-24 11:47

    There might be a way to get django to treat the CSS file like a template (I'm not very familiar with django) but you might want to try a different solution instead: use a dynamic stylesheet language such as LESS or Sass. With LESS it would be as simple as

    @base: "//static.example.com/"

#logo {
    background: url(%("%s/logo.png", @base))
}
    0 讨论(0)
  • 死守一世寂寞
    2020-12-24 11:52

    You can move any CSS that contains static file paths to inline CSS, contained in the template.

    i.e.

    <div style="background: url('{% static 'logo.png' %}')"></div>

    The catch here is that it won't work for @media queries, you'd need to put those in a block, e.g.

    <style>
    @media (min-width: 1200px){
       background: url('{% static 'logo.png' %}');
    }
</style>
    0 讨论(0)
 看不清?
提交回复
热议问题