I would like to put an image on another image like it is done in Facebook, Google+ and now Twitter.
Large back image with a smaller one on the left side dropping off the large one, if that makes sence
There's several ways you can do this, 1 of them is using position (so you're on the right track).
Place 2 images inside an element that has position:relative and place the top image position:absolute, like so:
<div style="position:relative">
<img alt="" src="foreground.jpg" />
<img alt="" style="position:absolute; left:40px; top:20px" src="background.jpg" />
</div>
Check out this DEMO
Another way would be to have the background image set as a background on the <div> and place the image you want on top directly inside that div. Check out this 2nd DEMO
Related
I have two images contained in one div and am trying to align the second image next to the first. If I assign each image a class, how can I get the second image to be aligned with the first using css? Or is it best to have a div for each image?
<div class="standard">
<img src="images/room02.jpg"/>
<img src="images/room04.jpg"/>
</div>
You don't need a separate div or class for each image. It all depends on how you want to align them. Just see this guide for more information: http://www.inmotionhosting.com/support/edu/website-design/insert-images-website/align-float-images-css
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'm not sure if this is even possible.
I have an image within a div.
<div id="image">
<img src="mine.jpg" />
</div>
And I have another div with text, that is placed on top of the image (well, more precisely, on the div that contains an image).
<div id="image">
<img src="mine.jpg" />
<div id="watermark">Hello</div>
</div>
Now, is it possible to save this as an image? (hm, it sounds a bit ridiculous even while I'm typing this question out!).
It sounds more like "how do I take a screenshot of user's browser".
Even if above is impossible, is there even a remotely relevant approach to this?
No, such a thing is not possible. The best way to do this is to compose the image using serverside code. Like PHP.
I think with html5 you can make such thins with the canvas but thats far away from a everyday use, at the moment.
Here's an example of my markup:
<li class="tumblr_post tumblr_photo_post">
<img class="tumblr_photo" alt="Testing photo post" src="http://29.media.tumblr.com/tumblr_li5e4zfgrd1qi4tmio1_400.png">
<div class="tumblr_caption">
<p>Testing photo post</p>
</div>
</li>
I'd like to change the size of the image's container without changing the image's size. As it's directly in the flow as an img, how can I do this?
I think your image is not contained into a div container like you are doing with the video on top.
Try to use the following jQuery code to add the img into a div container. You will have to add the jQuery library to your page of course.
$('.tumblr_photo').wrap('<div class="somename" />');
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