Responsive Background image for every section

Question

Hi i searched it a lot but i cannot find any solution.

Actually I want to have image for every HTML section. and it should be responsive.

here is my code

 <section id="portfolio">

    </section>

    <section class="success">

    </section>

and CSS

#portfolio {
  background: url(../img/STS_247650163-Web.jpg);
  background-size: cover;
height:400px;
}
.success {
  background: url(../img/success.jpg);
  background-size: cover;
height:1100px;
}

now if I remove height the images disappear and if add them the images becomes big and ugly.

i tried.. different method but nothing is working

thank you

I found [this](http://stackoverflow.com/a/12609315/4045532) pretty useful for exactly your situation — Corporalis, Oct 26 '16 at 12:07

score 0 · Answer 1 · answered Oct 26 '16 at 12:05

You have two ways to make responsive images.

Use bootstrap- .img-responsive

use custom media queries -

@media screen and (max-width: 368px) {
img.yourclass{
    min-height: 150px or auto;
}

}

Better use bootstrap for your divs or section, try this -

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Image</h2>
  <p>The .img-responsive class makes the image scale nicely to the parent element (resize the browser window to see the effect):</p>
  <img class="img-responsive" src="http://placehold.it/350x150" alt="Chania" width="460" height="345">
</div>

</body>
</html>

Hi Thanks but the background image is not of full size. I want to be of full size — danel yad, Oct 26 '16 at 12:11

Responsive Background image for every section

1 Answers1