How can I make the input element completely transparent so that it has the body background image and not the background colour of its parent?
HTML code:
body{
background-image:url("https://upload.wikimedia.org/wikipedia/commons/3/35/Neckertal_20150527-6384.jpg");
}
#wrapper{
background-color: white;
height: 100px;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="wrapper">
<input type="text">
</div>
</body>
</html>
Add css as follows:
#wrapper > input {
background-color: transparent;
border: none;
}
If you want to remove the border on focus too, then add:
#wrapper > input:focus {
outline:none;
}
You can do it this way :
#wrapper{
background-color: white;
height: 100px;
}
#wrapper > input
{
background-color: transparent;
border: none;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="wrapper">
<input type="text">
</div>
</body>
</html>
Similar answer was posted few years ago : set input transparent
As I understand you are trying to prevent child element from inheriting parent's background color.
The only way to do is overriding the style
I don't know if this works for you but you can do:
input{
background-image:url("image.jpg");
border: none;
}
you can also do whatever part of the background image you want to display instead input field, simply cut that part of the image and set as a background image for the input field.
Related
I'm a total beginner at coding and my first problem I can't figure out is that when I use CSS sheet as a change of h1 and h3 color it basically doesn't change.
I tried to set a <h1> text color in CSS sheet and it didn't change.
body {
background-color: #EEEEEE;
}
h1 {
color: blue;
}
h3 {
color: blue;
}
hr {
border-color: grey;
border-style: none;
border-top-style: dotted;
border-width: 5px;
width: 5%;
}
<h1>H1</h1>
<hr/>
<h3>H3</h3>
That's my HTML code:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Kacper's Personal Site 💲</title>
<link rel='stylesheet' href='css/styles.css'>
</head>
<body>
<table>
for background color it works properly.
If you have created a separate file of CSS then link your CSS file to an HTML file like <head><link rel="stylesheet" href="style.css"></head>,see here https://www.freecodecamp.org/news/how-to-link-css-to-html/
When you use a separate CSS file, you need to link that CSS file to the html document.
<!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>
<h1>H1</h1>
<hr/>
<h3>H3</h3>
</body>
</html>
My hover style on a bootstrap button comes into effect when my mouse is over divs in the same row but I want it only when my mouse is over the specific div.
you can use something like this
.specific-div:hover .btn:hover {
background: red;
color: white
}
Make a class or make a ID and call them where it needed.
I think this will work for you.
.hdiv:hover , .btn:hover{
background-color: red;
color:white;
}
button{
background-color:blue;
color:white;
}
div{
width: 500px;
padding: 40px;
}
<!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>
</head>
<body>
<div>
<p>hover nothing happens in this div</p>
</div>
<div class="hdiv">
<p>color changes on Hover in this div </p>
<button class="btn">Hover Me too</button>
</div>
</body>
</html>
Let me know if this will work for you.
I was learning CSS variables and doing some basic stuff.
/* Variables names must start with -- */
/* They are accessed with var(--name) */
:root {
--clr: blue;
--bgc: whitesmoke;
}
div{
height: 20vh;
display: flex;
justify-content: center;
align-items: center;
font-size: 50px;
background-color: var(--bgc);
margin: 50px;
}
.hello{
color: var(--clr);
}
.world{
color: var(--clr);
}
<!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="variables.css">
</head>
<body>
<div class="hello"></div>
<div class="world"></div>
</body>
</html>
When I ran the HTML using live-server in VS code.
I got a third and extra div out of nowhere.
which had the following properties
The extra div (and its inner div) is injected by the live server you are using.
While its inner div has display:none so you don't see it, your CSS has set a height and background color on all divs. This means the outer injected div is visible.
It picks up the background-color: var(--bgc) and the variable --bgc has been set as whitesmoke in root.
You could try running your code just from your browser on your PC and you should see just the Hello and World divs without anything extra being injected.
I'm trying to create a square whereas if the square gets clicked the background color of body element gets changed. But the code doesn't seem to work.
Here are the code I used:
<!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>
</head>
<body>
<div class = "square" tabindex="1">
</div>
</body>
</html>
.square{
width: 100px;
height: 100px;
background-color: red;
}
.square:focus body{
background-color: yellow;
}
You will need to use JavaScript to do this in the following way:
let sq = document.querySelector('.square');
sq.addEventListener('focus', ()=>{
document.body.style.backgroundColor = 'yellow';
});
.square {
width: 100px;
height: 100px;
background-color: red;
}
<!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>
</head>
<body>
<div class="square" tabindex="1">
</div>
</body>
</html>
HERE WE GO!
use this in script:
function myFunction() {
document.body.style.backgroundColor= "yellow";
It will change pre-decided color to yellow
do not forget to call this fuction via button or link
customize button/link as you want
Check sample code below ---- Run snippet code
<!DOCTYPE html>
<!--code by alok shukla-->
<html>
<body style="background-color: red;">
<button type="button" onclick="myFunction()">Change Color</button>
<script>
function myFunction() {
document.body.style.backgroundColor= "yellow";
}
</script>
</body>
</html>
As #AHaworth pointed out it's not possible to go up in the hierarchy to select the parent element.
Probably the best solution is to use JavaScript as answered by Master Yushi.
However, there's sort of a CSS-only solution if you change a layout a bit. Using the general sibling combinator it's possible to select a sibling element if it comes somewhere after the .square in HTML. So you can add a new div to wrap the entire page inside it. And make .square position: absolute; and position it wherever you need it. It might or might not work for you depending on the page layout you need.
Here's a demo:
.square{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}
.bg {
background-color: blue;
height: 100vh;
width: 100vw;
}
.square:focus ~ .bg {
background-color: yellow;
}
<!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>
</head>
<body>
<div class = "square" tabindex="1">click me</div>
<div class="bg"> </div>
</body>
</html>
Also, one way of doing it is through JQuery. Firstly add JQuery plugin to your HTML code and then add this code to your script.
$(".square").click(function(){
$("body").css("background-color", "yellow")
});
Is this something you wanted? I have added [onclick="document.body.style.backgroundColor ='yellow'] after the body tag. I hope it works for you!
.square {
width: 100px;
height: 100px;
background-color: red;
}
.square:focus body {
background-color: yellow;
}
<!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>
<div class="square" tabindex="1" onclick="document.body.style.backgroundColor ='yellow'"></div>
</body>
</html>
css
#part1 {
background: url("img/00.jpg") repeat 0 0;
}
#part1 {
background: url("../img/00.jpg") repeat 0 0;
}
#part1 {
background-image: url("../img/00.jpg") repeat 0 0;
}
html
<!DOCTYPE html>
<html lang="en">
<head>
<title>hello there</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header></header>
<div id="part1">hello there</div>
<footer></footer>
</body>
</html>
but still the background image doesnt display ...except a white background.Can anyone help....I stored the image in a folder named img
In your code example you are targetting the same element with 3 different CSS rules. Because of this, only the last rule will be applied, as it will override the other 2.
Make sure that you are defining the correct path to the image based on your file structure.
#part1 {
background: url("http://patcreator.appspot.com/imgs/textures/light/light-texture-01.jpg") repeat 0 0;
}
<div id="part1">hello there</div>
To see the background your should have at least width:100px; and height:100px; try this
#part1{
background: url("img/00.jpg") repeat 0 0;
min-height:100px;
}
Also check browser console if image not found !