Anyone know how to lay a div tag that has an Image in it on top of a other div tag that has its one image in it? In the end I want to lay one image on top of a other image.
Thanks
Why not do two div tags, one housing the other, both with background images applied to them. Then you can use the background-position to position them how you'd like.
<div id="one">
<div id="two">
</div>
</div>
#one{background:url('image_one.png') no-repeat}
#two{background:url('image_two.png') no-repeat}
EDIT: Make sure you set the height and width of the div's to match your image size.
Put a background image in the bottom <div> tag, and put an <img /> inside the div. Another possibility is to use 2 <img> tags, but apply Position:absolute to both and use z-index to specify the layer order.
You can set it up as a nested div with the internal div set to use relative positioning.
The following is the best tutorial I've ever seen on css positioning:
http://www.barelyfitz.com/screencast/html-training/css/positioning/
solution 1:<div style="position:relative">
<div style="position:absolute;top:0;left:0;">
<img src="foo.png" />
</div>
<div style="position:absolute:top:0;left:0;">
<img src="bar.png" />
</div>
</div>
solution 2:<div style="background:url('foo.png') no-repeat scroll transparent">
<img src="bar.png" />
</div>
not great solutions... Not sure why you would want to do this anyway
Related
I'm trying to get an image to run edge to edge (full width) within the viewport under Bootstrap 4. I had thought that the container-fluid element would allow this, by housing a row which could then contain the img element, as opposed to the container element which would constrain the width.
Nothing i do seems capable of removing the padding which appears -left and -right of this img element. I do not want to remove the root container-fluid element's padding as this ruins things for the preceding content; I only want to disable it on this one image.
The HTML which references the Bootstrap reads thus:
<div class="container-fluid">
<div class="row">
<div class="col-12">
<img class="img-fluid" src="images/section-image-02.jpg" alt="">
</div>
</div>
</div>
And I've uploaded a visual to illustrate the effect below.
The padding i am trying to remove appears in blue alongside the image itself.
I would like to know how to align an img to the right edge within a <DIV></DIV> element.
I've been using the following code:
<DIV class=content_mid><img alt="" style="float:right; margin:0px; padding:0px; border:0px; right:0px;" align="right" src=".../img_name.png"></DIV>
But there is still a bit of space between the image and the right edge of the DIV.
Another note: I'm using a CMS for this, so I don't have access to the CSS. It needs to be done through HTML.
I've also used position:relative;, which hasn't worked for me either.
Any help would be greatly appreciated.
Thanks,
I assume parent div element has style "padding".
Try code below,
<DIV class=content_mid style="padding:0px!important">
I want the header and the main image on a page to stay connected to each other so that when the picture resizes it doesn't become too far off from the header.
But whenever I try to look up the answer, the word "fix" throws off the whole search.
Basically I have two images with divs as containers but I don't know the key words to make them stay/move together.
Try simply wrapping them inside an extra div:
<div id="Wrapper">
<div id="Header">Header Text Here </div>
<div id="Image"><!--- Image Tag here ---> </div>
</div>
I need to add a text on each of the image and I have the image gallery constructed using img tags. Can't I append div tags under img tags. Similar to the one shown here :
<img id="img1" class="img1_1" src="hello1_1">
<div class="textDesc">HELLO1_1</div>
</img>
Though the div is appended to img tag , but I cant see the text "HELLO1_1" on the image.
Please can anyone help me?
If you need the source code I can share it with you.
Here is the link to test the scenario :
http://jsfiddle.net/XUR5K/9/
An image tag can not have child elements. Instead, you need to position the DIV on top of the image using CSS.
Example:
<div style="position: relative;">
<img />
<div style="position: absolute; top: 10px;">Text</div>
</div>
That's but one example. There's plenty of ways to do this.
The img element has a self closing tag, so you can't give it child elements and expect it to work. Its content model is defined as empty. Source.
I suspect any children you specify won't be rendered because an img element is a replaced element, as mentioned in the W3C spec.
Rules of good tone.
Use null source in IMG tag.
Use CSS content:"" for WebKit browsers.
Insert element through JavaScript. Clear in HTML does not affect.
Also you can use pseudo elements.
Example: https://github.com/Alexei03a/canvas-img
I have tried all the suggestions on here I just can't seem to get mine to pop-up in front of my stylesheet in IE. Works in firefox and chrome. Here is a very basic example of my layout.
the website is gulfstreamdata dot com . If you add anything to the cart and then in the top-right click on "expand" it drops down whats in your cart, but in IE it pops-under the template. :(
<div class="vmCartModule" style="position:relative; z-index:900; ">
<div id="dropdown" style="position:absolute; z-index:901;">
</div>
</div>
I tried making both z-index values the same and i tried making the outer div higher. Tried about everything I could think of in IE developer tools to no avail.
Anyway since it is positioned in a position you know, maybe you could detach it from the parent div, and move it after its actual parent div, so it will be drawn on front (also removing the z-index values).
<div class="vmCartModule">
</div>
<div id="dropdown" style="position:absolute; z-index:1;">
</div>
you shouldn't have problems in positioning it relative to the body, since it's on top right of the site.
EDIT
If it pops under your template, move that div to the bottom of your website, maybe right before </body>. I had the same issue with many menu and sub menus and it always worked perfectly.
Do this:
<div id="dropdown" style="position:absolute; z-index:901;">
//your content
</div>
<div class="vmCartModule" style="position:relative; z-index:900; ">
//your content
</div>
See demo in IE8 : http://jsfiddle.net/WtWqX/8/