CODEWITHSUNDEEP
htmlcssresponsive-design
dhrupal suthar
dhrupal suthar

Reputation: 70

how to set background image full height-width in large screen?

demo image

in large screen

-here is my code

.bg {
  width: 100%;
  height: 540px;
  background-image: url(http://inheritxdev.net/Design-Projects/perfit_home/images/OnePager-Header.svg);
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
     position: relative;
     float: left;
     width: 100%;
     border: 1px solid red;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>

</style>
</head>
<body>

<p>Resize the browser window to see the effect.</p>

<div class="bg"></div>

</body>
</html>

Upvotes: 1

Views: 2346

Answers (2)

Hardik Chaudhary
Hardik Chaudhary

Reputation: 1228

You have to make the div height = pageHeight(header height and appropriate margins should be minus).

.bg{
    width: 100%;
    height: calc(100vh - (2em + 18px)); /* p tag margin = 2em(1em top, 1em bottom ; p tag height = 18px) */
    background-image: url(https://images.unsplash.com/photo-1535498730771-e735b998cd64?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80); /* I changed an image because your image not showing in the playground */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    float: left;
    border: 1px solid red;
    box-sizing: border-box;
}
<p>Resize the browser window to see the effect.</p>
<div class="bg"></div>

Upvotes: 2

Ryan van den Bogaard
Ryan van den Bogaard

Reputation: 31

Think it has to do with the background-size. Maybe this works better for you? (practically the same, btw if contain isn't what you want try cover.

background-size: contain;
background-repeat: no-repeat;
background-position: center;

could you prehaps show what you want with an image.

Upvotes: 0

Related Questions