i set html background full screen, in pc is working fine, but has problem in android when user input form and show keyboard ,background is auto resizing
HTML :
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
<h1>x</h1>
<input type="text" placeholder="XXXXXXXXXXXXX"/>
</body>
</html>
CSS :
html, body {
min-height:100%;height:100%;
}
html {
background: url(https://i.pinimg.com/originals/af/8d/63/af8d63a477078732b79ff9d9fc60873f.jpg) no-repeat center center fixed;
background-size: cover;
height: 100%;
overflow: hidden;
}
SCREENSHOT :
https://prnt.sc/wd6mez - Normal
https://prnt.sc/wd6mnq - Problem
The keyboard on Android is reducing the viewport height, and because of background-size: cover; the background image is naturally resizing to fit the reduced area.
Related
I'm trying to use the meta tag maximum-scale so the user can't enlarge the size of the viewport.
My code is down below. However, if I open this file with chorme, I can still use the mouse wheel to enlarge the viewport up to 500%, or reduce it down to 25%. How should I fix this problem?
Code:
<!DOCTYPE html>
<html>
<head>
<meta
name="viewport"
content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"
/>
<style>
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
#container {
width: 100vw;
height: 100vh;
background: #f7f7f7;
}
#header {
width: 100%;
height: 60px;
background: #d1d1d1;
}
</style>
</head>
<body>
<div id="container">
<div id="header"></div>
</div>
</body>
</html>
from what I have understood reading this it works on devices that render pages in a virtual window or viewport like mobile screens, and your code works fine, I tried it in chrome dev tools setting the device to "Iphne XR" and emulating zooming by holding Shift + mouse click and drag across the viewport
I haven't been able to zoom in or out.
This is what is happening with the code.
Here is the code...
<div style="background-image: url(img/background.jpg);background-repeat: no-repeat; height:250px;"></div>
The size of the image is 963w x 200h.
At the end of the day, i would want this to be 100% width, but also be responsive for all devices. How can I make that happen?
adding background-size:cover; wont do that trick.
Here is a fiddle: https://jsfiddle.net/t7ekj0mh/
Add the rule background-size: contain to your div.
<html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/3/w3.css">
<body>
<div style="background-image: url(https://i.ibb.co/2jCzQB6/background2.jpg);background-repeat: no-repeat; background-size: contain; height:250px;"></div>
</body>
</html>
Add background size contain for the image to scale horizontally
As I understand, this is what you are attempting to achieve.
div{
background: #E6DCDD url(https://i.ibb.co/2jCzQB6/background2.jpg) center bottom / contain no-repeat;
height: 300px;
border: 5px dashed red;
}
<div></div>
This will stretch the image horizontally and place it at the bottom, and by adding a color, it will seem as it is a one-piece thing.
I have these two PNG images (Image 1: eyemasktrans , Image 2:dialogue_ughhh) which I already edited in Photoshop to make them transparent. But the problem is when I try to view on Chrome, the supposed transparent images appeared to have white backgrounds. Is they any way to fix this using just HTML? Thanks in advance! Below is my current code:
Other image I use: girl_sleeping
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.parallax {
/* The image used */
background-image: url("girl_sleeping.jpg");
/* Set a specific height */
min-height: 200px;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<center> <img src="eyemasktrans.png" /> </center>
<center> <img src="dialogue_ughhh.png" /> </center>
<div class="parallax"></div>
</body>
</html>
Your eyemasktrans.png and your dialogue_ughhh.png images are fine. They have a proper alpha channel in the PNG.
I think the issue you're having is that the .parallax div is not sized corectly, and also has some weird background configurations with fixed and center, which cause it to appear like something is covering it while you scroll around the page.
I don't know what the desired effect is here, but if you size things correctly and set z-index as appropriate, you won't have a problem.
Additionally, I would suggest considering SVG for this task, since all your art is vector anyway. You'll have a much faster load time.
(Issue is reproduced here: http://jsfiddle.net/vr1qms9h/1/)
You can use the opacity attribute.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.parallax {
/* The image used */
background-image: url("http://thepotatoplace.ga/images/background.png");
/* Set a specific height */
min-height: 200px;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
opacity: 0.65;
}
</style>
</head>
<body>
<center> <img src="eyemasktrans.png" /> </center>
<center> <img src="dialogue_ughhh.png" /> </center>
<div class="parallax"></div>
</body>
</html>
I am having troubles with elements size with CSS on mobile.
The background image have 853x480 px, that's supposed to fit perfectly I am wrong?
It's really very very simple CSS code, why that is going on?
Desktop Responsive view: https://prnt.sc/j7d1jr
On desktop browsers the page fit perfectly, the elements like background image and inputs displays perfectly.
On mobile all that resize, all smaller
Iphone mobile view: http://prntscr.com/j7d0ej
How to fix that?
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Banco BRB</title>
<style>
body {
background-image: url("bg_login.png");
background-color: red;
background-repeat: no-repeat;
width: 820px;
height: 480px;
}
</style>
</head>
<body>
<br><br><br><br><br>
<center><img src='user.png' height="75%" width="40%"></center>
<br><br>
<form>
<center><label><input type="text"></label>
</form>
</body>
Okay so basically it will not display my background image. I have looked at all the other posts and none of them work. Here is the code.
Here is the Html. Note that the app.css and app.js are just bootstrap files renamed.
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width-device-width, initial-scale=1" />
<!-- Above is Important -->
<meta name="description" content="HTML, CSS, BOOTSTRAP" />
<meta name="author" content="James Mehltretter" />
<title>Download Free HTML Templates</title>
<link rel="stylsheet" href="app.css" type="text/css" />
<script src="app.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>
Here is the part of the CSS that I edited.
body {
margin: 0;
background-image: url(background.png);
}
The JavaScript file is just generic bootstrap. Here is the link to the file I am actually using though.
The Bootstrap JS
Thank you.
Your Body has no height and there's nothing in it to put a background on.
Make sure your body has some height to it.
body {
margin: 0;
background-image: url(https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png);
background-size: 1440px 800px;
height: 300px;
}
Check that the image background.jpg exists within the parent directory of the directory that contains the css you've provided.
Are you getting a 404 error on the file path in your javascript console? Also ditch the quotes. Don't think that's right. I think w3Schools is wrong. Here is Mozilla docs showing no quotes on URL:
https://developer.mozilla.org/en-US/docs/Web/CSS/background-image
Check again with this code:
body {
margin: 0;
background-image: url(../background.jpg);
background-size: 1440px 800px;
}
If you're trying to make the image cover the entire screen all the time use HTML or HTML and BODY together.
See working Snippet at Full page.
html,
body {
height: 100%;
width: 100%;
background-image: url(https://upload.wikimedia.org/wikipedia/commons/d/d4/Tokyo_by_night_2011.jpg);
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
As long as you have given the height, the image will show.
In this example, height: 100vh, which means it covers the whole screen.
body{
background-image: url('https://image.freepik.com/fotos-kostenlos/gruene-wiese-hintergrund_1252-1098.jpg');
height: 100vh;
}
The best practice however is to set it to cover and no-repeat, so that the background image is shown only once despite the screen size.
body{
background-image: url('https://image.freepik.com/fotos-kostenlos/gruene-wiese-hintergrund_1252-1098.jpg');
background-size: cover;
background-repeat: no-repeat;
height: 100vh;
}