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
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.
can somebody explain the concept of background-position:bottom;
I have HTML & CSS :
body {
position:relative;
background:#333;
}
div {
display:block;
border:1px solid red;
width:400px;
height: 600px;
position:relative;
}
span {
background: url("http://thecodeplayer.com/uploads/media/m1.png") no-repeat;
position:absolute;
background-position:bottom;
top: 0;bottom: 0;left: 0;right: 0;
height:50px;
top:auto;
}
<div>
<span></span>
</div>
1- why background-position is measured with respect to parent DIV not span ? as if you set background-position:top; it goes to top edge of div and so on ?
2 - when background-position:bottom; then why height:50px is calculated from bottom in normal cases it is calculated from top,notice that I have not shifted transform origin here
3- I am using the top: 0;bottom: 0;left: 0;right: 0; to get the exact height and length as parent div,I set height 50 which is calculated from bottom and if now I set top:auto then why the portion of image is moved to bottom,it should have been to bottom without this property as background-position:bottom; is already set.
Lets first understand what is background-position:
The background-position property sets the starting position of a
background image.
1.background-position is measured with respect to the image and not with the container span or parent div.
2.The height is calculated from bottom as it is absolute positioned element with bottom as 0.So its placed at bottom of its parent div.
3.As you have given top as 0 so the span is sticking to top of its parent div.So when u change the top value to auto.It sticks to bottom of its parent div as bottom value is 0.The positioning of span has nothing to do with background-image
Just one thing I want to clear here with my experiment that:
1- background position is measured with respect to its container for which background is set and it tells the image that where it should sit in its container.
2- here height is not being calculated from the bottom for the image, although it's giving that illusion that it's being measured from there.
we are giving height only to the container span here and since the image is said to be sits at the bottom of its parent container span that is why here we can see only the bottom portion of the image, and with the top:auto we are pushing span container to the bottom of its parent div.
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;
containerdiv has two images, I make them display left and right:
.container {
background-image: url('img/left.png'),url('img/right.png');
background-position: left,130px;
overflow: visible;//this line doesn't work
}
currently, right.png is out of the right boundary of the container div and is hidden behind another named div2 which is at the right side of the container div.
How to make right.png image display on top of div2?
see below structure:
[left.png------ 'I am container div'--------- ][right.png-----I am div2 -------]
for some reason, it is not possible to change the css of div2, so I am wondering if it is possible to set some attribute inside container div then right.png can show up.
see below I draw a picture: I set right.png 125px to show, ideally, it would cover the grey triangle.
Can not add padding to the container, can not change position of div2 (because there are other menus share this part, whole part of container div would turn grey if other menu was clicked.)
Is div2 positioned absolute? If so, you can only place .container higher by positioning it absolute as well and setting the z-index higher than div2, or by placing .container after div2 in the DOM.
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.