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
Related
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
I am trying to dispaly video in my html page by passing url as dict to template in django view named as succes
def success(request):
url_video="/media/video1.mp4"
return render(request,"payment/success.html",{"url_video":url_video})
my template code is all clear it has no errors
i am getting this error on command prompt
Not Found: /succes/media/video1.mp4
I don't understand why i get success/ in front of url i have passed.The video file is in media/video1.mp4 location but it is not getting displayed.let me know any changes i need to make.thanks
EDIT:
TEMPLATE:
<!DOCTYPE html>
<html>
<head>
<style> #myHeader { background-color: lightblue; color: black; padding: 40px; text-align: center; }
</style>
</head>
<meta name="viewport" content="width=device-width">
<body>
<h1 id="myHeader">"{{ url_video}}"</h1> <br>
<video width=""height=""controls>
<source src="{{ url_video}}" type="video/mp4">
</video>
</body>
</html>
Sounds like a relative path problem. Make sure you have:
url_video="/media/video1.mp4"
and not
url_video="media/video1.mp4"
Without the leading slash, it will try to find in directory of current url
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;
}
I am trying to create a PDF via the python weasyprint library HTML converter. I want to use a full page background image (svg) that contains the headers/footers and overlay content on top of them.
The issue is regarding page breaks... In order for the image to be full size I set the #page margin to 0, but then of course the page doesn't break until the very bottom. If I set the margins to a decent page break distance I then can't get the image to be full page size disregarding the margins.
Is there a way to circumvent this problem or is the idea doomed to failure
I don't really see your problem, but if you want a background image that covers the full window, you could set it to the body and make the body's min-width and min-height to 100vw and 100vh like so:
body {
margin: 0;
min-width: 100vw;
min-height: 100vh;
background-image: url("YOUR_IMG_URL");
background-size: contain; /*or cover or whatever you like*/
}
<html>
<head>
</head>
<body>
</body>
</html>
<style>
image
{
margin: 0px;
width: 100%;
height: 100%;
}
</style>
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');:)