CODEWITHSUNDEEP
htmlcss
Starting Out
Starting Out

Reputation: 133

How to put an image on top of a div (center horizontally but top vertically, in the middle)

I am writing a blog post (blogger) in which I wanna share a letter. The text of this letter I have put it in a div with a light grey color and a shadow on the right and bottom so it looks like a piece of paper.

My HTML says something like: 

This is my post. Blah blah blah<br />
<br />
Here is more text, blah bla blah. And this is the letter:<br />
<br />
<div style="background-color: #f7f7f7; box-shadow: 3px 3px 8px #DBDBDB; padding-bottom: 20px; padding-left: 40px; padding-right: 20px; padding-top: 35px;">
28 August 2015<br />
<br />
This is the letter, blah blah blah.<br />
<br />
Here mor parragraphs of the letter, bla bla bla. <br />
<br />

This makes my post look like this: https://i.sstatic.net/xUNNL.png

Now, I want to add a digital washi tape (like a piece of cellotape) on top of my grey div, so it looks like the letter has been stuck there with the bit of cellotape.

Like this: https://i.sstatic.net/78kyz.jpg

How could I do this in the HTML? (I am writing directly in just one blogger blogspot)

Thanks.

Upvotes: 0

Views: 72

Answers (5)

Jason
Jason

Reputation: 892

You may need to adjust the left percent, height and width to suit your needs, but this should work for you

<style>
.topImg {
    position: absolute;
    left: 25%;
    z-index: 10;
    width: 500px;
    height: 335px;
}
</style>



<img src="" class="topImg">

Upvotes: 0

Kristijan Iliev
Kristijan Iliev

Reputation: 4987

Here is a fiddle example

add this .img class to your image:

.img{
    position: relative;
    top: 0;
    margin-top: -60px;
    left: calc(50% - 50px);
    width: 100px;
    height: 50px;
    background: lightcoral;
}

This will set your image position to relative, at the top of the letter, into its center.

You will have to add the image inside your letter like this:

<div class='letter'>
    <div class='img'></div>
    28 August 2015<br />
    <br />
    This is the letter, blah blah blah.<br />
    <br />
    Here mor parragraphs of the letter, bla bla bla. <br />
    <br />

</div>

Notice that I have div just to show you how to get things done.

Upvotes: 0

markvasiv
markvasiv

Reputation: 522

I suppose that your letter div is positioned relative. To implement this digital wash tape just put another div in your letter div and position it absolute. Something like that:
.cellotape { height:100px; width:400px; position:absolute; top:-20px; left:500px; }

Upvotes: 1

FalcoB
FalcoB

Reputation: 1333

you could try something like the following if you only can aply inline styles... 

This is my post. Blah blah blah<br />
<br />
Here is more text, blah bla blah. And this is the letter:<br />
<br /><br /><br />
<div style="background-color: #f7f7f7; box-shadow: 3px 3px 8px #DBDBDB; padding-bottom: 20px; padding-left: 40px; padding-right: 20px; padding-top: 35px;">
  <div style="width:50px; margin:0 auto">
  <img style="width:50px; position:absolute; margin:-60px auto 0;" src="https://i.sstatic.net/ue96u.jpg?s=328&g=1" />
</div>
28 August 2015<br />
<br />
This is the letter, blah blah blah.<br />
<br />
Here mor parragraphs of the letter, bla bla bla. <br />
<br />

Upvotes: -1

user2983378
user2983378

Reputation:

You can add the image in the div, give it an id or class, and give it the properties: z-index:10; //or whatever number you want. What this does, it will bring this image in front of all other position:absolute; left: 50%; // it wil bring it in the middle. 

<img src="image-src" style="z-index:10; position:absolute; left:50%">

Simplified version.

Upvotes: 1

Related Questions