CODEWITHSUNDEEP
htmlcsscss-position
user3160441
user3160441

Reputation: 163

Keep img at the bottom of page

I know it's redundant question, but answers which I saw are unbelievable. Multiple lines for such easy task? No way.

I want to keep img at the end of page (not at the end of displayed screen - I have this issue now).

current, wrong code:

#footerimg {
  position: absolute;
  right: 0px;
  bottom: 0px;
  z-index:-2;
}

I need a situation, when I will not be able to see the image until I scroll at the bottom of page.

I can't believe that there is no such option in CSS like bottom-page:0px

EDIT: explanation photo for better understanding

Upvotes: 2

Views: 111

Answers (3)

Banzay
Banzay

Reputation: 9470

You need to define positioned relative block-level element at the end of body. This will create new block formatting context and all inside absolute positioned elements will be placed relatively to it.

Look at snippet example:

body {
  width: 100%;
}
.blk1 {
  display: block;
  width: 100%;
  height: 500px;
  background: orange;
}
.blk2{
  display: block;
  width: 100%;
  height: 300px;
  position: relative;
  background: #9c9;
}
img.btm {
  position: absolute;
  bottom: 0;
  right: 0;
  opacity: 0;
  transition: opacity 1s ease; 
  
}
.blk2:hover .btm {
  opacity: 1;
}
<div class="blk1">
</div>
<div class="blk2">
<img src="//placehold.it/100/100" class="btm">
</div>

Here is another solution: 

body {
  width: 100%;
  position: relative;
}
.blk1 {
  display: block;
  width: 100%;
  height: 200vh;
  background: orange;
}
body:after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100px;
  height: 100px;
  background-image: url('//placehold.it/100/100');
}
<div class="blk1">
    </div>

So you can just add position: relative to body css styles

body {
  position: relative;
}

and add body:after:

body:after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  right: 0;
  background-image: url('//placehold.it/100/100');
}

Upvotes: 1

kukkuz
kukkuz

Reputation: 42352

Meet CSS transform property - apply transform: translateY(100%).

See demo below:

#footerimg {
  position: absolute;
  right: 0px;
  bottom: 0px;
  z-index:-2;
  transform: translateY(100%);
}
<img id="footerimg" src="http://placehold.it/200x200"/>

EDIT:

Looking at the image added to the question, I think you don't need positioning - just put the img as the last element in the html markup.

A possible solution can be this:

.content {
  height: 120vh;
}
section {
  text-align: right;
}
img {
  vertical-align: top;
}
<section class="content"></section>
<section>
  <img id="footerimg" src="http://placehold.it/200x200" />
</section>

Upvotes: 1

Hanif
Hanif

Reputation: 3797

Your question is little bit making confusing me you mentioned in your question like that: "when I will not be able to see the image until I scroll at the bottom of page."

Then I think you do not need any effort you need just place image under footer container, when you will go bottom then you will be found at bottom of the page and this is very traditional way no need any tricky code for that.

Upvotes: 0

Related Questions