I'm new in using bootstrap 3. I need your help on how to make images responsive while using position absolute, top and left? My images are on top of one image and whenever I re-size the browser the images will not be in their place anymore(desktop size).
from http://www.w3schools.com/cssref/pr_class_position.asp
so something like this: (in one of the relevant .css files)
img.topleftStuck {
position: absolute;
left: 100px;
top: 150px;
}
then something like this:
<img src='path/to/crappy_image.gif' class=topleftStuck>
this can also be achieved with div in similar fashion.. :)
Related
I am looking at making an animation using auto-animate and 2 slides.
The animation is made of 5 images.
Using <image> stack me the images on an horizontal line .. using divs stack them vertically.
I would like the second slide to arrange the images on a diagonal.
The best for me would be to position the images freely but I don't know how to do that :( ?
To position an item in CSS, try this:
<style>
#image1 {
position: absolute;
top: 100px;
left: 100px;
}
</style>
<img src='my-image.jpg' id='image1'/>
See https://www.w3schools.com/cssref/pr_class_position.asp for more details.
:)
I need to fit a vertical image in a horizontal frame without deforming the image and filling the rest with white.Im using paperclip.
I believe that's not a rails question, but a style (css) matter. Try to put some css like:
.img-paperclip{
width: 100%;
height: auto;
}
and, in your html element, something like:
<img src="..." class="img-paperclip" ...>
Hope it helps.
ULTIMATE GOAL: Make a formed transparency where images can show through but are shaped by the form itself. The images are rollover buttons and turn from grayscale to color with hover
So the picture below (link) shows what I want to happen in Dreamweaver CS6. I used PS to create this image. I simply took the "person portion" and deleted it so the picture turned out as a white box with a transparent inside. My plan was to simply plant this image into DW and then place the rest of the color images beneath it by placement of the IMG tag.
I figured it would turn out like what you see below but it has not. I simply get a full white page (tested offline, not uploaded to the server). If I add a picture, there is no hint that the PNG with the transparency is even existent.
So now, what would be your suggestions? Would it be easier to just use FW and make slices of the work as seen below? In that case I would just have to match all the pieces of the body up like Tetris when working in DW. It just seems there is a MUCH easier way of doing this and somehow I am making it extremely hard.
Please ask if you need further information. Thank you so much.
http://i1195.photobucket.com/albums/aa400/SteffaneTimm/MeFirstSuccess_zps146c6716.jpg
You could save the outline as a .PNG with alpha transparency as you have. To get the seperate images with the rollover effect you could try something like the below. (not using any canvas trickery). Create an image thats double the height of the strip you want, put the black and white version in the top half, and the colour version of the same image in the bottom half.
If you are having difficulty seeing the white outline you could try setting the page background to black temporarily.
To double check you have linked to your image files correctly you could also try pressing f12 in chrome and looking at the Resources tab in Frames > Images.
.container {
width: 500px; height: 800px;
}
.image-strip {
height: 200px; width: 500px; float: left;
overflow: hidden;
}
.image-strip img:hover {
margin-top: -200px;
}
.woman-outline {
position: relative; top: 0px; left: 0px;
height: 800px; width: 500px;
background: url('woman.png') no-repeat;
z-index: 1000;
}
<div id="container">
<div class="image-strip"><img src="1.jpg" /></div>
<div class="image-strip"><img src="2.jpg" /></div>
<div class="image-strip"><img src="3.jpg" /></div>
<div class="image-strip"><img src="4.jpg" /></div>
<div id="woman-outline"></div>
</div>
I just want the png to overlap my already built (bootstrap) header, so basically ignore it.
could I modify app/views/home/index.html.erb so that the png just sits independently of what the css does?
You can use css to position the png where you want it. In your custom stylesheet, try something like:
img#id-of-image {
position: absolute:
top: 5px;
left: 5px;
}
You can play with the top and left values to position it where you want.
If you need to nest it inside something, you need to put it within a container (ie. a div) and set the position of that container to "position: relative;". Then the top/left will be relative to the inside top corner of the container.
I am trying to use sprite images
I have a very basic link
<td align="center">
<img alt="my alt text" src="/Assets/t/myImage.gif" />
</td>
I am struggling for a while, tying to change this and making it use an image in my sprite instead of the src
sprites are large images containing more than one graphic, which are used in CSS as background-image. They are placed as background on block elements which are also sized with CSS using Width and Height. Then, using background-position, the background image is placed where it should be. The image is cropped according to those coordinates and element size, and the rest is ignored (used for other element backgrounds).
For example you have pretty buttons, which have a normal state, a mouse hover state, and an active state (pressed). Just place all 3 images one below the other, in one single image file.
button {display: block; width: 100px; height: 50px; background-image: url(yourImage.png); background-repeat: no-repeat; background-position: 0 0;}
button:HOVER {background-position: 0 -50px;}
button.active {background-position: 0 -100px;}
This will also eliminate the situation when new background image has to be loaded when the state is changed, meanwhile leaving an ugly button for half a second.
Here's an simple example of using sprite images.
The basic idea is to use background image on a fixed sized element (in the example it's an a tag with width/height 20px). Then positioning the image using background-position to select the sprite you need. The :hover selector is used to pick yet another sprite when moused over. Normally you'd have multiple links all using a different sprite from the one image.
css:
a.sprite_button
{
background-image:url(toolbar.png);
width:20px;
height:20px;
display:inline-block;
}
a#button1 { background-position:0px 0px; }
a#button1:hover { background-position:0px 20px; }
html: