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.
Related
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 the following.
If u see, the "asdasdasd" text is not near the top of the div.
I have a div with two divs inside
<div id="widget">
<div id="header"> </div>
<div id="content"> </div>
</div>
The header div have a fixed height, and this background image.
If you see what is in red, that part of the background make me need the div to be bigger, but it moves the content div down.
I tried to pull it up using margin-bottom: -Ypx; but I think its a ugly fix. I can't find something that works for me.
somebody can help (:?
Yeah you can use the position:absolute to keep out the div header you need this properties:
#widget {
position:relative;
}
Make the parent relative, that way the position absolute of the header will be relative to this container
#header {
position:absolute;
top:0;
left:0;
}
Position absolute to the top ande left of his container
I'm more of a programmer than a web designer, I am trying to do a simple (I think) design like the home page of gmail https://mail.google.com/intl/fr/mail/help/about.html
I have a div in the center of my screen with a overflow:hidden so the background image don't resize.
In that div, I have 2 other div, one at the left and one at the right, the probleme is, since the main div is overflow:hidden when i shrink the page the right div is not visible anymore.
You can see a demo here : http://jsfiddle.net/e7MMQ/
first of all the background has nothing to do with div overflow , you could just use
background-attachment:fixed;
and for you divs
just use float : left; and float : right ;
if this what you are trying to do :
http://jsfiddle.net/prollygeek/e7MMQ/1/
it is because you have specified a width , and your div is still there but you to scroll to right to see it.
You can try applying overflow:hidden in your left/right divs and make them fixed. Thats assuming you dont have any content inside the larger container and everything is in the left/right div.
Then make your larger container a fixed size that is the combined size of your left/right divs.
HTML:
<div id="container">
<div id="left">Some content</div>
<div id="right">Some other content</div>
</div>
CSS:
#container{
width:300px;
height:300px;
}
#left{
float:left;
width:150px;
height:300px;
overflow:hidden;
}
#right{
float:right;
width:150px;
height:300px;
overflow:hidden;
}
Hope that helps!
I was wondering how I can center this http://prntscr.com/hv2q7 It is hanging off and I want it to be centered like this http://prntscr.com/hv2ue so that the gray part is coming into the border. Here is the css code and html for it :
The css:
#banner{
height: 279px;
width: 998px;
margin-right: 0px;
margin-left: 0px;
background-image:
url(/template/default/images/layout/background/newlayout/test.png);
}
The html :
<div id="banner" ></div>
You want to set your left and right margins to auto, not 0px.
Try this, it's the shorthand for setting your top/bottom margin to 0 and your left/right to auto:
#banner {
margin:0 auto;
}
Centering with css normally revolves around the use of margin:auto;
In this case you're looking at left and right margins being auto, so something like margin:0 auto; As you try it out for your full page specifically you may find you have to set the elements' display to block or the float or even a position, depending on the browser. Though those are usually not necessary.
Also, if the div really only contains the background image, you might set the background-repeat to none and the background-position to center. That would only center in the div, so if the div is actually showing as the width and height of the image, it wouldn't change anything, but if the div is filling the width of it's containing block, then you'd get left and right centering.
put this arround your banner code:
<div align="center"> "your banner code" </div>
div {position: relative;}
#wrapper {
background: url('ocean.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: 100% auto;
}
<body>
<div id="wrapper">
</div>
I am trying alternate ways to present the background image of ocean.png in different elements. Right now I am putting into a div and it isn't showing. Earlier, I put into the body which shows and the image able to stretch fullsize when first stretched horizontally and then vertically on the browser but when I stretch vertically first then background image in body is not stretching full screen, white space on top and bottom.
I am experimenting on a div now but it didn't show up at all.
You have to set the width for the wrapper. width:100% and height:100%
Need to set the width and height of the wrapper div, also if the image is not in the same directory as the CSS the reference is wrong. if you have images in a /images directory you should call them as url(/images/myimage.png)
Set the width and height of the wrapper as others have said and join those css styles in one declaration and you can get rid of all other styles once you set the dimensions of the container.
background: url(ocean.png) center no-repeat