How to add image above div?

@BostMay 22.2022

So like I want to add an image above a rectangle div. But how do you do this? And how do you make it always to the right? And tilted a little. It’s a little face peeking out above a dialogue box. How do I do this? And like screen size friendly?

to post a comment

CSS

37 Comments(s) _↴

@SempervivumMay 23.2022 — #I'm not sure about what you intend to do exactly. A drawing might be helpful.

@cootheadMay 23.2022 — #Hi there Bost,

here is a basic example...

[b]Full page Viewe[/b]

https://codepen.io/coothead/full/KKQvjeB

[b]Editor View[/b]

https://codepen.io/coothead/pen/KKQvjeB

[i]coothead[/i]

@BostauthorMay 25.2022 — #Apologies for the confusion. I was imagining something a little more like this:

![image](https://i.ibb.co/q7bVBgY/alta-idea.png)

@cootheadMay 25.2022 — #> @Bost#1644192
>
> I was imagining something a little more like this:

No problem, does this help...

[b]Full Page View[/b]

https://codepen.io/coothead/full/JjpOEOz

[b]Editor View[/b]

https://codepen.io/coothead/pen/JjpOEOz

[i]coothead[/i]

@BostauthorMay 25.2022 — #@coothead#1644206 Thanks, I might use this, but sorry if I'm extremely picky, I want it to be to the very right like in the picture.

When I said "above" in the title, I meant above in layers. As in, it having 1 more z-index, putting it above it. Sorry! But if you can't do that then it's okay, but I'd appreciate it

Thanks!

@BostauthorMay 25.2022 — #@coothead#1644206 Also there should be the two divs, each filling 50% or 50vh of the screen. Then the face to the very right of the screen and the button below it and the text.

Thanks again!!

@cootheadMay 25.2022 — #Hi there Bost,

why do keep moving the goalposts?

Is it too much to ask for you to provide your precise coding

requirements at the beginning of the thread rather than at

the end ?

[i]coothead[/i]

@cootheadMay 25.2022 — #Hi there Bost,

here is your third example...

[b]Full page View[/b]

https://codepen.io/coothead/full/xxYPjWw

[b]Editor View[/b]

https://codepen.io/coothead/pen/xxYPjWw

I trust that the goal posts are now correctly positioned. :)

[i]coothead[/i]

@BostauthorMay 26.2022 — #@coothead#1644213 It's 50vh and they're stacked. I just now tried adding a <br> in between the containers to match the concept image I made, but nothing happened. How do I do that?

@SempervivumMay 26.2022 — #@Bost#1644214
>I just now tried adding a <br> in between the containers to match the concept image I made, but nothing happened. How do I do that?

Make yourself familiar with flex layout, e. g. here:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

