I have read the manual of CSS background-attachment and never get the true idea. However, today I learn a lesson as follows:
.#city-images-div {
background: url(../img/100.jpg) no-repeat fixed 0px 0px;
position: absolute;
top: 2px;
left: 2px;
width: 557px;
height: 374px;
cursor: pointer;
border: none;
}
<div id="city-images-div"></div>
The above code will not help me display the background image 100.jpg.
If I change the background-attachment from fix to scroll then the picture can be display.
The dimension of the image is of 557x374.
I don't know why the background-attachment plays such a role here.
Q1> What is the practical usage of background-attachment
Q2> Why the image doesn't show up if the value is fixed and displays correctly if the value is scroll.
thank you
// update //
this is a typo and fix should be fixed.
There's a few practical uses of it, but I can't think of any at the moment.
As for why it's not working for you, it should be fixed, not fix.
I think that say you had a gradient background image (repeat-x and stuff) to make the page look nice.
If background-attachment is "fixed", then the gradient will scroll with that page, else, it stays at the top
Have you tried using "fixed" instead of "fix"?
As for the practical usage of the background css properties, obviously the most important one is to add a background for an element (as the name suggests), without using an img tag. You can also use the background property to assist in creating custom classes for buttons, navigation elements, etc.
Probably because the value i snot fix but rather fixed.
I believe the problem is that the your Absolute Positioned box is being set some distance away from the top left corner of your screen, far away enough such that the image doesn't show in the box at all. See if this demo will help: http://jsfiddle.net/9LLwX/2/
Try dragging the box around. Notice that the position of the background never changes, even when the div containing it is moved. Backgrounds with background-attachment: fixed are positioned relative to the viewport.
Related
A bit of a newbie question, but I've had this problem for a while now and i need it fixed. Hopefully one of you guys can help.
I have a textbox near the bottom of my page. It's position is fixed, however, whenever I resize the browser window, it moves with the bottom of the page. I've tried it with absolute and rlative positioning too, but still, same problem. Ive been reading up on CSS positioning, and assumed I understood it, until this little problem.
I have a header bar at the top of my page which is position: fixed, and that doesn't move, so I'm wondering what the difference is?
Illustrations of the problem are here:
The bottom image is the normal view, and the top is the textbox moving ahen the window is shrunk.
http://imgur.com/a/cdZsV
My textbox is named "typetextbox" and the header banner is "cfbanner"
The CSS is:
#cfbanner{
position: fixed;
top: 0px;
left: -130px;
z-index:-20
}
#typetextbox{
left: 130px;
bottom: 50px;
position: fixed;
width: 850px;
Im sure this is easily fixable. A little help would be very appreciated!
The behavior of your typetextbox seems right, since you specify the box to be fixed and the distance to the bottom to be 50px.
W3Schools.com writes:
An element with fixed position is positioned relative to the browser window.
See here.
So if you shrink your browser window, the text box will stick to the bottom of your window, hence, as you wrote:
it moves with the bottom of the page
If you want the box to stick at the given position, remove the "bottom" attribute and specify the "top" attribute, just as you did it with "#cfbanner".
I want to absolute position an iframe and define it's left, top, right, bottom offset:
#x {
position: fixed;
left: 10px;
top: 10px;
right: 10px;
bottom: 10px;
width: auto;
height: auto;
border: 2px solid #aaa;
z-index: 100002;
background: #abc;
display:none
}
I found the left and top value is respected while right and bottom value is ignored. When I don't have a left and top value set, then the right and bottom value is treated correctly. Check this fiddle: http://jsfiddle.net/7fTEF/
Any idea?
Note I don't want to set width and height of the element because I want it be relative to the viewport, neither do I want to set the width and height to a percentage, I just want to keep the border offset a fixed value, say "10px" here.
Not sure why, but, after a little playing around, it seems like IFrames don't like that style of positioning for some reason.
One solution I could make was to container it in a div, and get the div to the size/position you want.
http://jsfiddle.net/7fTEF/1/
Also, despite being 500x500px, the body background color will keep going to fill up all the space in a page, but the sizing of the div is still correct. (resize the body to check it out... )
You can not set both left and right or both top and bottom property. edit: Turns out you can actually provided you are positioning absolute, as i just learned from this article: http://www.alistapart.com/articles/conflictingabsolutepositions (all credits to #thirdender for the tip!). Iframes seem to behave differently though.
You could achieve what you are after like this: http://jsfiddle.net/7fTEF/2/
Note that there is no absolute postioning required. Also i used the css3 property box-sizing. You will have to add browser specific prefixes as explained here http://www.w3schools.com/cssref/css3_pr_box-sizing.asp
Note that this solution will not work in old browser, you will end up with scrollbars. If you want to make it fully browser compatible i think yoy will have to resort to some js, but then you have problems with people who have this disabled. You could also try a combination of both. It all depends on your audience and how import you find it...
You can find the container size via javascript and after set the iframe size.
I found this page here http://www.alistapart.com/articles/conflictingabsolutepositions/ that explains a couple of solutions that are also compatible with older IE browsers using just CSS. Otherwise some JavaScript calculations would probably be required.
I have been trying for an hour to get a list in a sidebar of WordPress to have a negative margin. Fooled around with margins, padding, sidebar placement in the php files... But the link images just keep disappearing behind the background.
Here's the page where I'm working: http://kirahenschel.com/
This is what I am trying to achieve:
http://emgraphics.net/kira/idea2-11.jpg
Ideally I'd also like that sidebar to be a finite height so the white boxes on the bottom spread, but I can cope with them being off to the right.
Anyone have any ideas? Neg margins are working fine on the logo, so it is just a list thing?
Thanks
If you're merely trying to get the list to be bumped to the left, why not use a CSS positioning property? Negative margins can get really wonky, and are (most likely) unneeded in this application.
#nameoflistdiv {
left: -20px;
}
You may also need to change the value of your div's position element, but this will bump your div and everything in it left, overlapping the container div.
If that doesn't answer your question, can you post the HTML and CSS you are using? The CSS code
margin-left: -20px;
really should work in this application as well, so show us what you've got.
Your negative margin is working as expected. The reason the images are getting cut off is because you have set overflow:hidden on the #main container. If you remove that property your images will appear.
#main {
background: url("images/blend.png") repeat-x scroll center top #2765CA;
clear: both;
height: 630px;
overflow: hidden; /* delete this line */
padding: 0;
}
On a customer website, I have to add a background image for only a contained region of the page (its real content part).
The problem is, if the content is short enough, then the image will be clipped. How would be possible to have the image completely visible? I have tried to add the "overflow" CSS attribute but unfortunately it did not help me.
Here is an example of the website I have to work on: http://www.sfp-pensioen.nl/werknemer/welkom The background image is on the div element with id="content".
On the specific link that I am sending it is not an issue because the content is long enough, but if you remove elements using firebug then the problem will become obvious.
ps: IE6 must be supported.
Following on from Graham's answer:
"height" in ie6 acts like "min-height" across other browsers.
min-height: 50px;
_height: 50px;
The example above will provide a cross browser minimum height of 50px. ie6 will read "_height" where other browsers will not. If you don't hacks, use a conditional statement.
Rich
you could either give a height to the id #content
or
apply the background:url("/images/Doelgroep-Background-Image.jpg") no-repeat scroll left top transparent; to #mainContent instead of #content
overflow for background-images is impossible, but you could set a min-height for content (or set the image in another div with lower z-index and position it abolutely to appear at the place you want - but thats a very bad solution)
The overflow attribute controls what happens to the div when the content is too big to fit - if you have a fixed-size div with some content that might overflow, you generally want the auto option. overflow has no effect on a background image.
For your case, it sounds like you want to specify a min-height on the content div. Note that this isn't supported by older browsers like IE6, which you may or may not care about. There are plenty of ways to work around this, though.
What you want is the 100% height you can achieve this with the following.
html {
height: 100%;
}
body {
height: 100%;
}
#content {
height: 100%;
}
You need the min-height and the body needs a height so every child element of the body will follow the rule.
Also by adding min-height: 100%; to all css rules will solve all your problems for any grade A browser.
If you know the #sidebar or #main will always have a visual height the same or larger than the background image then you can simply add the background image to:
.sub #wrapper #mainContent {
background:url("/images/Doelgroep-Background-Image.jpg") no-repeat scroll 0 150px transparent;
}
instead of where it is an the moment on #content
I'm working on a site that has a wrapper element, with a left and right sidebar, each floated within the wrapper. The left sidebar (which contains navigation) is clearing the right sidebar and pushing it to the bottom for some reason. I've tried fixing it in about 50 different ways. I originally thought changing the size and or margin would help. It didn't. I tried the 'display:inline' fix to no avail. I've tried a ton of other tweaks but I can not get it to work. You can view the site at www.ibgs2010.org and the css is www.ibgs2010.org/css/style.css (I'm trying to use a IE7 specific stylesheet to fix it). If anyone can help, I'd really appreciate it. I've burnt about 3 hours today just trying to fix this one little issue.
Looks like the problem is with the ajaxloader div - set its width to 697px (same as sidebar right) and that should fix your problem.
Try to remove the margins and paddings on your sidebar classes and have a inside wrapper with the margin and padding set to it. More failsafe this way so that margins don't increase the size of your div element. Browsers have a different way of rendering margins and paddings to elements.
Hope that helped you out.
Cheers
I think it's just that the floating content is being considered too wide to fit -- so, it's floating it down to where it will.
Instead of float, you might try position with left and right, respectively:
.content.wrapper {
position: relative; /* establish boundary for absolute positioning */
}
.sidebar.left {
position: absolute;
top: 0px;
left: 0px;
}
.sidebar.right {
position: absolute;
top: 0px;
right: 0px;
}
I propose you add the following:
#ajaxloader {
width: 737px;
float: left;
}
The width of 737px is derived from the 697px width plus the 40px left padding of of .sidebar.right
With this addition the IE7 and Firefox versions should look the same, give or take a pixel.
I include the yahoo reset css as the begining of every page (or css file). It really helps to level the playing field. Also with IE, always remember to specify width (even if it's 100%) and if your floating, make sure to display:inline.