Tornado: linking a URL within an external CSS stylesheet

When working with tornado's html template, it is recommended to use static_url instead of hard-coding the path for static files. For instance,

 <link rel="stylesheet" type="text/css" href="{{static_url("css/frontpage.css")}}">    

However, I encountered an issue when trying to implement a similar approach in an external "frontpage.css" file:

body { 
background-image: static_url("img/bgimg.jpg");
background-repeat: no-repeat;} 

Although I can simply hard-code the path as "/static/img/bgimg.jpg", I believe there should be a more elegant solution to this problem. Any suggestions on how to handle this would be greatly appreciated!

Answer №1

If the url in your css is set as a relative url, you should be in good shape since it will be relative to the css file itself. The purpose of using static_url in the html template is to allow for easy relocation of static assets to a CDN or another web server, thus avoiding serving them directly from the tornado instance.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Process the HTML content in PHP only after it has finished loading

When attempting to parse an HTML page using PHP with DOMDocument, I encountered an issue where a javascript on the page was updating an element after the DOMDocument loaded the page. This resulted in parsing the HTML before the elements were fully update ...

The Bootstrap nav-justified feature fails to utilize the entire width available

Have you heard of the bootstrap-4 class called nav-pill? It's meant to make links have equal width and occupy all horizontal space. To achieve equal-width elements, simply use .nav-justified, as suggested. This will ensure that nav links take up al ...

What is the best way to transfer text from a paragraph element to an input field without triggering a page refresh?

I have a challenge where I want to replicate the content of a <p> element into an <input> element's value attribute. The text within the paragraph includes values like .30, .31, .6, .38, which are dynamically updated by a jQuery script wi ...

What could be the reason my code isn't successfully performing addition within the input field?

As a novice, I am practicing by attempting to retrieve a number from a text field, prompting the user to click a button that adds 2 to that number, and then displaying the result through HTML. However, I keep encountering an issue where NaN is returned whe ...

Vue.js framework is experiencing an issue where button click events are not firing as expected

I am working with two files here. One is an HTML file that contains the button definition, and the other is a JavaScript file that implements the button event using the Vue.js framework. The concept behind this example is that when the button is clicked, a ...

The background-clip property in CSS3 is failing to apply to borders with a transparent

I am currently learning how to create transparent borders by following the tutorial on CSS-Tricks website. Unfortunately, my code is not producing the desired transparent border effect. I have double-checked my code and everything seems correct to me. For ...

The display of the Myriad Pro font is not appearing correctly

I incorporated the Myriad Pro font into my website by uploading it to the server and providing a link as shown below @font-face{ font-family: "Myriad-Pro"; src: url(http://www.anaveer.in/honda/font/MYRIADPRO-REGULAR.OTF) format("truetype"); } H ...

Send a collection of list items from the client to a Spring MVC controller

Is it possible to send a dynamically changing list of values to a Spring controller in a submission? I came across a solution on this page, but it only seems to work with input fields since you can't assign a name attribute to the li tag. <ul id=" ...

Responsive resizing problem encountered with Bootstrap Navigation Bar

<nav class="navbar navbar-expand-md fixed-top whitelight nav-masthead"> <a class="navbar-brand gold-text" href="companyName.php">Company Name</a> <!--Creates a clickable button with a toggle icon once ...

One way to trigger the same modal to open when clicking on a shared class using jQuery

I need some assistance with opening a model upon clicking the same link. Currently, when I click on the link, only the backdrop briefly appears and then the page reloads. Any help would be greatly appreciated. Thank you in advance. Below is the code snipp ...

Using Reactjs: How do you insert HTML code into the primaryText of a list item?

Is it possible to include a span element inside a ListItem like so: <ListItem primaryText={"<span class='inner'>Some important info</span>" + item.title} /> When I view the rendered content, the output is not an HTML span ...

triggering php object on mouse hover

I'm currently working on creating a mouseover effect for my PHP elements within a store. My goal is to have a transparent div appear over the dynamically generated PHP sections. I have set it to display block mode to test its functionality and positio ...

Tips for setting up an automated system to check feeds

While I have experience parsing and setting up databases in PHP, I am now faced with the challenge of constantly monitoring an XML feed for a specific string within one of the tags. Each time this string is detected, I need to add the entire XML item (incl ...

Tips for showcasing my website metatags effectively for SEO purposes

I've encountered an issue, After updating my website across all search engines, I noticed that it is displaying my web hosting metatags instead of my own. For example: Domain Default page Welcome to Parallels! If you are seeing this message, the we ...

The ::before pseudo element is malfunctioning when used in the makeStyles function

I am currently utilizing the makeStyles function in React, but I seem to be facing an issue where the content within the ::before pseudo-element is not displaying. Strangely enough, when the content is an image it works fine, but text does not render. Jus ...

Error: An uncaught exception occurred when trying to access a seekable HTML5 audio element, resulting in an IndexSize

While trying to utilize the HTML5 API along with SoundManager2, I encountered an issue. My goal was to determine the duration of a song in order to create a progress bar that would update as the song played. However, every time I attempted to retrieve the ...

What steps can I take to ensure these three images all have identical height and width?

Just starting out with Bootstrap 4 and I have a question about making images inside a card the same height and width. Can anyone help me figure out which div to input an attribute to achieve this? Here's the HTML code below the image: <link href ...

Tips for adjusting the orientation of photos as you reposition your iPhone in an iOS application

Does anyone have suggestions on how to incorporate this? I built my app with cordova 4.0.0 and used JavaScript, HTML, and CSS. ...

What are some tips for improving the smoothness and efficiency of my CSS @keyframes animation on SVG elements specifically in Firefox?

I noticed that this particular animation is causing high CPU usage on all browsers, although it runs more smoothly in Chromium. Is there a way to optimize its performance? Here's the SCSS code which is relatively simple: @keyframes laptop { from { ...