I have created a flask app that predicts heart disease, but I'm trying to just add a background image using the following code:
body{
background-image:url('https://image.freepik.com/free-vector/abstract-
background-with-a-watercolor-
texture_1048-2144.jpg');
}
and
<link rel= "stylesheet" type= "text/css" href= "{{
url_for('static',filename='body.css') }}"
I have the body code as a css file, but where do I place the <link? section?
Update your css to this
body{
height:100vh;
background-image:url('https://image.freepik.com/free-vector/abstract-backgroundwith-a-watercolor- texture_1048-2144.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position:center;
}
Related
I'm just learning how to use Django and HTML, and I encountered such a problem that my image is not displayed on the button, I don't understand what the error is and I will be grateful if someone can help me fix it
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title></title>
<style>
button {
background-image: url("/main/static/main/img/i.jpg");
padding-left: 32px;
padding-top: 10px;
padding-bottom: 10px;
background-repeat: no-repeat;
width: 320px;
height: 320px;
}
</style>
</head>
<body>
<button></button>
</body>
</html>
<button>
<img src=path />
</button>
would be easy solution? It depends how do you want it to be displayed. As button and inside a image or just image which can be clicked on?
Your image path must exists somewhere where it can pull it from.
EDIT: If you have Firefox Web Browser you can probably see in console (by pressing F12 on keyboard) what's the error message help you identify the source of the problem. I tried your code with another path to image and it works just the image is not centered vertically nor horizontally
This question already has answers here:
How to serve static files in Flask
(24 answers)
Closed 1 year ago.
I have this application and I made an animation background and when I open the HTML in chrome so it works well but then when I run it with flask It doesn't add the background and just ignores it
It's probably something that I missed but I still can't understand why it doesn't load the background
HTML - 1:
<!doctype html>
<html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<title>Covid-19</title>
</head>
<body>
<section>
<h1>Animated something</h1>
</section>
{% block content %}
{% endblock content %}
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
CSS:
#import "https://fonts.googleapis.com/css?family=Lato:100";
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html{
font-size: 10px;
font-family: "Latop", Arial, sans-serif;
}
section{
width: 100%;
height: 100vh;
color: #fff;
background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
background-size: 400% 400%;
position: relative;
animation: change 10s ease-in-out infinite;
}
h1{
font-size: 5rem;
text-transform: uppercase;
letter-spacing: 2px;
border: 3px solid #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 5rem 10rem;
}
#keyframes change{
0%{
background-position: 0 50%;
}
50%{
background-position: 100% 50%;
}
100%{
background-position: 0 50%;
}
}
Python:
from flask import Flask, render_template, request
def create_app():
app = Flask(__name__)
#app.route('/', methods=['POST', 'GET'])
def home():
return render_template("base.html")
return app
It's due to the server being unable to locate the style.css file. To fix this, make sure your static files are located inside a folder named 'static' next to your flask application python file. something like this:
/app
- app.py
/templates
- base.html
/static
- style.css
And to easily link the files in the templates using:
<link rel="stylesheet" href="{{ url_for('static',filename='style.css') }}">
Check Flask's docs for more details
Good luck :)
I'm starting learning flask and I'm planning on makin a sorting algorithm visualizer using flask and I'm tryin to represent the elements of the array as bars (the height of the bars is = to the value of each element in the array). I'm thinking to use the display: block but it does not appear on the page. Pls help me or suggest anything if this is possible
html file:
<!DOCTYPE html>
<html>
<head>
<title>Sample</title>
<link rel="stylesheet" href="{{ url_for('static', filename='design.css') }}">
</head>
<body>
<div class="bar">
<p>test</p>
</div>
</body>
</html>
css file:
.bar{
display: inline-block;
height: 120px;
width: 5px;
background-color: red;
color: white;
}
this what only shows on my page. other css property works well this display: bar was the only problem
Normally this is an issue with browser caching. If you did not use a file and added it directly to <head> it should work
<head>
<style>
.bar{
display: inline-block; /*You want block or inline-block?*/
height: 120px;
width: 5px;
background-color: red;
color: white;
}
</style>
</head>
If you really want to use the css file, use versioning in the url:
/static/design.css/?v=1 next time /static/design.css/?v=2
But it becomes tedious. You can add a random variable like this:
import uuid
v = str(uuid.uuid4())
# url_for('static', filename='design.css', v=v)
Please clarify your answer using a screenshot of what is happening now
My folder layout is:
/env
app.py
/env/static/styles
main.css
/env/static/img
contains all the image
/env/templates
index.html
My main.css contains:
#background_section_top {
width: 100%;
height:88px;
background: url(static/img/background_section_top_bg.jpg);
background-repeat: repeat-x;
}
My index.html contains:
<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='styles/main.css') }}">
But I couldn't see the image in my index.html. Could you please help where I'm doing mistake? Thanks.
Just modify
background: url(static/img/background_section_top_bg.jpg);
to
background: url(/static/img/background_section_top_bg.jpg);
I'm trying to load an image to my page and set it as my background, below is the css and html that I am working with. The CSS page seems to load, as my test font and background colors show up but for whatever reason my background image doesn't.
I am using Django as my web framework.
Appreciate the help!
HTML:
<!DOCTYPE html>
{% load staticfiles %}
<html lang="en">
<head>
<title>Test</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="{% static 'personal/css/frontpagebackground.css' %}" type = "text/css"/>
</head>
<body>
<p>This is a test</p>
</body>
</html>
CSS:
body
{
background-image:url(personal/static/personal/img/home.jpg) no-repeat;
background-repeat:no-repeat;
background-size:100%;
background-color: green;
min-height: 100%;
}
p {
font-style: italic;
color: red;
}
You used background-image, so the no-repeat is not actually working. Try adding the no-repeat below as background-repeat: no-repeat;.
background-image: url('image-url-here.png');
background-repeat: no-repeat;
I've had problems like this with django, primarily because my {% static %} location was confusing me. I think this is a non-css issue, and a path issue.
It helped me to use the dev console to check for Resource Failed To Load error. It will spit out the path that the machine is looking for, and it's likely different than what you specified.
I.e. is your css file located along
personal/static/personal/img/home.jpg
relative to your css file? You might just need to back up a directory, i.e.
../personal/static/personal/img/home.jpg
Either way, the console should give you your path, and use that to determine where your CSS file is digging for the image.
If your CSS files are in a path such as /static/css/style.css
and the images are under a path such as /static/images/test.jpg
then you have to place the test.jpg image directly in the folder with the style.css i.e. /static/css/test.jpg and in your HTML file give it the name test.jpg without using the static path i.e. background-image:url('test.jpg');:)