CODEWITHSUNDEEP
htmlcss
0xtimur
0xtimur

Reputation: 1293

Overlapping background image through different elements

How can I get the main background image (the topography) to start from the very top all the way to the very bottom.

The golden "bars/elements" and blue "bars/elements" functionality is that they are like an accordion. So by clicking them, the element below it becomes visible or vice versa. So the the topography would be overlapping the golden and blue bars and continuing to the next section be it either another bar or the element that is visible. The topography image should never break throughout the entire page.

website demonstration

Upvotes: 0

Views: 492

Answers (1)

viCky
viCky

Reputation: 864

It is not clear what do you mean by Topography but if you want an image to start from top and end at the bottom of the page, you can use the following method :

CSS:

.background {
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  pointer-events: none;
}

HTML: 

<body>
  <span class="background"><img src="xxxxx" /></span>
  <!-- your content goes here -->
</body>

What this will do is, create a div that will be equal to the height of the body tag and will be always aligned to the top left corner of the page. The image may get skewed.

I hope this helps.

Upvotes: 1

Related Questions