Html elements not on top of background image
Code: consists of a datalist with submit button on click, does some javascript
I want to display a datalist and a button above the background image (Note: I made bgimage responsive), but it doesn't show above the image.
PS I mean transparent datalist and button, what is required is just a bg image behind my html elements. Please, help...
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
img {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<img src="bgimage.jpg" width="460" height="345">
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="text-center align-middle">
<input list="category" name="category" id="textcat" placeholder="Enter your area.." style="width: 300px !important">
<datalist id="category">
<option id="www.google.com" value="fruits" />
<option id="www.fb.com" value="animals" />
<option id="www.ymail.com" value="vechiles" />
<option id="www.msn.com" value="ornaments" />
</datalist>
<input id="btn" type="button" value="submit">
</div>
</div>
</div>
<style>
.container {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
height: 100vh;
}
#category {
width: 500px !important;
}
</style>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
$('#btn').click(function() { // The `$` reference here is a jQuery syntax. So we are loading jquery right before this script tag
var textval = $('#textcat').val();
window.location = "1stlink.php?variable=" + encodeURIComponent(textval);
});
</script>
</body>
</html>
source to share
Try this approach.
https://jsfiddle.net/pablodarde/fd2cmjqf/
The trick here is to create a container with a css flag and then use the css property "background-cover".
Html
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="text-center align-middle">
<input list="category" name="category" id="textcat" placeholder="Enter your area.." style="width: 300px !important">
<datalist id="category">
<option id="www.google.com" value="fruits" />
<option id="www.fb.com" value="animals" />
<option id="www.ymail.com" value="vechiles" />
<option id="www.msn.com" value="ornaments" />
</datalist>
<input id="btn" type="button" value="submit">
</div>
</div>
</div>
CSS
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.img-box {
/*position: relative;
width: 100%;
height: 0;*/
}
img {
position: absolute;
width: 100%;
height: auto;
}
.container {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 100%;
height: 100%;
background-image: url('https://upload.wikimedia.org/wikipedia/commons/a/ae/Castle_Neuschwanstein.jpg');
background-repeat: no-repeat;
background-size: cover;
}
#category {
width: 500px !important;
}
source to share
You will be much better off using a stylized background style
<style>
body {
position:relative;
}
.background {
position:absolute;
top:0; bottom:0; left:0; right:0;
background-size:cover;
background-position:center;
background-image:url(bgimage.jpg);
z-index:-1; // Sets the div layer level below everything else
}
</style>
<div class="background"></div>
z-index
is what defines the layers of the page. The default for all is 0
, so setting the value -1
makes it lower than every other item. Likewise, you can set .container
for z-index
2
.
I also find it better to use backgrounds as your own elements so that they don't get in the way of interactive elements by having their own z-index and can also have their own classes :after
as well as :hover
/ :active
.
source to share
You can add an image as the background image of your container instead of a tag img
:
.container {
background-image: url("bgimage.jpg");
height: 345px;
width: 460px;
}
Then you don't need a tag img
and background image behind the elements.
Demo: jsfiddle
And you also have 4 div openings, but only 3 closures.
source to share
You can use the background-image property on the container div.
Your CSS:
<style>
.container {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
height: 100vh;
}
#category {
width: 500px !important;
}
CHANGED css:
<style>
.container {
background-image: url("bgimage.jpg");
height: 345px;
width: 460px;
}
#category {
width: 500px !important;
}
</style>
source to share