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.
Related
I am trying to do something that seems like it should be straightforward. I just want to position a div (a rectangle) over a background image. The div will not show as overlaid on top of the background image. The div actually won't show up at all. I've tried using z-index to move the div in front of the image in addition to using position absolute, both with no luck. Here is my html and CSS:
<div id="banner-contact">
<div id="background-contact-info-contact"></div>
</div>
</div>
CSS:
#banner-contact{
width: 100%;
height:1000px;
background-image:url('resized-images-logo/contact-page-resized.jpg');
background-repeat:no-repeat;
background-size:cover;
margin:0px;
}
#background-contact-info-contact{
width:24%;
height:auto;
background-color:#C16C43;
}
height: auto means that the height of the div equals the height of it's children elements. Div's are by default auto in height.
I am trying to have an arrow fixed to the bottom of a div section , but for some reason its not working ,
here is my html code:
<section>
<div style="margin:auto; text-align: center; position:relative; width:61px">
<a class="scroller-arrow" href="#offset2"></a>
</div>
</section>
The CSS code :
section {
padding: 10%;
margin: 0 auto;
background-image: url("/images/text-bar-strip.png");
background-repeat: repeat-x;
height: 393px;
}
.scroller-arrow
{
background-image: url("/images/down-arrow.png");
cursor: pointer;
display: block;
height: 61px;
margin: 0 auto;
width: 61px;
position:fixed;
bottom:-11px;
}
its always showing at the bottom of my screen not the bottom of the section ?
Could you help me much appreciated :)
After clearing things up in the discussion, I believe this is what you're looking for: http://jsfiddle.net/WBF6s/
Changes include:
Removing the div.
Setting position:relative on the section.
Setting the a to be position:absolute and display:inline-block.
Setting the a to left:0, right:0, bottom:0, and margin:0 auto.
position:fixed, places the element relative to the window.
With position:absolute, the element will be moved relative to the nearest positioned parent, which means that the container must have itself a position property set.
What we usually do is make the container relatively positioned, by setting its position property to relative.
So, you should make your section or your div relative, and your arrow absolute.
as an FYI, position:fixed is reserved for placing an element on the screen regardless of the other elements there. It will fix itself to the window no matter what. If you would like it to be stuck at the bottom (or top or anything) of an element, you need to use position:absolute. The caveat with position:absolute is that you will always need its parent to have a position on it. The most non-destructive way is to give your parent position:relative and this will make sure that the parent is always in the same spot.
I've made a very quick jsfiddle to show you what's wrong:
http://jsfiddle.net/AuGe2/
When you want to position something to the bottom of an element, you need it to be
.arrow{
height:40px;
width:40px
position:absolute;
bottom:0;
left:50%;
margin-left:-20px //Or half the width of the element
}
Notice the left:50% and margin-left:-20px This is what centers an absolute element in a box. You are moving the element 50% of the way over of the parent's width, then you need to back-track a bit because it's moving the left-most side of the element. You backtrack by subtracting the same margin at half the size of the element. You can do the same with top as well.
<div id="someid">some text here</div>
css...
#someid{position: fixed; width: 500px; height: 30px;}
I want to position absolutely center to horizontal and vertical to window?
#someid{
position:
fixed;
width: 500px;
height: 30px;
right:50%;
margin-right:-250px;
}
The negative margin is to fix the offset that occurs when the browser will consider the div's right side to be 50% from the right of the browser window.
To center it vertically, you may want to try the same thing (no guarantees here though as I haven't done this before) with its vertical position.
For example:
top:50%;
margin-top:-15px;
Edit
A little more thorough explanation: When #someid is placed 50% from the right it is positioned so that it is 50% of its parent's total width away from the parent's right border. This however, doesn't measure from the center of #someid to the right border of its parent element, it measures from the right side of #someid to the right side of its parent element. This of course, doesn't quite center #someid, it's still offset by half of its width.
This is why we use a negative margin to offset it. The negative margin needs to be half of #someid's width to make up for the offset to the left that occures when we place it by it's right side 50% from the right of its parent element.
While your position is fixed you cannot position the div relatively. You must calculate the top and left values by javascript. You can center its position horizontally by writing this:
width: #SOMEWIDTH#px;
margin: 0 auto;
To make the margin position the div at the center the width attribute MUST be set.
Auto margining does not affect vertical postiion.
I came across the following css snippet. It gives an element with id search bar the absolute position,a width of 300px,height of 27px and it sets the search bar 50% from it's normal position
#search_bar {
position:relative;
width: 300px;
left:50%;
height:27px;
}
But I don't see the search bar aligned in the center. Why is that ? But if I change the snippet to :
#search_bar {
position:relative;
width: 300px;
margin-left:-150px;
left:50%;
height:27px;
}
it gets aligned to the center of the page. How is that ? What does the property margin-left:-150px do to set it to the center ?
It is because you are using position absolute so the negative margin is half of the width of the element so that it shifts the element behind by 1/2 of it's total width
position: absolute;
left: 50%; /* This shifts the element 50% from left, if you
don't want to use negative margins you can use 45%, 40% but you need
to fiddle with the measurements first */
So the calculation goes like
Total Container Width 1000px
Element Width 300px
left: 50% means it will start from left 500px to 800px
So this is not centered yea?
So -150px from 500px /* 500 here is left: 50% */
You get element from 350px to 650px
left: 50% puts the beginning of the bar at the middle of the screen, which isn't centered. However, if you know the width of the bar (300px), then move it left half of that, then the middle of the bar will be in the middle of the screen. Does that make sense? 150 is half of the 300 width. If the bar was 400 width, then you would need to use -200.
By using relative positioning, you're allowing movement of the block relative to where it would be if it was static. left: 50% places the left side of the margin half way across the containing positioned block which for you is probably the viewport (aka the browser window). margin-left: -150px will then move the left side of the margin box to the left 150px from the current position margin box. Since your total width is 300px, this makes it so that the border/content box is centered relative to the containing positioned block.
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