Placing image on another image in Javascript - html

I am working in javascript. I am facing an issue i.e. I want to place an image on another image. MY Code is follows:
<div>
<img src="1.jpg" style="z-index:1;"/>
<img src="2.png" style="z-index:2; left:-100px;"/>
</div>
The problem is when i run the code it places image on the right bottom corner of the DIV but not on the image.
Any help would be appreciated.

Working DEMO
Use position: absolute in CSS:
img { position:absolute; }
<div>
<img src="1.jpg"/>
<img src="2.png"/>
</div>
Note: You don't need to specify z-index if you want last image to appear on top. This is default browser behaviour.

<div>
<img src="1.jpg" />
<img src="2.png" style=" left:-100px; position:relative"/>
</div>

try:
<div style="position:relative">
<img src="1.jpg" style="z-index:1;"/>
<img src="2.png" style="z-index:2; position:absolute;top:0;left:0;"/>
</div>

You need to add the position property to the image style, e.g. ->
position:relative
https://developer.mozilla.org/en-US/docs/CSS/position
Also, this isn't javascript, it's CSS

Related

How to put the button on the top of the image?

I am trying to put a button on a picture. I have tried doing z-index and all but it does not seem to work.
<div class="landing-img">
<img src="CartoonPalace.png" class="img-fluid" style="position:relative; z-index: -1;" alt="">
Start Exploring
</div>
You need to specify the position of your absolute positioned element, for example, you could specify left: 0px. Note that I have changed the image url in order to make a functional demo, you should change it in your own code.
<div class="landing-img" style="position:relative;">
<img src="https://picsum.photos/200/300" class="img-fluid" alt="">
Start Exploring
</div>
Start Exploringg
You could do this very easily by setting the image as the background of the parent div and then centering the button.
<div class="landing-img">
Start Exploring
</div>
// css
.landing-img{
background-image: url(CartoonPalace.png)
display:flex;
justify-content: center;
align-items: center;
}

Responsive Images - Bootstrap

I am using the bootstrap framework, I am looking to have 3 images as shown in the jsfiddle link below act in a responsive manor when the window size changes/monitor size is too small to display the full sized images. It is important the images remain on the same line (if possible) with no spacing in between.
<img src="http://via.placeholder.com/660x160.png"><img src="http://via.placeholder.com/350x160.png"><img src="http://via.placeholder.com/350x160.png">
Thanks
https://jsfiddle.net/mztyoy7q/
Add a class to the image tags, and don't forget to add the bootstrap!
Just make sure you link the bootstrap, and you can use this free CDN:
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
and add the class
class="img-responsive"
to your img tags.
JSFiddle
EDIT: If you want the images on the same line, just create a couple divs.
first, create a parent div,
<div style="display:inline-block; width:100%; height:auto; background-color:#ff0000;">
<img class="img-responsive" src="http://via.placeholder.com/660x160.png">
<img class="img-responsive" src="http://via.placeholder.com/350x160.png">
<img class="img-responsive" src="http://via.placeholder.com/350x160.png">
</div>
This div element will be red with 100% width, and automatically resizing height.
Then add divs between every image with the style float:left; like so:
<div style="display:inline-block; width:100%; height:auto;background-color:#ff0000;">
<div style="float:left;">
<img class="img-responsive" src="http://via.placeholder.com/660x160.png">
</div>
<div style="float:left;">
<img class="img-responsive" src="http://via.placeholder.com/350x160.png">
</div>
<div style="float:left;">
<img class="img-responsive" src="http://via.placeholder.com/350x160.png">
</div>
</div>
Here is the updated JSFiddle If this works, please let me know!
Wrap your images to some grid/columns (e.g. .col-*) and make these images to fill 100% of available space (.img-responsive). This is a clean and elegant way to do it, using just bootstrap:
<div class="row">
<div class="col-xs-4">
<img class="img-responsive" src="http://via.placeholder.com/660x160.png">
</div>
<div class="col-xs-4">
<img class="img-responsive" src="http://via.placeholder.com/350x160.png">
</div>
<div class="col-xs-4">
<img class="img-responsive" src="http://via.placeholder.com/350x160.png">
</div>
</div>
https://jsfiddle.net/tvv89L1j/1/
About removing spaces, the easiest way would be just add your own styles to overwrite padding that bootstrap adds. You need to set padding-left and padding-right to 0 for columns (you can see where that padding comes from in browser inspector, of course).

