Background setting background image in flask
Guys i know there are lot of answers for this but it couldn't work for me.i tried to specify the url in the init of the app but still couldn't work for me.Am i missing something? I am trying to change the background to an image
here is my directory
└── wine
├── __init__.py
├── __init__.pyc
├── __pycache__
│ ├── __init__.cpython-37.pyc
│ ├── models.cpython-37.pyc
│ └── routes.cpython-37.pyc
├── models.py
├── routes.py
├── site.db
├── static
│ ├── bg.jpeg
│ ├── main.css
│ ├── pexels-photo-935240.jpeg
│ ├── pexels-photo.jpg
│ └── sf.jpg
└── templates
├── index.html
└── rec.html
here is my html file i installed materialize for flask.
% extends "material/base.html" %
% import "material/wtf.html" as wtf %
<head>
<link rel="stylesheet" type="text/css" href=" url_for('static', filename='main.css') ">
% block title %
Welcome
% endblock %
</head>
% block content %
<div class="container">
<h1>Whats Your Taste</h1>
<div class="row">
<form method="POST" action="/">
wtf.quick_form(form)
</form>
</div>
</div>
% endblock %
my css 'main.css'
body
background-image: url( url_for ('static', filename = 'bg.jpeg') );
python flask
asked Nov 14 '18 at 6:19
e.T55e.T55
154
add a comment |
Guys i know there are lot of answers for this but it couldn't work for me.i tried to specify the url in the init of the app but still couldn't work for me.Am i missing something? I am trying to change the background to an image
here is my directory
└── wine
├── __init__.py
├── __init__.pyc
├── __pycache__
│ ├── __init__.cpython-37.pyc
│ ├── models.cpython-37.pyc
│ └── routes.cpython-37.pyc
├── models.py
├── routes.py
├── site.db
├── static
│ ├── bg.jpeg
│ ├── main.css
│ ├── pexels-photo-935240.jpeg
│ ├── pexels-photo.jpg
│ └── sf.jpg
└── templates
├── index.html
└── rec.html
here is my html file i installed materialize for flask.
% extends "material/base.html" %
% import "material/wtf.html" as wtf %
<head>
<link rel="stylesheet" type="text/css" href=" url_for('static', filename='main.css') ">
% block title %
Welcome
% endblock %
</head>
% block content %
<div class="container">
<h1>Whats Your Taste</h1>
<div class="row">
<form method="POST" action="/">
wtf.quick_form(form)
</form>
</div>
</div>
% endblock %
my css 'main.css'
body
background-image: url( url_for ('static', filename = 'bg.jpeg') );
python flask
asked Nov 14 '18 at 6:19
e.T55e.T55
154
add a comment |
Guys i know there are lot of answers for this but it couldn't work for me.i tried to specify the url in the init of the app but still couldn't work for me.Am i missing something? I am trying to change the background to an image
here is my directory
└── wine
├── __init__.py
├── __init__.pyc
├── __pycache__
│ ├── __init__.cpython-37.pyc
│ ├── models.cpython-37.pyc
│ └── routes.cpython-37.pyc
├── models.py
├── routes.py
├── site.db
├── static
│ ├── bg.jpeg
│ ├── main.css
│ ├── pexels-photo-935240.jpeg
│ ├── pexels-photo.jpg
│ └── sf.jpg
└── templates
├── index.html
└── rec.html
here is my html file i installed materialize for flask.
% extends "material/base.html" %
% import "material/wtf.html" as wtf %
<head>
<link rel="stylesheet" type="text/css" href=" url_for('static', filename='main.css') ">
% block title %
Welcome
% endblock %
</head>
% block content %
<div class="container">
<h1>Whats Your Taste</h1>
<div class="row">
<form method="POST" action="/">
wtf.quick_form(form)
</form>
</div>
</div>
% endblock %
my css 'main.css'
body
background-image: url( url_for ('static', filename = 'bg.jpeg') );
python flask
asked Nov 14 '18 at 6:19
e.T55e.T55
154
Guys i know there are lot of answers for this but it couldn't work for me.i tried to specify the url in the init of the app but still couldn't work for me.Am i missing something? I am trying to change the background to an image
here is my directory
└── wine
├── __init__.py
├── __init__.pyc
├── __pycache__
│ ├── __init__.cpython-37.pyc
│ ├── models.cpython-37.pyc
│ └── routes.cpython-37.pyc
├── models.py
├── routes.py
├── site.db
├── static
│ ├── bg.jpeg
│ ├── main.css
│ ├── pexels-photo-935240.jpeg
│ ├── pexels-photo.jpg
│ └── sf.jpg
└── templates
├── index.html
└── rec.html
here is my html file i installed materialize for flask.
% extends "material/base.html" %
% import "material/wtf.html" as wtf %
<head>
<link rel="stylesheet" type="text/css" href=" url_for('static', filename='main.css') ">
% block title %
Welcome
% endblock %
</head>
% block content %
<div class="container">
<h1>Whats Your Taste</h1>
<div class="row">
<form method="POST" action="/">
wtf.quick_form(form)
</form>
</div>
</div>
% endblock %
my css 'main.css'
body
background-image: url( url_for ('static', filename = 'bg.jpeg') );
python flask
python flask
asked Nov 14 '18 at 6:19
e.T55e.T55
154
asked Nov 14 '18 at 6:19
e.T55e.T55
154
asked Nov 14 '18 at 6:19
e.T55e.T55
154
asked Nov 14 '18 at 6:19
e.T55e.T55
154
asked Nov 14 '18 at 6:19
e.T55e.T55
154
154
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
You can't use Jinja in a static CSS file. You'd need to change the URL reference to an absolute URL or place that CSS rule in your actual Jinja template.
answered Nov 14 '18 at 6:42
Matt HealyMatt Healy
11.4k33041
add a comment |
Try this:
background-image: url("bg.jpeg");
You will have to specify the path of the image file. In your design the css and jpeg are inside same folder, hence just mention the image name inside url().
Use jinja for html templates.
See here for how to specify path How to give the background-image path in CSS?
answered Nov 14 '18 at 7:09
AnkurAnkur
1534
Please add some explanation here and don't just post a link.
– Lithilion
Nov 14 '18 at 7:14
Updated the answer.
– Ankur
Nov 14 '18 at 8:23
i still cant find a way to do it
– e.T55
Nov 19 '18 at 6:24
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53294189%2fbackground-setting-background-image-in-flask%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
You can't use Jinja in a static CSS file. You'd need to change the URL reference to an absolute URL or place that CSS rule in your actual Jinja template.
answered Nov 14 '18 at 6:42
Matt HealyMatt Healy
11.4k33041
add a comment |
You can't use Jinja in a static CSS file. You'd need to change the URL reference to an absolute URL or place that CSS rule in your actual Jinja template.
answered Nov 14 '18 at 6:42
Matt HealyMatt Healy
11.4k33041
add a comment |
You can't use Jinja in a static CSS file. You'd need to change the URL reference to an absolute URL or place that CSS rule in your actual Jinja template.
answered Nov 14 '18 at 6:42
Matt HealyMatt Healy
11.4k33041
You can't use Jinja in a static CSS file. You'd need to change the URL reference to an absolute URL or place that CSS rule in your actual Jinja template.
answered Nov 14 '18 at 6:42
Matt HealyMatt Healy
11.4k33041
answered Nov 14 '18 at 6:42
Matt HealyMatt Healy
11.4k33041
answered Nov 14 '18 at 6:42
Matt HealyMatt Healy
11.4k33041
answered Nov 14 '18 at 6:42
Matt HealyMatt Healy
11.4k33041
11.4k33041
add a comment |
add a comment |
Try this:
background-image: url("bg.jpeg");
You will have to specify the path of the image file. In your design the css and jpeg are inside same folder, hence just mention the image name inside url().
Use jinja for html templates.
See here for how to specify path How to give the background-image path in CSS?
answered Nov 14 '18 at 7:09
AnkurAnkur
1534
Please add some explanation here and don't just post a link.
– Lithilion
Nov 14 '18 at 7:14
Updated the answer.
– Ankur
Nov 14 '18 at 8:23
i still cant find a way to do it
– e.T55
Nov 19 '18 at 6:24
add a comment |
Try this:
background-image: url("bg.jpeg");
You will have to specify the path of the image file. In your design the css and jpeg are inside same folder, hence just mention the image name inside url().
Use jinja for html templates.
See here for how to specify path How to give the background-image path in CSS?
answered Nov 14 '18 at 7:09
AnkurAnkur
1534
Please add some explanation here and don't just post a link.
– Lithilion
Nov 14 '18 at 7:14
Updated the answer.
– Ankur
Nov 14 '18 at 8:23
i still cant find a way to do it
– e.T55
Nov 19 '18 at 6:24
add a comment |
Try this:
background-image: url("bg.jpeg");
You will have to specify the path of the image file. In your design the css and jpeg are inside same folder, hence just mention the image name inside url().
Use jinja for html templates.
See here for how to specify path How to give the background-image path in CSS?
answered Nov 14 '18 at 7:09
AnkurAnkur
1534
Try this:
background-image: url("bg.jpeg");
You will have to specify the path of the image file. In your design the css and jpeg are inside same folder, hence just mention the image name inside url().
Use jinja for html templates.
See here for how to specify path How to give the background-image path in CSS?
answered Nov 14 '18 at 7:09
AnkurAnkur
1534
edited Nov 14 '18 at 7:58
answered Nov 14 '18 at 7:09
AnkurAnkur
1534
answered Nov 14 '18 at 7:09
AnkurAnkur
1534
answered Nov 14 '18 at 7:09
AnkurAnkur
1534
1534
Please add some explanation here and don't just post a link.
– Lithilion
Nov 14 '18 at 7:14
Updated the answer.
– Ankur
Nov 14 '18 at 8:23
i still cant find a way to do it
– e.T55
Nov 19 '18 at 6:24
add a comment |
Please add some explanation here and don't just post a link.
– Lithilion
Nov 14 '18 at 7:14
Updated the answer.
– Ankur
Nov 14 '18 at 8:23
i still cant find a way to do it
– e.T55
Nov 19 '18 at 6:24
Please add some explanation here and don't just post a link.
– Lithilion
Nov 14 '18 at 7:14
Please add some explanation here and don't just post a link.
– Lithilion
Nov 14 '18 at 7:14
Updated the answer.
– Ankur
Nov 14 '18 at 8:23
Updated the answer.
– Ankur
Nov 14 '18 at 8:23
i still cant find a way to do it
– e.T55
Nov 19 '18 at 6:24
i still cant find a way to do it
– e.T55
Nov 19 '18 at 6:24
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53294189%2fbackground-setting-background-image-in-flask%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
