background image in flask
In Flask, you can add a background image to your web application by following these steps:
Create a static folder: Inside your Flask project, create a folder named "static". This folder will store all the static files, including images.
Add the background image: Place your desired background image inside the "static" folder. Make sure the image file is in a supported format like .jpg, .png, or .gif.
Create a CSS file: Inside the "static" folder, create a CSS file named "styles.css" or any other name of your choice. This file will contain the CSS rules to apply the background image.
Define the CSS rules: Open the CSS file you created in the previous step. Add the following CSS rules to set the background image:
body {
background-image: url("/static/your_image_file.jpg");
background-repeat: no-repeat;
background-size: cover;
}
Replace "your_image_file.jpg" with the actual filename of your background image.
- Link the CSS file: In your Flask HTML template file (e.g., "index.html"), add a link to the CSS file. Place this link inside the
<head>
section of the HTML file:
<link href="{{ url_for('static', filename='styles.css') }}" rel="stylesheet" type="text/css">
Make sure to replace "styles.css" with the actual filename of your CSS file.
- Start the Flask application: Run your Flask application, and the background image should now be visible on the web page.
By following these steps, you should be able to add a background image to your Flask application.