You can arrange the containers one below the other by setting `flex-direction</C> to <C>column

</C>:
 
 <CODE>

<i>
 </i>#container {
 display: flex;
 flex-direction: column;
 }<i>
 </i>

@BostauthorMay 26.2022 — #@Sempervivum#1644215 Thanks, how do I make them each half of the screen? Just tried making #container > div have height: 50vh;.

@SempervivumMay 27.2022 — #You tried, was there success?

50vh is fine, however you may encounter issues when scrollbars come into play.

There is an alternative when using flex layout: Apply `flex: 1;` to the flex items:

https://jsfiddle.net/Sempervivum/120v3mps/

@cootheadMay 27.2022 — #> @Bost
>
> how do I make them each half of the screen?

Here is my update...

[b]Full Page View[/b]

https://codepen.io/coothead/full/OJQzwoM

[b]Editor View[/b]

https://codepen.io/coothead/pen/OJQzwoM

[i]coothead[/i]

@BostauthorMay 27.2022 — #@Sempervivum#1644246 They already have flex: 1;.

@BostauthorMay 27.2022 — #@coothead#1644262 That doesn't take up half of the screen... (vertically)

![screenshot](https://i.ibb.co/LdxJn2G/image.png)

@cootheadMay 27.2022 — #> @Bost#1644268

> That doesn't take up half of the screen... (vertically)

Well you can do away with the footer I suppose, but, obviously, the header

is required to accommodate that part of the head which is above the div.

You can see what two 50% height divs look like here...

https://codepen.io/coothead/full/BaYJemG

[i]coothead[/i]

@BostauthorMay 31.2022 — #@coothead#1644269 Again, it's still not 50vh each when resizing.

I never wanted any extra content, just what the image exactly looked like. The image would be like the entire page by the way, not just a small div. The top one has 50vh for the steps and to answer, and the bottom one has 50vh as the dialogue box and is the only div with a face and button.

I apologize once again for the confusion.

@BostauthorMay 31.2022 — #After removing some elements, I came close to what I want:

![update](https://i.ibb.co/S6sYHgr/image.png)

but the thing is, it currently cuts off the bottom when too small screen space:

![update2](https://i.ibb.co/ftBT6dT/image.png)

Instead, it should make each one half of the screen vertically. (aka 50vh).

Thanks!!

@SempervivumMay 31.2022 — #@Bost#1644342 Well done. Please post your latest code or prepare a demo on jsfiddle or codepen.

@cootheadMay 31.2022 — #Hi there Bost,

I think that I am now singing from from your hymn sheet.

Here is my revised version...

[b]Full Page View[/b]

https://codepen.io/coothead/full/XWZEEpN

[b]Editor View[/b]

https://codepen.io/coothead/pen/XWZEEpN

Here is how the page looks at 300 x 320,,,

![](https://coothead.co.uk/images/300x320.png)

[i]coothead[/i]

@BostauthorMay 31.2022 — #@coothead#1644355 Exactly what I wanted! Thanks!

@BostauthorMay 31.2022 — #@coothead#1644355 Only small thing, how could I push that Next button all the way over to the right but with a small margin?

@BostauthorMay 31.2022 — #@coothead#1644355 Also, adding a button into the first div puts it in the bottom one for some reason 🤔

@cootheadMay 31.2022 — #[b]Bost-example-7[/b] :(

[b]Full Page View[/b]

https://codepen.io/coothead/full/XWZELbX

[b]Editor View[/b]

https://codepen.io/coothead/pen/XWZELbX

[i]coothead[/i]

@BostauthorJun 01.2022 — #@coothead#1644379 Almost perfect! One more thing however, is there a way I can have multiple buttons in the box? I need one to be moved over, and also how would I move them correct spots if there were 3 buttons?

Here is my current pen I've been tweaking from yours:

https://codepen.io/boston2029/pen/YzeLPdz

[https://codepen.io/boston2029/pen/YzeLPdz](https://codepen.io/boston2029/pen/YzeLPdz)

@SempervivumJun 01.2022 — #@Bost#1644394 You are facing one of the disadvantages of absolute positioning right now: The large button is covering the text.

It won't hurt if you make yourself familiar with the basics of absolute positioning, this will enable you to modify your code on your own and additionally position the image as you like.

The basics are described here:

https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning#absolute_positioning

Regarding the large button it might be more appropriate not to use absolute positioning but place it below the text by flex layout. The basics are described here:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

The same CSS as for body in you latest codepen will do the job:

``<i>
 </i>body&gt;div {
 position: relative;
 display: flex;
 flex-direction: column;
 }<i>
 </i>``

@BostauthorJun 01.2022 — #> @Sempervivum#1644403 The large button is covering the text.

That's only with a really short screen vertically though. When on a bigger screen, the only problem is that both buttons cover each other. I tried .dialogue:last-of-type button {right: 0.25em} but it made both move... I also just tried .dialogue button:last-of-type { right: 1; } still same result. And changing right to left makes it stretch the button.

@BostauthorJun 01.2022 — #> @Sempervivum#1644403 Regarding the large button it might be more appropriate not to use absolute positioning but place it below the text by flex layout.

How do I make them right next to each other?

@SempervivumJun 01.2022 — #@Bost#1644411 You can arrange them side by side by flex layout. `flex-direction: row;</C> is default, thus it is sufficient when you apply <C>display: flex;

