CODEWITHSUNDEEP
htmlcss
prog
prog

Reputation: 1073

html elements not over background image

Code: consists of datalist with submit button when clicked does some javascript

the thing is i wanted to display the datalist and button above the background image(Note: I made bgimage as responsive) but it is not getting displayed above the image.

P.S I dint mean by transparent datalist and button, what is wanted is simply 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>

Upvotes: 3

Views: 1288

Answers (4)

Pablo Darde
Pablo Darde

Reputation: 6432

Try using this approach.

https://jsfiddle.net/pablodarde/fd2cmjqf/

The trick here is to create a container with a background css, and then, use the "background-cover" css property.

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;
}

Upvotes: 1

IiroP
IiroP

Reputation: 1102

You could add image as background image of your container instead of img tag:

.container {
    background-image: url("bgimage.jpg");
    height: 345px;
    width: 460px;
}

Then you wouldn't need img tag and background image is behind the elements.

Demo: jsfiddle

And ýou also have 4 opening divs but just 3 closing.

Upvotes: 1

user6871922
user6871922

Reputation:

You can use background-image property in 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>

Upvotes: 0

Shai James
Shai James

Reputation: 56

You'd be much better off using a background-image styled element

<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's layer level below everything else
    }
</style>

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

z-index is what defines the layers of a page. The default for everything is 0, so setting something to -1 makes it below every other element. Likewise you could set your .container to have a z-index of 2.

I also find it to be better practice to have backgrounds as their own elements, so that they don't interfere with clickable elements by having their own z-index, and can also have their own :after classes as well as :hover/:active states.

Upvotes: 1

Related Questions