I have a page where the content is positioned in the center of the page using margin:auto and I want to add a background that is centered the same way but because of the background doesn't appear when I scroll down I have resorted to using position:fixed which nicely does the trick.
However, positioning it centrally the same way as the content is proving a huge challenge because playing with left:x% and margin-left:-y% is a nightmare and never quite works well that all screen resolutions.
The markup is simple:
<div id="main" class="container">
<div class="overlay"></div>
<div id="content"></div>
</div>
You can see the site HERE
The BEST CSS configuration I came up with is this:
.overlay
{
position: fixed;
top: 0; /* These positions makes sure that the overlay */
bottom: 0; /* will cover the entire parent */
left: 0;
width: 72%;
margin-left:14%;
height:100%;
background: #000;
opacity: 0.45;
-moz-opacity: 0.45; /* older Gecko-based browsers */
filter:alpha(opacity=45); /* For IE6&7 */
}
I've tried many combinations but the background always resized differently than the content and I would want it to stay in place.
Position:absolute with margin:auto works perfectly well except when you scroll down.
The above configuration works nicely except the "min-width". If I could get it to stop minimizing after a certain point, this would be perfect.
Many thanks in advance if you have a solution to this
you could use background-attachment: fixed for your background, instead of using empty markup for styling purpose. in this way you will see it even when you're scrolling down the page.
Related
I am attempting to position a background image so that it lines up with an existing gradient background, which is relatively positioned to the <html> element (ie. the gradient image appears at 92% of the browser width, no matter how you size the window).
I did it by placing the image inside a <div>, positioning the image relative to the <div>, and positioning the <div> relative to the browser window.
eg.
<body>
<div id="background-position-container">
<img src="images/bubbles.png" id="background-corner-decoration" />
</div>
</body>
with:
<style>
#background-position-container {
position: absolute;
width: 0px;
height: 0px;
top: 180px;
left: 92%;
}
#background-corner-decoration {
position: relative;
/* tweak the position of the image so it lines up with the gradient */
top: -176px;
left: -118px;
width: 216px;
height: 477px;
margin: 0px -118px -176px 0px;
}
</style>
This seems to work well, but if you shrink the browser window horizontally, the background image will cause the <body> element to grow beyond the <html>element, and scrollbars appear.
I seem to be able to fix this by creating a new sibling element of <body> and placing the <div> inside that:
<div id="background-page-container">
<div id="background-position-container">
<img src="images/bubbles.png" id="background-corner-decoration" />
</div>
</div>
<body>
</body>
and adding:
#background-page-container {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
overflow: hidden;
}
This works in Firefox at least, but this does not seem like a good practice and I'm sure all browsers do not render this properly. Is there a better way to accomplish what I want while leaving all display elements inside <body> (That is, having the background image clipped at the edge of <body> instead of growing it)?
Thanks for your help,
gs.
Edit: As requested, here are jsfiddles to illustrate the problem:
Here is what it looks like with Hiigaran's solution: http://jsfiddle.net/kn36A/
Here is a solution that aligns properly, but causes unsightly scrollbars when the window is re-sized: http://jsfiddle.net/w446Q/
Here is the "best" (?) solution I have so far, but it seems to violate HTML best-practices: http://jsfiddle.net/H2PLr/
Every browser I have tested #3 with seems to render it properly so far - is this solution really as bad as I think it is?
Thanks again!
gs.
Assuming I read correctly...
You can combine background CSS by separating them with commas. So for instance, if you want to have an image and a gradient as the background for the same thing, try:
background-image: url('image.png'), linear-gradient(#bb0000, #0000bb);
You can then add other background CSS properties like background-position in the same manner:
background-position:50px 50px, 0;
The order of the values matters. The first set of values (50px 50px) applies to the image, but not to the gradient. The second background-position value (0) applies to the second background-image value, which is the gradient.
Using this on your HTML, you should be able to position your image with absolute or relatively values.
EDIT: Also, if you add any additional background property without commas, then the value you provide will apply to all backgrounds. For example, background-repeat:no-repeat will not repeat either the image or the gradient, but background-repeat:no-repeat,repeat will be applied to each in the same way that the position values are.
In the comments of the other answer Hiigaran solved the problem by simply starting with solution #3 and moving the outer containing div (called "background-page-container") under <body>. So there's no need for elements to appear outside of <body> as I had thought.
gs.
I am making my website on SquareSpace and I am beyond frustrated.
I like to have a background (which squarespace offers user to do without code) and like to have some sort of semi-transparent cover on the portion of the background where the text is. I think it's called overlay(?).
Squarespace allowed user to add CSS code. I have no idea what to do. I tried to google, youtube and etc. but I can't seem to find how to do this. Can someone help me? I would really appreciate it. I spent so much time trying to figure this out. What I am trying to do is something like this (http://blog.squarespace.com). There's background, and there's semi-transparent on the top that covers portion of the background.
Add a div, set it to position: fixed, have all of it's location values (top, bottom, left and right) at 0, and give it an rgba() background.
Note that this will make anything under it unclickable (unless you also give it pointer-events: none).
Here is a jsFiddle example of the concept.
Madara Uchiha's answer will cover the entire visible window, not just part of it. It won't work on certain mobile devices, either (iirc, Android WebKit doesn't support position: fixed).
A better suggestion would be to do something like the following...
HTML:
<div class="wrapper">
text
<div class="overlay"></div>
</div>
CSS:
.wrapper
{
position: relative;
display: inline-block; /* You could alternatively float the div, this is just to get it to fit the text width */
z-index: 0; /* Not strictly necessary, but establishes its own stacking context to make it easier to handle compound/multiple overlays */
}
.overlay
{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 255, 0.5);
z-index: -1;
}
JSFiddle showing previous version, with which the text is affected by the overlay, and current version, with which the text is not (and usage of pointer-events: none is unnecessary): http://jsfiddle.net/LGq8f/1/
Of course, if you don't want as fine control over the overlay area that the inner div gives you, you could instead just use display: inline-block or float: left/float: right, plus the alpha-valued background color, on the text-wrapping div and skip the overlay div.
I am working on a project for a class and have an issue.
The site can be found here: http://ispace.ci.fsu.edu/~seb10/cgs2821/proj10
What I have now is a div that I have positioned towards the bottom using inline styling in the HTML and a div.
It appears fine right now, but of course that depends on the browser that is being used.
I would like that image to always appear at the bottom without having to use inline styling. Essentially, I would like it to stick out of the footer, but not have anything else be affected or moved.
What would be the process to do this, if it is possible?
Here's a link to the CSS: http://2011.ispace.ci.fsu.edu/~seb10/cgs2821/proj10/style.css
Thank you very much for the help in advance.
I assume that the oil well tower image is the one to be positioned. I would create a .png file with a transparent background and then set it as background image to the .container element.
The .png transparency will allow the other background motif to show through in the open spaces (transparent) sections of your vector image.
This works fine as long as your footer elements flows right after your container element.
The key is place the image with position absolute. I have moved the mast illustration to the footer: http://jsfiddle.net/David_Knowles/98PLA/
Does this solve your problem?
#footer .container {overflow: visible;} /* use a different technique to wrap floated elements so you can place image in the footer and have it stick out - see underneath */
.fltright {position: absolute; bottom: 56px; right: 0;}
/* For modern browsers */
.container:before,
.container:after {
content:"";
display:table;
}
.container:after {
clear:both;
}
/* For IE 6-7 (trigger hasLayout) */
.container {
zoom:1;
}
<div id="footer">
<!-- Begin Container -->
<div class="container">
<img class="fltright" src='http://2011.ispace.ci.fsu.edu/~seb10/cgs2821/proj10/images/derrick.png' alt="derrick" width="300"/>
<h1>Copyright © 2013 <br />All Rights Reserved</h1>
<h3>Webmaster |Site Map | About</h3>
</div>
<!-- End Container -->
</div>
<!-- End Footer -->
To make an image ignore it's parent element, a combination of positioning and z-index can be used:
position: absolute;
z-index: 2;
You can also try playing around with the display and overflow properties depending on exactly what you want it to look like.
When I looked at your code, I came up with these css values to absolutely align your .sidebar on your page. You had position: relative; to position it, however, it moves relative to how the large the window is and the surrounding elements. This is why it was probably moving around. However, position: absolute; does not consider surrounding elements and therefore will stay put.
.sidebar {
position: absolute;
top: 233px;
right: 10px;
}
Does this work in > iOS 5?
.element {
background: url(images/myImage.jpg) 50% 0 no-repeat fixed;
}
I thought that it should, but so far it isn't.
You can potentially get around this using a separate element and position: fixed which does work!
HTML:
<div id="Background"></div>
<div id="Content"></div>
CSS:
#Background {
background: #000 url("img/Background.jpg") no-repeat 50% 0;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1
}
According to this background-attachment support matrix, no.
Another post suggests that coming up with a workaround for mobile devices is not worth it:
...both Android and iPhone block timers or render during scroll, so the
effect is that divs move with the scrolled page and only after,
eventually, divs come back in the expected position. This is against position fixed idea
There are too many issues with the fixed position on mobile and touch devices.
As long the background is not animated in any way(blur, css transistions any JS) AND as long there is no scrollbar, then it is usable and consistent.
Everything else will-depending on browser- result in undesired results, image pixelation, images scaling 100 fold on IOS devices, "jumping" divs etc.
The best work around method i have found so far, say, if you want to reproduce a fixed BG scroll page, is to use the parallax method, having one div as scrolling, the next with background transparent, rinse repeat.
It looks good enough I think, and no plugins are needed.
yes another problem with this scroll bar
alright so I started the website over again that was mentioned here
and I am having problems with this scroll bar again
alright so all I have is a single image in a div tag
<div align="center" id="SuggestionBox">
<img src="images/SuggestionBox.jpg"/>
</div>
this code displays right but
when I make the browser window small enough that the full image can not be seen it doesn't give me a scroll bar to see the whole image
hopefully this makes sense
I am using firefox
EDIT:
I tried overflow:scroll and it did not work
this was the outcome
and this happened in the middle of the page
I also tried 'overflow:scroll' on the body of the page through css and all it did was show disabled scroll bars that did not change no matter the size of the browser
also some people are a bit confused
so
this picture might help
notice how the image is not fully shown
well, I want there to be scroll bars in case the user wants to see the whole image
but they're not appearing
also here is all my css code:
body
{
background-image:url("images/background.jpg");
}
a:hover
{
color:#FF0000;
}
table
{
background-color:#FFFFFF;
}
#SuggestionBox
{
position:relative;
right:375px;
}
thanks
Good Luck
get it?
I may not be understanding your question, but it looks like your problem is that you've disabled scrolling in the body but would like the div to scroll. #lukiffer's answer is right. When you resize your browser, however, the scrolling div, which is a fixed size, isn't overflowing because its content still fits.
Are you wanting your "SuggestionBox" div to anchor to the page so that it resizes along with the page? That would enable it to change sizes as the browser does and thus add scroll bars when its content doesn't fit:
#SuggestionBox
{
position: absolute;
/* Change these to establish where to place the div. All zeroes
means it fills its whole container */
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: scroll;
}
Update:
I don't get what #SuggestionBox is supposed to be. If you're just wanting a centered image link, you could get rid of the div and just have this as your markup:
<a id="SuggestionBox"></a>
And for that <a/>, you could have the following CSS:
#SuggestionBox {
display: block;
width: 100px; /* Or whatever the width is */
height: 100px; /* Or whatever the height is */
background-image: url(images/SuggestionBox.jpg);
margin: 0 auto;
}
If your reason for having the div was to give your link a right margin of 375px, your CSS could have the margin set to 0 375px 0 auto instead.
If you use this simple HTML/CSS, your body should be able to scroll normally (unless you have other CSS or HTML that you haven't posted that's breaking it).
div#SuggestionBox { overflow:scroll; }