CODEWITHSUNDEEP
htmlreactjscssstyles
abc
abc

Reputation: 11

how to make image in one div streach to whole page

I have a problem in css. In my page I want to add background image to a page which stretch to full height by changing its width (width need not be full). I count easily do it by background tag but the problem is i want to give opacity to the image, so I need to have two divs one with image and other with content and change position . But when I do it the image is only of height of view port but i want to it be equal to full page.

Can anyone please help me.

Any help would be appreciated.

Thank you.

html {
  min-height: 100%;
  position: relative;
}

body,
#back-img,
#content {
  margin: 0;
  padding: 0;
  height: 100%
}

#back-img {
  background: url(https://youngisland.com/wp-content/uploads/2018/01/aerial-optimized2.jpg);
  position: absolute;
  display: block;
  height: 100%;
  width: 100%;
  top: 0px;
  left: 0px;
  z-index: -1;
}

#content {
  aheight: 1000px;
  position: absolute;
}
<div id="content">
  <h1>Title</h1>
  <h2 style="font-size:50px">MORE</h2>
</div>
<div id="back-img"></div>

Upvotes: 0

Views: 76

Answers (4)

aftershock
aftershock

Reputation: 67

Use for your image: background-size: cover;

Upvotes: 0

Anil Suwal Qode
Anil Suwal Qode

Reputation: 120

body, html {
  min-height: 100%;
  position: relative;
  margin: 0;
  padding: 0;
}
#back-img {
  background: url(https://youngisland.com/wp-content/uploads/2018/01/aerial-optimized2.jpg);
  opacity: 0.5;
  background-size: cover;
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}

#content {
  height: 1000px;
}
<div id="content">
  <h1>Title</h1>
  <h2 style="font-size:50px">MORE</h2>
</div>
<div id="back-img"></div>

Upvotes: 0

Pete
Pete

Reputation: 58432

I am not sure if this is your problem but you have set a height of 100% on your body, this needs to be a min-height. I would then make the body relative and then use right and bottom instead of width and height, whilst making your background size cover:

 
html,
body {
  margin: 0;
  padding: 0;
  min-height: 100vh;   /* use min-height */
  position: relative;  /* move relative here */
}

#back-img {
  background: url(https://youngisland.com/wp-content/uploads/2018/01/aerial-optimized2.jpg) top left no-repeat;
  background-size: cover;   /* add this */
  position: absolute;
  top: 0;
  left: 0;
  bottom:0;                 /* use bottom and right instead of height and width */
  right:0;
  z-index: -1;
}

#content {
  padding: 1px;       /* stop margins collapsing */
  height: 1000px;    /* for test and remove absolute positioning */
}
<div id="content">
  <h1>Title</h1>
  <h2 style="font-size:50px">MORE</h2>
</div>
<div id="back-img"></div>

Upvotes: 1

Ihor Lavs
Ihor Lavs

Reputation: 2463

Add a fixed position to the element with a background image, and relative position to your content:

.content {
  position relative;
  z-index:2;
}

#back-img {
    background : url(https://youngisland.com/wp-content/uploads/2018/01/aerial-optimized2.jpg);
    background-position: cover;
    position:fixed; 
    right:0;
    bottom: 0;
    top:0; 
    left:0; 
    z-index:1; 

}

Upvotes: 0

Related Questions