CODEWITHSUNDEEP
htmlcss
prog
prog

Reputation: 1073

background image not fits all screen sizes

I am trying to fit my background image to any screen, when my open in laptop its fine but in desktop it loose some part of image. I tried the CSS but is there anything in the CSS i miss?

But the datalist and button comes in the exact center in all screen including mobile but not my background image. Please help..

$('#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);
});
html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

.place {
  height: 30px;
}

.place[placeholder] {
  font-size: 18px;
}


/* CSS */

.btnExample {
  color: #FFFFFF;
  background: #228B22;
  font-weight: bold;
  border: 1px solid #000000;
  height: 30px;
  width: 90px;
}

.btnExample:hover {
  color: #FFFFFF;
  background: #008000;
}

.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('bgimage101.jpg');
  background-repeat: no-repeat;
  background-size: cover;
}

#category {
  width: 500px !important;
}
<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" class="place" placeholder="Enter your area.." style="width: 400px !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 class="btnExample" id="btn" type="button" value="Search">
      </div>
    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

Upvotes: 0

Views: 105

Answers (4)

athi
athi

Reputation: 1683

You can use

.container {
    background-size: contain;
    background-position: center;
}

When you use background-size: cover; the background image scales to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area.

Upvotes: 1

J. Shabu
J. Shabu

Reputation: 1053

Here is your fixed container class

.container{
      width: 100%;
      height: 100%;
      background-image: url('bgimage101.jpg');
      background-repeat: no-repeat;
      background-size: cover;
      background-size: 100% 100%;
      border: 1px solid red;
        }
    or
    
    .container{
      background-image: url('bgimage101.jpg');
      background-repeat:no-repeat;
      background-size:contain;
      background-position:center;
      }


$('#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);
});
html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

.place {
  height: 30px;
}

.place[placeholder] {
  font-size: 18px;
}


/* CSS */

.btnExample {
  color: #FFFFFF;
  background: #228B22;
  font-weight: bold;
  border: 1px solid #000000;
  height: 30px;
  width: 90px;
}

.btnExample:hover {
  color: #FFFFFF;
  background: #008000;
}

.img-box {
  /*position: relative;
      width: 100%;
      height: 0;*/
}

img {
  position: absolute;
  width: 100%;
  height: auto;
}

.container{
      width: 100%;
      height: 100%;
      background-image: url('bgimage101.jpg');
      background-repeat: no-repeat;
      background-size: cover;
      background-size: 100% 100%;
      border: 1px solid red;
        }

#category {
  width: 500px !important;
}
<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" class="place" placeholder="Enter your area.." style="width: 400px !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 class="btnExample" id="btn" type="button" value="Search">
      </div>
    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

Upvotes: 2

pranavkriya
pranavkriya

Reputation: 29

Try this code :

.container{
background-image: url("Your image address");
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center;
}

Upvotes: 2

SAN
SAN

Reputation: 326

try with 

.container{
    background-image: url(../images/image.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    min-height: 100vh; //with this you'll not lose image
}

Upvotes: 1

Related Questions