The background image in my react application is not showing!
I've applied it to the index.html file in this way:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>React and Webpack4</title>
<style type="text/css">
body {
background: url("background.png");
background-size: cover;
height: 100%;
width: 100%; /* For flexibility */
}
</style>
</head>
<body>
<section id="index"></section>
</body>
</html>
However, I get the following error:
GET http://localhost:8080/background.png 404 (Not Found)
Related
I defined a transition to my input and it applies but but it disappears without animation.
How can I make it animate while disappearing?
input {
transition: 1s;
}
input:focus {
background-color: aqua;
transition: 1s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<input type="text" autocomplete="on">
</body>
</html>
You need to define a default color for the transition to work
input{
background-color: white;
transition: 1s;
}
input:focus{
background-color: aqua;
transition: 1s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<input type="text" autocomplete="on">
</body>
</html>
There are various Approaches for that -
You just need to set default property to the input
input{
background-color: #fff;
}
input:focus{
background-color: aqua;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<input type="text" autocomplete="on">
</body>
</html>
You can use :not selector which matches every element that is NOT the specified element/selector. But this is just a approach not a correct way.
input{
transition: 1s;
}
input:focus{
background-color: aqua;
}
input:not(:focus){
background-color: #fff;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<input type="text" autocomplete="on">
</body>
</html>
You can use JS for mouse events like mouseenter and mouseleave.
let inputTxt = document.querySelector('input[type=text]');
inputTxt.addEventListener("mouseenter", function() {
inputTxt.style.backgroundColor = "aqua";
});
inputTxt.addEventListener("mouseleave", function() {
inputTxt.style.backgroundColor = "#fff";
});
input {
background-color: #fff;
transition: 1s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<input type="text" autocomplete="on">
</body>
</html>
This snippet with 'spaces' around the tilde does not work.
h3 ~ p {
color: red;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title></title>
</head>
<body>
<h3>this does not work</h3>
<p>sibling</p>
<p>sibling</p>
<p>sibling</p>
</body>
</html>
This snippet without the spaces does work.
h3~p {
color: red;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title></title>
</head>
<body>
<h3>this does work</h3>
<p>sibling</p>
<p>sibling</p>
<p>sibling</p>
</body>
</html>
Undo will revert to not working whereas when I put 'new' blank spaces around the tilde it works.
h3 ~ p {
color: red;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title></title>
</head>
<body>
<h3>this does work</h3>
<p>sibling</p>
<p>sibling</p>
<p>sibling</p>
</body>
</html>
Since CSS in general has the power to make me want to tear my hair out it would be nice if someone could help me avoid these kinds of problems.
It's because you have a non-breaking space right after the tilde in your first example. It appears if you accidentally press option+space instead of space.
Read more here
The errors like this is a real headache sometimes!
I want to load background images by css dependent on the display resolution with the #media keyword. It works fine in Firefox and chrome, but it does not work in Safari. Is there something I miss?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Snowboardschule: Skigebiet</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="/fileadmin/css/style.css?1496823820" media="all" title="main">
<style type="text/css">#media(min-resolution: 1dppx){ .trailer { background-image: url(fileadmin/_processed_/e/d/csm_trailer1_ca6cb9b743.jpg); }}</style>
</head>
<body>
<header>
<div class="trailer">
...
</div>
</header>
</body>
</html>
Try using
<style type="text/css">
#media and screen (min-resolution: 1dppx)
{ .trailer { background-image: url(fileadmin/_processed_/e/d/csm_trailer1_ca6cb9b743.jpg); }}
</style>
this is App1 image:
this is App2 image:
note: this webpage runs in a same device(my phone with Android 5.1)
source code:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="viewport"
content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui"/>
<title>Document</title>
<style>
html,body{font-size:62.5%}
.div1{
font-size:2rem;
}
.div2{
font-size:20px;
}
</style>
</head>
<body>
<div class="div1">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈（2rem）</div>
<div class="div2">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈（20px）</div>
</body>
</html>
Simple HTML:
<!DOCTYPE html>
<html style="font-size: 100px;">
<head>
<meta name="viewport" content="width=device-width, initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">
<style>
p{
font-size: 0.2rem;
}
</style>
</head>
<body>
<p>doindex.doindex..doindex.doindex..doindex.doindex..doindex.doindex..doindex.doindex..doindex.doindex..doindex.doindex.fsadfa1234</p>
</body>
</html>
chrome calc 0.2rem to 33.2px.
Console screenshot: