html - Background image doesn't show on small devices CSS -


background image doesn't show on small devices css. have background image gets zoomed in via css when screen made smaller background image disappears , white. trying make app needs work on devices , sizes. work fine when doesn't zoom in. have pasted code below. thanks

* {-webkit-tap-highlight-color: rgba(0, 0, 0, 0):}  body { -webkit-touch-callout: none; /* prevent callout copy image, etc when tap hold */ -webkit-text-size-adjust: none; /* prevent webkit resizing text fit */ -webkit-user-select: none; /* prevent copy paste, allow, change 'none' 'text' */ background-color: #e4e4e4; ); background-attachment: fixed; }  /* portrait layout (default) */  .app { position: absolute; /* position in center of screen */ background-position: center; position: relative; bottom: -300px; font-family: 'roboto', sans-serif; }  /* landscape layout (with min-width) */  @media screen , (min-aspect-ratio: 1/1) , (min-width:400px) {  h1 {     font-size: 90px;     font-weight: normal;     margin: 0px;     overflow: visible;     padding: 0px;     text-align: center;     color: white;     font-family: 'roboto', sans-serif; } p {     color: blue;     font-family: 'roboto', sans-serif;     font-size: 15px;     text-align: center;     color: white; } .event {     border-radius: 4px;     -webkit-border-radius: 4px;     color: #ffffff;     font-size: 12px;     margin: 0px 30px;     padding: 2px 0px; } .createanaccount {     padding-bottom: 10px;     padding-top: 10px;     font-size: 15px; } .logintable {     text-align: center; } .login {     padding-bottom: 10px;     padding-top: 10px;     font-size: 15px; } .event.listening {     background-color: #333333;     display: block; } .event.received {     background-color: #4b946a;     display: none; } @keyframes fade {     {         opacity: 1.0;     }     50% {         opacity: 0.4;     }     {         opacity: 1.0;     } } @-webkit-keyframes fade {     {         opacity: 1.0;     }     50% {         opacity: 0.4;     }     {         opacity: 1.0;     } } .blink {     animation: fade 3000ms infinite;     -webkit-animation: fade 3000ms infinite; } .bg {     position: fixed;     top: 0;     left: 0;     right: 0;     bottom: 0;     z-index: -999; } .background {     background: #22313f;     background-image: url(https://i.ytimg.com/vi/b7wd-     spnx_i/maxresdefault.jpg);     background-size: cover;     width: 100%;     height: 100%;     animation: zoom 12s forwards ease-out;

html code below

<body>     <div class="bg">         <div class="background"></div>     </div> <body>

your @media query has minimun pixel limit. if delete this, work. change line 

@media screen , (min-aspect-ratio: 1/1) , (min-width:400px)

into this

@media screen , (min-aspect-ratio: 1/1)

by setting min-width apply background changes if viewport 400 pixels wide or wider.


Comments

Post a Comment

Popular posts from this blog

python - Selenium remoteWebDriver (& SauceLabs) Firefox moseMoveTo action exception -

while performing simple hover test on firefox through selenium (3.4.0) python bindings (3.4.3) using of available os in saucelabs (except linux, latest available firefox version old), performing following actionchain: hover = actionchains(driver) hover.move_to_element(elm_men_menu).perform() it throws following error: taceback: file [...] in testhover hover.perform() file "/usr/local/lib/python2.7/dist-packages/selenium/webdriver/common/action_chains.py", line 80, in perform action() file "/usr/local/lib/python2.7/dist-packages/selenium/webdriver/common/action_chains.py", line 290, in <lambda> command.move_to, {'element': to_element.id})) file "/usr/local/lib/python2.7/dist-packages/selenium/webdriver/remote/webdriver.py", line 256, in execute self.error_handler.check_response(response) file "/usr/local/lib/python2.7/...
Read more

html - How to custom Bootstrap grid height? -

why bootstrap grid has height 591.067 ? did height came ? .main-post { padding: 20px; background-color: #fff; border: 1px solid #d8d8d8; margin-bottom: 100px; } .main-post .post-categories { margin-bottom: 10px } .main-post h3 { margin: 0 0 10px; color: #777; letter-spacing: -1px; font-weight: bold } .main-post .post-author, .main-post .post-date, .main-post .post-comments { font-size: 12px } .main-post img { display: block; margin: 10px 0; } .main-post .post-summary { line-height: 1.7; color: #888 } .main-post { color: #999 } <div class="col-sm-6"> <div class="main-post"> <h3 class="post-title"> <a href="#"> post title </a> </...
Read more

transpose - Maple isnt executing function but prints function term -

im using maple im in worksheetmode tried using maple input , 2d input , want transpose matrix a: := `<|>`(`<,>`(1, .5, -2), `<,>`(.5, 9/4+b, 5+3*b), `<,>`(-2, 5+3*b, 18+9*b+4*a)); b:= transpose(a); when exectute sheet dont translated values, there same input. matrix looks same input matrix plus function term. you can see picture in following link: why arent functions executed? meanwhile b:=a^+ doing right way , transposed matrix. other functions return function body instead needed values... if using 2d input mode (the default) space you've got between transpose , bracketed (b) interpreted multiplcation. rid of such space. also, either load package @ start of document like, with(linearalgebra): before calling transpose command package, or call it's full name like, linearalgebra:-transpose(b);
Read more