How to make a div responsive which works in old browser too

Suppose I have images inside a div where I specify div width 100% but images size is not getting responsive.
Here is sample. just see and guide me what kind of CSS I need to add for div as a result whatever is there inside div will be responsive as per screen size.
<div class="headerCarouselwrapperOuter" style="width: 100%">
<div class="headerCarouselwrapper">
<img src="Images/new-bba-header-image1dyna.jpg" alt="" />
<img src="images/new-bba-header-image2dyna.jpg" alt="" />
<img src="images/new-bba-header-image3dyna.jpg" alt="" />
<img src="images/new-bba-header-image4dyna.jpg" alt="" />
</div>
</div>
Default div width in 100%, to make image responsive mention
img{
max-width:100%;
height:auto;
}
in your css.
#headerCarouselwrapperOuter, .headerCarouselwrapper {width:100%;}
.headerCarouselwrapper img {display:block;width:100%;}
Add this to your CSS and this should make your images responsive

Positioning element to exact div

I'm facing I think odd problem. I have website http://www.spacemind.ggpro.pl/ar/ and I'm trying to make this top menu (black rectangle) Stick to the left side of my Wrapper div.
<div style="z-index:9999;background-color:#000;right:0px;width:80%;position:absolute;margin: 0px auto;height:100px;color:#fff;">
<div style="padding:20px;">
<a href="index.html">
<img src="img/logo.png">
</a>
</div>
</div>
Now I use value width:80% but I hope that there is some way to stick it to left side of wrapper. I want this menu to be always (no matter what resolution user uses) in the position as in the image below: http://i.stack.imgur.com/QMLvO.jpg
Try this code:
<div style="width:980px;margin:auto;position:relative;">
<div style="z-index:9999;background-color:#000;right:0px;width:100%;position:absolute;margin: 0px auto;height:100px;color:#fff;">
<div style="padding:20px;">
<a href="index.html">
<img src="img/logo.png">
</a>
</div>
</div>
</div>
Of course inline styling is a bad idea. You should put it in some classes.
To the first div that comes immediately after your body tag assign the following property:
left: 0;

Styling <divs> with CSS3

I'm able to align and center graphpaper and footer as needed but I'm unable to get the colorpicker div to exist next to these to. No matter what I try it ends up being below the rest of these. Is there a way to have the two divs centered vertically and then put the colorpicker div next to these two?
<div id="abstract">
<div class="graphpaper" id="graphpaper" onclick="getPosition(event)" style="width:984px; height:1100px;">
<img src="images/poster/poster-top.png" align="left"/>
<img src="images/poster/poster-left.jpg" align="left" style="margin-left:12px;"/>
<canvas id ="canvas" width = "898" height = "900"/>
<img src="images/poster/poster-right.jpg" align="right" style="margin-right:10px;"/>
</div>
<div class="footer" id="footer">
<img src="images/poster/poster-bottom.png"/>
</div>
<div class="colorpicker" id="colorpicker" style="width: 70px; clear:both;">
<img src="images/color-tab/no-color.png" id="unselected" class="unselected"/><br>
<img src="images/color-tab/color-dark.png" id="dark_image" class="darkimage"
onclick="getColor('#00ccff','images/color-tab/color-dark.png')"/><br>
<img src="images/color-tab/color-medium.png" id="med_image" class="medimage"
onclick="getColor('#000000','images/color-tab/color-medium.png')"/><br>
<img src="images/color-tab/color_light.png" id="light_image" class="lightimage"
onclick="getColor('#ff0066','images/color-tab/color_light.png')"/><br><br><br><br>
</div>
</div>
In order to do this you need to float all of your divs to the left, and give them widths that add up to 100% (ie. 40%, 40%, 20%).
This is my best guess without seeing your question as a jsfiddle
1.) Removed the Footer div and added the img to the graphpaper div
2.) set colorpicker to position:fixed; and set margin-top:300; so it would be starting in the proper place.