CODEWITHSUNDEEP
htmlcssdjangoimagepath
user3369592
user3369592

Reputation: 1447

background url--image path

i am writing a project in django. i have a css code:

  .featurette1 {
  height: 62px
  width:1030px;
  margin: 100px 0; /* Space out the Bootstrap <hr> more */
  background-image: url("${ STATIC_URL }base_app/images/apple.png");
  background-repeat:no-repeat;
}

I was orignally in my base_template.htm(include between style tags and it worked perfectly fine. But after I move it to base_template.css. the image can not be read. I think I need to change the image path?

my image path is : projectname/base_app Here is all my imports:

at top 
    <%! from base_app import static_files %>
    <%  static_renderer = static_files.StaticRenderer(self) %>
    <link rel="stylesheet" href="/static/base_app/styles/bootstrap.css"/>
    <link rel="stylesheet" href="/static/base_app/styles/base_template.css"/>
at bottom 
${ static_renderer.get_template_js(request, context)  }

Upvotes: 1

Views: 1317

Answers (2)

manosim
manosim

Reputation: 3680

Maybe you should check your project's settings.py and add this:

# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/1.6/howto/static-files/

STATIC_URL = '/static/'
STATICFILES_DIRS = (
    os.path.join(BASE_DIR, "static"),
    '/path/to/project/static/',
)

Then in your template(.html file) try adding:

{% load staticfiles %}
<link href="{% static "base_app/styles/bootstrap.css" %}" rel="stylesheet">

Also in your css you don't need to use STATIC_URL just try:

background-image: url("base_app/images/apple.png");

Finally I think the tutorial on the django website would help you a lot! Have a look at it!

Upvotes: 1

nstCactus
nstCactus

Reputation: 5183

You probably don't need to include ${ STATIC_URL } in your image URL. According to the CSS spec, the path in url() are relative to the stylesheet.

You could probably use something like:

.featurette1 {
  height: 62px
  width:1030px;
  margin: 100px 0; /* Space out the Bootstrap <hr> more */
  background-image: url("../images/apple.png");
  background-repeat:no-repeat;
}

Upvotes: 1

Related Questions