Having trouble with implementing a static URL in CSS

I'm struggling to incorporate a static file into my CSS as a background image for my website. The static URL is functioning properly when tested in HTML, but it's not working when implemented in CSS.

HTML:

{% extends 'base.html' %}

{% block body %}
    <div class ='splash'>
        <a href="{{ STATIC_URL }}background.JPG"> check me out </a>
        </div>

{% endblock body %}

CSS:

.splash{
    background-image: url("{{ STATIC_URL }}background.JPG");
    background-size: 100%;
    height: 1000px;
}

NOT WORKING

TEST CSS:

.splash {
    background-image: url("http://127.0.0.1:8000/static/background.JPG");
    background-size: 100%;
    height: 1000px;
}

WORKING

Any suggestions on how to get the static URL to function properly?

cssdjango

Answer №1

When using Django, the css file may not be processed directly. Instead, in a production server, it is common for it to be served by nginx or apache.

To work around this issue, consider using relative paths.

If your css file and background image are in the same directory, simply reference the image like this:

.splash {
    background-image: url("background.JPG");
}

You can also use the full URL:

.splash {
    background-image: url("/static/background.JPG");
}

In cases where you have a directory structure like this:

|static
|--css
|--img

You can specify the path like this:

.splash {
    background-image: url("../img/background.JPG");
}

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

I am struggling to decide which attribute to use for implementing image swap on mouseover() and mouseout()

I have a problem using jQuery to switch between images when hovering on and off. Here's the code snippet I'm working with: HTML <img class="commentImg" src="images/comments.png" data-swap="images/comment_hover.png" alt=""> jQuery $(" ...

javascriptjqueryhtmlcssattr

Having trouble with images not showing up on React applications built with webpack?

Hey there! I decided not to use the create react app command and instead built everything from scratch. Below is my webpack configuration: const path = require("path"); module.exports = { mode: "development", entry: "./index.js", output: { pa ...

javascripthtmlcssreactjs

Is there a way to overlay a div on a particular line within a p element?

Within this paragraph lies a collection of text encapsulated by a < p > tag. When this content is displayed on the page, it spans across 5 lines. My objective is to creatively style and position a < div > tag in order to highlight a specific li ...

javascriptjqueryhtmlcss

The most effective method for incorporating a header and footer into an HTML page utilizing a variety of client-side frameworks

Looking for a solution for my HTML project where I want to incorporate a header and footer to minimize rework. Any suggestions on a good approach? I have experimented with AngularJS using ng-include, and here is the code snippet: var app = angular.module ...

javascripthtmlcssangularjs

Is there a way to merge attribute selectors for elements that satisfy one condition or the other?

Is there a way to combine selectors effectively? <input type=number> <input type=date> I was able to successfully hide the arrows in a number field with the following code: input[type=number]::-webkit-inner-spin-button, input[type=number]::- ...

htmlcsscss-selectors

Exploring the process of iterating through Django form errors post-receiving them in JSON format via AJAX

Everything seems to be working fine with my signup form, as it saves users correctly without any errors. However, I am facing an issue when trying to display errors related to form field validation. Despite retrieving the errors using form.errors.as_json, ...

jqueryjsondjangoajaxdjango-views

Strategies for positioning a fixed div at the bottom of another div

I'm in the process of creating a digital restaurant menu... I decided to format it as a popup, situated within a fixed container on top of a gray transparent overlay. However, with a large number of dishes, the content exceeds the size of the containe ...

htmlcssscrollpopupcss-position

Steps for rearranging the order of CSS grid layout

Could you assist me in implementing a grid layout that fulfills these specific criteria? I'm unsure of how to proceed, so any guidance would be greatly appreciated. When there are more than 9 items, the current layout changes the order from top to bo ...

javascripthtmlcssvue.js

Could the difficulty in clicking the first entry in Firefox be a bug?

Be sure to focus on the section highlighted in blue in the initial table. If you'd like, you can view the issue here view image http://example.com/static/error.gif UPDATE you can replicate it by double-clicking on the top portion of the first entry ...

htmlcssfirefoxcss-float

I am able to retrieve JSON data from the server using Angular, however, I am facing an

I have successfully accessed JSON data from the server, but I am struggling to display it properly. Currently, I can only show all models, but I want to display specific data. My template <!DOCTYPE html> <html> <head lang="en"> ...

jsondjangoangularjs

In order to enhance user experience, I would like the tabs of the dropdown in the below example to be activated by

function openCity(evt, cityName) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } ...

javascripthtmlcss

Exploring the art of styling in Angular6

I am looking to change the text color when a specific ID is clicked <nav class="navbar "> <ul class="navbar-nav"> <li *ngFor="let item of items"> <a class="nav-link" >{{item.title}}</a> ...

cssangularhtml

Turn off the CSS hover effect for a custom button if the ng disabled attribute is set to true

My goal is to disable custom buttons, and the disable(pointer) function is working correctly. The issue arises when we try to hover on the button, as the hover effect still works. I therefore need to disable hover as well. I am looking to apply ng-disabl ...

jqueryhtmlcssangularjs

The overflow property is not functioning as anticipated

I've browsed Google and this site, but I couldn't find a solution to my issue. On my webpage, I have a shoutbox and a teamspeak viewer with a specific height for the outer div. The scrollbars don't look good on our new design, so I attempt ...

htmlcssscrollbaroverflow

What is the most effective way to extract information from a .txt file and showcase a random line of it using HTML?

As a newbie in HTML, my knowledge is limited to finding a solution in C#. I am attempting to extract each line from a .txt file so that I can randomly display them when a button is clicked. Instead of using a typical submit button, I plan to create a custo ...

javascriptjqueryhtmlcss

Unexpected issue with Django serializer omitting certain fields in response

In my Django application, I have a serializer that is not returning all the fields in the response. Specifically, 'amount' and 'ordered_amount' are missing, while all other fields are present. It's important to note that these two ...

pythondjango

When using the `position: absolute` and `left: 50%` properties on content with a `width: fit-content`, the content gets wrapped in Windows,

Why does the below code behave differently on Windows and Mac? On Windows, the content wraps or the div occupies only 50% of the browser's width, causing the content to wrap if its width exceeds 50% of the browser's width. However, on Mac, it tri ...

csswindowsmacos

Tips for changing the dimensions of the canvas?

I'm struggling to display a photo captured from the webcam. The sizes are not matching up, and I can't pinpoint where the size is defined in the code. https://i.stack.imgur.com/Is921.png The camera view is on the left, while the photo should be ...

javascripthtmlcss

The setting "break-word" within word warp attribute isn't effective for formatting my text

Here is the CSS code that I am using: .SubjectCell{ width: 300px; padding-left: 3em; padding-right: 2em; color: black; font-size: 20px; word-wrap:break-word; } I have applied this class to a table cell within a table in my datalist: <td class ...

css

What is the best way to line up changing column values with changing row values in an HTML table?

In its current state, the data appears as follows without alignment: The data columns are housed within a single variable due to the presence of multiple excel tabs with varying columns. Within the tr tag, rows are checked to match specific columns. The ...

htmlcssangularhtml-table