Say I have an image that is 1000x1000. On top of the image, I want to place, say, the letter "A". Here are the details:
Bottom value is 160 (meaning, the bottommost part of the "A" is sitting 160px from the top of the image)
Left value is also 160 (meaning, the leftmost part of the "A" is sitting 160px from the left of the image)
I need this positioning to be relative. Say the image is reduced to 50% its original size, then the bottom and left values should become 80 and 80. (By the way, I picked 160px as an example so conversion to em would be easy.)
The image probably needs to be in its own container as it needs to be positioned on the page, as well. But right now, I just need help with positioning letters on an image. Any guidance you can offer is appreciated.
As per my comment, just use a background image and some padding:
http://jsfiddle.net/Xzbcy/
Try this combined effort from me and Seb:
http://jsfiddle.net/Gg29e/4/
use a div with background image and text inside it. position the text.
i.e
<div id="imageHolder"><span class="imageText"> some text</span> </div>
#imageholder {
width: 1000px;
height: 1000px;
background: transparent url(path/to/your.img) 0 0 no-repeat;
position: relative;
}
.imageText {
position: absolute;
top: 160px;
left: 160px;
}
you can use percentages for top and left values when scaling. or fiddle with it here: http://jsfiddle.net/SebastianPataneMasuelli/Gg29e/1/
If the image is not a bg img, you can try something like this (I have not tested it though)
Enclose the image in a div
Make height and width of the div auto so it gets the height and width of the image
Place your text in a span and give it a higher z-index than your image (say z-index 2 for the span and 1 for the image)
You can then place your span relative to the div and it should appear on top of your image.
Related
Hi so I was making a website and I just realized that it when I want to position the html element, it will position the element using the right side of it. Here's an example of what I mean. I was trying to position an image in the center using percentages. Trimmed down version of my css code: .image{position:absolute;right:50%;
So when I loaded the website, it shows up with the right corner of the picture at 50%, not the center of the image at 50%. Is there anyway to position using center of the image to position the picture at 50%, and not the left or right edge of the picture being at 50%? I don't want something like position:absolue;right:45% to move the picture over, but instead use the center of the picture to position the picture. If you need any more clarification just let me know.
Set a width for the image and then set the left and right margins to auto.
` {width: whatever you want; margin-left: auto; margin-right: auto; } `
You can do it easily using text-align, when element you want to position is inside some container, i.e:
HTML:
<div class="container">
<div class="image">Center me!</div>
</div>
CSS:
.container { text-align: center }
.image { display: inline-block }
Second approach: if you know the width of the element (.image). Let's say that it is 400px wide:
CSS
.image {
position: absolute;
left: 50%;
margin-left: -200px;
}
A little bit tricky, can cause a problem when the width of the screen is lower than width of the element.
I have included a link to a picture to help explain my question: http://i.gyazo.com/b1e319cda4b7c21a5072156f5bd7c590.png
Im trying to position the red div exactly below the blue one. The problem is that the top container which you can see at the top of the picture, has a height of 100%. The blue div then has a height of 300px and is positioned with top:100%.
How can I get the red div exactly under the blue one? I almost just need to be able to do: top: 100% + 300px;
Thanks!
Well you could do top: calc(100% + 300px); ?
Put both the red div and the blue div in a single div container.
Apply the absolute positioning to the outer container, and keep the inner divs static (as in, remove absolute positioning).
Remove margins between divs with margin: 0;
I have an image that represents a gauge in a game I'm making and, from testing it, I realized that decreasing the height takes away from the bottom rather than the top. I'd like to invert this somehow. Is there anyway to?
Adjust the value of the y-position for the background-position property of the element to be a set distance above the image.
For example, if your background-image file is 100px tall and you set the div for it to be 30px tall, then the y-position of your background-image would need to be 70 pixels above the top of the div for the pixels to appear to vanish from the top of the image.
HTML:
<div id="my-div"></div>
CSS:
#my-div {
height: 30px;
background-image: url( 'my-image.png' );
background-position: 0px -70px;
}
I have an image element, I need it to fit inside a specific div (let's call it div 1). The image has a wrapper div that needs to fit to the image (let's call it div 2).
It almost works using the following methods:
setting the image and div 2 to float: left;
or
setting image to display: block, and div 2 to display: inline-block.
Both work great when the page is first loaded, but div 1 is actually a fluid width/height div that resizes with the browser, and when you reduce the height of the browser the width of div 2 doesn't adjust (illustrated by the green border)
Here are sample pages:
http://sabrinagelbart.com/fit-img-and-outer-div-to-container.html
(left:-50%, left:50% are for centering, don't make a difference with the bug)
http://sabrinagelbart.com/fit-img-and-outer-div-to-container-inline-block.html
Try background-size: cover; and top: 0;, bottom: 0;
or try position: fixed;
I have two divs in a container, the right div has a background image. I want to move the background image of right div so that some part (eg. 20px) of it appears in the left div. Is it possible for example using z-index etc? I have tried setting background image position to -20px but its not visible.
Please have a look at jsfiddle: http://jsfiddle.net/k8d6U/1/
The background image will only appear within the boundaries of the element, so you can do this if your right-aligned div overlaps your left-aligned div by the 20 pixels that you want.
Alternatively, you can set the background image of the right div to -20px like you said, but then apply the same background image to the left div and position it 20 pixels from the right. This will give the effect that you're looking for.
Here is an example:
.left {
float:left;
width:200px;
background: orange url("http://i42.tinypic.com/2vxfyc4.jpg") no-repeat 180px 50%;
}
.right {
float:left;
width:200px;
background: #ccc url("http://i42.tinypic.com/2vxfyc4.jpg") no-repeat -20px 50%;
}
In the example, I've also placed the image itself (absolutely positioned) directly below the background image and the widths are the same (in case you needed proof).
I think this is what you are looking for http://jsfiddle.net/k8d6U/8/
z-index works only for relative/absolute/fixed positioned elements the right overlaps the left but the way this is achieved might break on different resolutions.You could simply take that 20px strip add it center right on the left div and add the rest on the right div to fake an overlapping