Looking to make an image gallery (Tumblr style)(bunch of images) and be able to put text or an input button on them? I tried with and place each of them but, when you resize the window, they may not fit anymore.
here is an example: https://camo.githubusercontent.com/f166f9ee75444a16e55517850b35a79578ad5e65/687474703a2f2f662e636c2e6c792f6974656d732f33373371317633753359336433503177316530742f53637265656e25323053686f74253230323031332d30362d3033253230617425323031302e32332e3438253230414d2e706e67
I tried to place each picture like this <img src="picture.jpg" weight="100" width="475"/>.
Related
I needed to turn my image into a hyperlink, so I wrapped the tag around it. For some reason, only the bottom part of the image is clickable for the hyperlink. The rest of the image won't do anything.
This is my code:
<img src="image-here">
change width or height may be that is the problem
I want the text and image below this main full-size image section as normally we see in websites usually. I am new to programming.
I want to make below the main image a section with the image on right and text as shown in image link below.
Here is my code :
http://jsfiddle.net/165hkr8x/1/
<script async src="//jsfiddle.net/165hkr8x/1/embed/"></script>
This is what I am getting
This is what I want
I thought, that I get your question. I've a link for you Try this it will help you.
Float Image
Find the image is this your expectation?
I'm doing my online portfolio website and I have a responsive problem (i always have responsive problems, hate this thing).
This is what I want my website to look like in all of screens resolutions:
https://s3.amazonaws.com/f.cl.ly/items/0W3k3Y0C3L2O2m2J2P1I/resolution2.jpg
The problem is, as you may know, when I code this in html even with Bootstrap, the the big text (designer, no matter what) covers me in the right, depending on the screen size.
How can I "fix" the text in the image so that no matter the screen size the text always stays in the same place of the image?
<img> tags do not have an option to add text on it.
You can use images as background and add text. You can use <div> tags to server this purpose. Something like below:
<div class="imageContainer">Some Text</div>
use the css background-image property to show the image
.imageContainer {
background-image: url(locationoftheimage);
}
For smaller area's you can just make the image as link, if you want. For example your menu has links such as Home, About etc.
Make a small image like this
Code would be like this:
<img src ="url_of_Image">
I am trying to fix a Facebook Like button to a particular position on top of a header image on WordPress, but am having trouble with the CSS styling (and potentially id's vs classes)
On this website, I want to place a Like button below the 'Join us Now' text in the blue section of the image header image.
I tried to create a seperate div class and position it, but my knowledge of fixed/absolute/relative is pretty shoddy, to say the least. It did an absolute position, but it doesn't stay with the image when I resize the browse window. (We're targeting young students for our campaign, and so a lot will be visiting our sites from small laptop screens and smartphones, so has to be responsive)
Does anyone have any idea how I can do this?
Thanks :)
Edit the layout of your HTML elements so that your like button is positioned below your main image link like this:
<div id="header-banner" style="width:100%;height:300px;">
<a href="http://www.w4u.org.uk/">
<img src="http://www.w4u.org.uk/wp-content/uploads/2013/02/copy-home-banner.jpg" class="header-image" width="960" height="250" alt="">
</a>
<div class="fb-like"></div>
</div>
Once that's in place adjust the CSS for the like button by adding this to your inline style that's already in place:
top: -98px;
Here's an image of what it should look like after you make the changes:
I have lot of thumbnail and I want to show check box on images at left-top side as shown in image. I am displaying thumbnail images in Repeater.
How can I do this?
Keep the image and check box in a container after that absolutely position the checkbox