I’m trying to put a background image using style.css but it doesn’t load the image
style.css
.imagen-inicio {
background: url('{% static "../img/inicio-gb.jpg" %}') 50% 0 no-repeat fixed;
object-fit: fill;
}
inicio.html
{% extends 'core/base.html' %}
{% block title %} Inicio {% endblock %}
{% load static %}
{% block content %}
<div class="container">
<div class="imagen-inicio">
</div>
</div>
{% endblock %}
any suggestions
Provided your static files are set up properly in settings.py and urls.py and your directory is set up like this (for the dot dot notation):
| static
----| css
----| img
Then my impression is you may need to give the div a height/width. Currently it looks to be setting the background of an empty div with no dimensions.
Are you rendering this style.css file, or is it a file being loaded by reference in the html?
If you’re not rendering that file, then the {% static %} tag is meaningless.
(You’re not showing anywhere where style.css is referenced at all.)
file configure
settings.py
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/5.1/howto/static-files/
STATIC_URL = 'static/'
modify my style.css
.imagen-inicio {
background-image: url('../img/inicio-gb.jpg') 50% 0 no-repeat fixed;
object-fit: fill;
}
inicio.html
{% extends 'core/base.html' %}
{% block title %} Inicio {% endblock %}
{% load static %}
{% block content %}
<div class="container">
<div class="imagen-inicio">
</div>
</div>
{% endblock %}
But No upload image
Yes, and where/how is this style.css file being sent to the browser?
Please do not post images of code, templates, error messages or other textual information. Copy/paste the text into your post.
If it’s preformatted text like code, surround the text between lines of three backtick - ` characters. This means you’ll have a line of ```, then the code (or template, etc), then another line of ```. This forces the forum software to keep the text properly formatted.
OK, Sorry.
In my Base.html load my style.css
{% load static %}
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %} {% endblock %} | Hasa Inmobiliario</title>
<link rel="stylesheet" href="{% static 'core/vendor/bootstrap5.3/css/bootstrap.min.css' %}">
<link rel="stylesheet" href="{% static 'core/vendor/bootstrap-icons-1.11.3/font/bootstrap-icons.css' %}">
<link rel="stylesheet" href="{% static 'core/css/style.css' %}">
</head>
This shows that you should see a request in your server for this file in the logs. Do you have this request?
Also, is this in your development environment using runserver, or is this happening in your production environment with a real web server?
Yes in tha console show me this:
[11/Feb/2025 18:34:51] "GET /static/core/css/style.css HTTP/1.1" 304 0
[11/Feb/2025 18:34:53] "GET /nosotros/ HTTP/1.1" 200 4368
[11/Feb/2025 18:34:54] "GET / HTTP/1.1" 200 4351
[11/Feb/2025 18:37:02] "GET / HTTP/1.1" 200 4351
[11/Feb/2025 18:37:02] "GET /static/core/css/style.css HTTP/1.1" 304 0
The 304 response code means that your browser is using a cached version.
Clear your browser’s cache, or use Shift-F5 to reload the page, or open up a private/incogito window and try again.
Clear my browser and restart django, show me this message in console
[11/Feb/2025 18:46:26] "GET / HTTP/1.1" 200 4351
Not Found: /favicon.ico
[11/Feb/2025 18:46:27] "GET /favicon.ico HTTP/1.1" 404 3203
[11/Feb/2025 18:47:08] "GET / HTTP/1.1" 200 4351
[11/Feb/2025 18:47:08] "GET /static/core/css/style.css HTTP/1.1" 304 0
Thanks you @KenWhitesell clear cache of my browser the image load, But how to redeem the size?
I’m sorry, I’m not understanding what you’re asking for here - what is it that you’re trying to do?
How to reduce image size ?
Reduce the image size?
The file name looks like it’s a jpg, so you could probably use any image editor such as Paint or GIMP.
Thank you @KenWhitesell