CODEWITHSUNDEEP
pythonhtmlcssdjangodjango-templates
Kartikey
Kartikey

Reputation: 4992

Template Tags not supported in Stylesheets

Suppose I create a stylesheet in Django in static files. So everything else is working fine. Its just that when I use this line, it gives an error

.PostProfilePic {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-image: url('{{ Profile.ProfilePic.url }}');
  background-size: cover;
  background-position: center;
  position: relative;
  top: 5px;
}

Suppose there is a class name PostProfilePic and I want to use an image from the database as my background image. so how can we do it???

Error is on this line

background-image: url('{{ Profile.ProfilePic.url }}');

It says cannot resolve file

And also when I use this style in my HTML page between the tags as shown below then it works completely fine

<style>
  .PostProfilePic {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-image: url('{{ Profile.ProfilePic.url }}');
    background-size: cover;
    background-position: center;
    position: relative;
    top: 5px;
  }
</style>

While making a separate .css file creates trouble...Any Solutions on this??

Upvotes: 1

Views: 146

Answers (1)

AzyCrw4282
AzyCrw4282

Reputation: 7744

This background-image: url('{{ Profile.ProfilePic.url }}'); in an external .css file will not work since django will not render the variables. Note that the url css function should satisy the following constraint

The url() CSS function is used to include a file. The parameter is an absolute URL, a relative URL, or a data URI.

As such it will not display anything since this '{{ Profile.ProfilePic.url }}' doesn't resolve to anything.

The curly braces {{- }} can only render variables in templates, hence the reason why it works in your second attempt as it's an internal definition of CSS within the template.

Upvotes: 1

Related Questions