Python Dash Div全页背景图片

Question

抱歉，我对Dash、CSS和HTML编程非常陌生。

我正在使用Python上的Dash，并希望拥有一个简单的全屏背景图像。

我正在使用这个CSS：https://codepen.io/chriddyp/pen/bWLwgP.css 我尝试了不同的CSS（https://necolas.github.io/normalize.css/8.0.1/normalize.css），因为我读到一个边距问题，但它没有起作用。

我阅读了很多关于这个问题的讨论，但我无法解决我的问题。

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)

我没有收到错误提示，但是页面只显示了大约1/3的部分，包括背景图片和登录模块，其余部分完全是白色。

我希望能够得到一个完整的页面，包括背景图片和居中显示的登录模块。

谢谢大家！

- Alessandro

Answer 1

在CSS中，body标签定义文档的整个主体，并且div是它的一部分，有两种方法可以使其工作。

1. 使div覆盖整个页面并将图像设置为div

请参见： 制作覆盖整个页面的div

修改后的代码如下:

className='row',
style={
  'verticalAlign':'middle',
  'textAlign': 'center',
  'background-image':image,
  'position':'fixed',
  'width':'100%',
  'height':'100%',
  'top':'0px',
  'left':'0px',
  'z-index':'1000'
},

2. 将external_stylesheet中的body标签修改为具有background-image属性的标签，

body {
   'background-image' : url(url!d);
}

- Aboorva Devarajan

---

如何为不同的页面更改背景？ - Saeid Mohammadi Nejati

Answer 2

有2种方法可以完成这个任务：

注意：在程序的根目录中创建一个文件夹“assets”并将图像放置其中是一个很好的做法。

方法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%'
          })

方法二：

app.layout = html.Div([ ...fill your children here... ],
   style={'background-image': 'url(/assets/image.jpg)',
          'background-size': '100%',
          'width': '100vw',
          'height': '100vh'
          })

- DEEPAK S.V.