0

Tengo una clase recommendations para cual me gustaria puestar una imagen en el background. Entonces intenté en result.html:

{% extends "todo/base.html" %}

{% block content %}

<body>

<div class="recommendations">
  <!-- Recommendation -->
  <h3> Based on what you like, we found 5 perfumes which match you the best: </h3>
</div>
</body>

{% endblock %}

y en base.html:

{% load static %}

<!DOCTYPE html>
<html lang="en">

  <head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>ScentMate Perfume Recommender</title>

    <!-- Bootstrap core CSS -->
    <link href="static/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom fonts for this template -->
    <link href="static/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Cormorant:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Allura" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Alex+Brush" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link href="static/css/style.css" rel="stylesheet">

  </head>
</html>

Que me puede utilisar styles.css donde hay:

.recommendations {
  padding-top: 10%;
  background: url(../img/intro-bg.jpg) no-repeat center center;
  background-size: cover;
}

Pero este imagen no se muestra en el rendering

introducir la descripción de la imagen aquí

Sin embargo funciona con la clase intro-header en un altro archivo html:

  <!-- Header -->
  <header class="intro-header">
    <div class="container">
      <div class="col-lg-5 mr-auto order-lg-2">
      <h3><br>Tell me something about you... </h3>
      </div>
    </div>
  </header>

Aqui esta la parte de styles.css relacionada:

.intro-header {
  padding-top: 50px;
  padding-bottom: 50px;
  text-align: center;
  color: #f8f8f8;
  background: url(../img/intro-bg.jpg) no-repeat center center;
  background-size: cover;
}

Y el resultado:

introducir la descripción de la imagen aquí

Aqui esta lo que me devuelve el compilador:

C:\Users\antoi\Documents\Programming\Learning\Django\scentmate>python manage.py runserver
Watching for file changes with StatReloader
Performing system checks...

System check identified no issues (0 silenced).
February 18, 2021 - 17:29:41
Django version 3.1.1, using settings 'scentmate.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CTRL-BREAK.
[18/Feb/2021 17:29:54] "GET /quiz HTTP/1.1" 200 12572
<WSGIRequest: POST '/getmatch'>
result:  ['Elegant', 'Luxueux']
[18/Feb/2021 17:30:04] "POST /getmatch HTTP/1.1" 200 5949
Not Found: /img/phones.png
[18/Feb/2021 17:30:04] "GET /img/phones.png HTTP/1.1" 404 3809

Los errores con /img/phones.png no estan relacionados.

1
  • Los motivos pueden ser muchos, por ejemplo, que tengas un error de sintaxis en el archivo styles.css, o que tengas otra clase que sobre-escribe el estilo, etc. ¿tendrás un link donde podamos ver el error? o un ejemplo mínimo verificable
    – Marcos
    el 17 feb. 2021 a las 17:11

1 respuesta 1

-1

Prueba poniendole a la clase .recommendations un width y un height. O poniendo paddings en pixeles/rems

0

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.