</C> to the container:
 <CODE>

<i>
 </i>body&gt;div {
 position: relative;
 display: flex;
 flex-direction: row; /* can be omitted as it's default */
 }<i>
 </i>

@cootheadJun 01.2022 — #Hi there Bost,

I have reworkeded the page to reflect your change of requirements.

All traces of [b]position: absolute[/b] have been removed.

The [b]button elements[/b] have also been changed to [b]a elements[/b] as

they suggest that clicking them will take the user somewher else.

[b]Full Page View[/b]

https://codepen.io/coothead/full/ZErooyJ

[b]Editor View[/b]

https://codepen.io/coothead/pen/ZErooyJ

[i]coothead[/i]

@BostauthorJun 04.2022 — #@coothead#1644414 Exactly how I want it! Except, can I add more buttons in the top div? Since they spread out, the second one will cover the face. Thanks so much!

@BostauthorJun 04.2022 — #@coothead#1644414 And, a way I can hide the dialogue box when it's not needed? Since the image uses body background image and button. Maybe I could just set background url to none and display hide that button as well? then when it's needed again set the url back and display block the button?

@cootheadJun 04.2022 — #Hi there Bost,

One:-

[b]Full page View[/b]

https://codepen.io/coothead/full/RwQBaow

[b]Editor View[/b]

https://codepen.io/coothead/pen/RwQBaow

Two:-

How is the code todetermine when the dialogue box is not needed?

[i]coothead[/i]

@BostauthorJun 05.2022 — #> @coothead#1644504 How is the code todetermine when the dialogue box is not needed?

I would code that myself. Just like, display: none; in javascript when the user gets the problem right or wrong. But I'll code all the JS logic.

How I thought to go about it,

> @Bost#1644500 Maybe I could just set background url to none and display hide that button as well? then when it's needed again set the url back and display block the button?

works, right? Or a better way ?

@BostauthorJun 06.2022 — #> @Bost#1644524 How I thought to go about it,
>
> [Bost](https://www.webdeveloper.com/forum/d/399869/33) Maybe I could just set background url to none and display hide that button as well? then when it's needed again set the url back and display block the button?
>
> works, right? Or a better way ?

I just tried this, having a really weird issue...

When I try adding everything back, this happens:

![screenshot](https://i.ibb.co/jDwcYCH/image.png)

It does this weird duplicate line thing. Here is my code:

``javascript<i>
 </i>document.body.classList.add("showBg")
 window.addEventListener('keydown', function() {
 document.getElementById("bottom").style.visibility = 'hidden'
 document.body.style.background = 'none'
 document.body.classList.remove("showBg")
 })
 window.addEventListener('keyup', function() {
 document.getElementById("bottom").style.visibility = 'visible'
 document.body.style.background = 'url(https://www.coothead.co.uk/images/face-and-line.png)'
 document.body.classList.add("showBg")
 })<i>
 </i>`</CODE>
 
 And at the top of the css:
 <CODE lang="css">`css<i>
 </i>.showBg {
 background-image: url( https://www.coothead.co.uk/images/face-and-line.png );
 background-position: center right;
 background-repeat: no-repeat;
 }<i>
 </i>``

@BostauthorJun 06.2022 — #@Bost#1644555 Nevermind, I think I just figured it out.

@BostauthorJun 06.2022 — #My new code is

``javascript<i>
 </i> var n = 1
 
 window.addEventListener('keyup', function() {
 document.body.classList.toggle("showBg")
 
 if (n == 1) {
 n = 2
 document.getElementById("bottom").style.visibility = 'visible'
 } else {
 n = 1
 document.getElementById("bottom").style.visibility = 'hidden'
 }
 })<i>
 </i>``

and it works.

Also in #CSS _↴

only background opacity overflow Workaround for border-radius in IE 7.0 / 8.0?

Success!

Help @Bost spread the word by sharing this article on Twitter...

Tweet This

How to add image above div?

37 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

How to add image above div?

37 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

37 Comments(s) _↴

Also in #CSS _↴