[英]Python dash Div full page background image
Sorry i'm very new to dash, css, html coding.抱歉,我对 dash、css、html 编码很陌生。
i'm using Dash on Python and i would like a simple full page background with an image.我在 Python 上使用 Dash,我想要一个带有图像的简单整页背景。
i'm using this CSS: https://codepen.io/chriddyp/pen/bWLwgP.css我正在使用这个 CSS: https ://codepen.io/chriddyp/pen/bWLwgP.css
i tried to use different CSS ( https://necolas.github.io/normalize.css/8.0.1/normalize.css ) beacuse i read it was a margin problem but it didn't work我尝试使用不同的 CSS( https://necolas.github.io/normalize.css/8.0.1/normalize.css ),因为我读到这是一个边距问题,但它没有用
i've read a lot of discussion about this issue but i wasn't able to fix it for my purposes我已经阅读了很多关于这个问题的讨论,但我无法为我的目的修复它
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__,
external_stylesheets = external_stylesheets)
app.title = "Q"
colors = {'background': '#ffffff',
'bg_home': '#666666',
'text': '#ffa500',
'background_plot': '#cccccc',
'text_plot': '#000000'}
app.config['suppress_callback_exceptions']=True
image = 'url(https://c.wallhere.com/photos/a1/fc/1920x1080_px_Albert_Einstein_Formula_mathematics_physics_science_Special_Relativity-549404.jpg!d)'
app.layout = html.Div(
className='row',
style={
'verticalAlign':'middle',
'textAlign': 'center',
'background-image':image,
},
children= [
html.Div(
id='Username',
style={'textAlign': 'center',
'verticalAlign':'middle',
},
children= [
html.H3('Login',
style={'textAlign': 'center',
'color':'orange',
'fontWeight': 'bold',
},
),
html.Div(
className='row',
children=[
dcc.Input(id = 'user',
style={'margin-top':20},
type='text',
placeholder='Username'
)
]
),
html.Div(className='row',
children=[
dcc.Input(id = 'psw',
style={'margin-top':20},
type='text',
placeholder='Password'
)
]
),
html.Div(className='row',
children=[
html.Button('Login',
id='log',
style={'background-color':'white',
'color':'black',
'margin-top': 20,
'textAlign':'right'},
),
]
)
])
]
)
if __name__ == '__main__':
app.run_server(debug=True,host='0.0.0.0',port=8050)
i'm not gettin error but i just get 1/3 (more or less) of the page with background image and login Div, the rest of the page completely white.我没有遇到错误,但我只得到了 1/3(或多或少)带有背景图像和登录 Div 的页面,页面的其余部分完全是白色的。
I just would like a full page with background image and login in the center我只想要一个带有背景图片的完整页面并在中心登录
Thank you all谢谢你们
In css body
tag defines the document's whole body and the div
is a part of it, there are two ways to get this working.在 css 中, body
标签定义了文档的整个主体,而div
是其中的一部分,有两种方法可以使其正常工作。
div
to cover the entire page and set the image to the div
使div
覆盖整个页面并将图像设置为div
Refer here: Making a div that covers the entire page参考这里: 制作一个覆盖整个页面的 div
Modified bit of code,修改了一点代码,
className='row',
style={
'verticalAlign':'middle',
'textAlign': 'center',
'background-image':image,
'position':'fixed',
'width':'100%',
'height':'100%',
'top':'0px',
'left':'0px',
'z-index':'1000'
},
body
tag in the external_stylesheet
to have the property background-image
,修改external_stylesheet
中的body
标签,使其具有background-image
属性,body {
'background-image' : url(url!d);
}
There are 2 ways to get this done:有两种方法可以完成此操作:
Note: Is is a good practice to create a folder 'assets' in the program's root directory, and place your image inside it.注意:在程序的根目录中创建文件夹“assets”并将图像放入其中是一种很好的做法。
Method-1:方法一:
app.layout = html.Div([ ...fill your children here... ],
style={'background-image': 'url(/assets/image.jpg)',
'background-size': '100%',
'position': 'fixed',
'width': '100%',
'height': '100%'
})
Method-2:方法二:
app.layout = html.Div([ ...fill your children here... ],
style={'background-image': 'url(/assets/image.jpg)',
'background-size': '100%',
'width': '100vw',
'height': '100vh'
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.