Messed up absolute positioned image on my page - html

On this site I have an auto-resizing BG but I wanted a fixed black bar at the bottom of the page.
The site looks fine when the browser is maximized but when you scale the window down and scroll down the black bar almost completely gone and it looks messed up. It is not positioning correctly.
I have tried a few things but can't figure out a solution to this. Does anybody have any ideas how I should go about this? (Maybe I am missing 1 little thing or maybe I need to start over from scratch, either way please help!)
Note: the auto size background is in the html tag and the black bottom bar is in its own separate div tag "#black_bottom"
http://graves-incorporated.com/test_sites/gm_2012/

Just remove height:100% from #black_bottom make the absolute:position div height auto.

You have everything wrapped incorrectly I believe. Why does your <div id="black_bottom> contain everything from your wrapper to your <div id="footer_wrap">?

Ok, so I think I see what you're going for now. If my understanding is correct, you want the gradient background to extend to about 70-73px above the bottom edge of your content box, where it meets the solid gray bar which extends to the bottom of the window, or just below that bottom circular G emblem, whichever is lower. I've accomplished this by removing the #black_bottom element entirely, setting a solid gray background color for the html element to match the color of your bottom bar graphic, and applied the circular gradient background to the body element. I've also removed the explicitly-defined height from #wrapper, and given it a negative margin-bottom to allow the black bar to underlap it. The styles I replaced are listed below. Hopefully this is closer to what you're after:
html {
background: #333;
}
body {
background: url(http://graves-incorporated.com/test_sites/gm_2012/images/bg.jpg) no-repeat center center fixed;
background-size: cover;
height: 100%;
}
#wrapper {
width: 960px;
margin: 0 auto -136px;
top: 20px;
position: relative;
}

Related

Setting the body background relative to entire page instead of viewport

I've been dealing with a problem for a day now, and I seem not to be able to solve it. I've got four images I want to use as CSS background on the <body> tag. They are supposed to be aligned as the corners of the page.
According to multiple resources I should set the min-height on both the html and body element to 100% if I want the placement my CSS background to be relative to the entire content of my page (which extends beneath the viewport) and not just to the viewport. However, this is not working. The bottom two corner images seem to be stuck to the bottom of the viewport.
I'm using this for CSS:
html {
min-height: 100%;
height: auto;
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
min-height: 100%;
height: auto;
background: url(../images/bgTopLeft.png) no-repeat left top,
url(../images/bgTopRight.png) no-repeat right top,
url(../images/bgBottomLeft.png) no-repeat left bottom,
url(../images/bgBottomRight.png) no-repeat right bottom;
}
My HTML shouldn't matter much here as I'm using the <body> tag, can't do much wrong there. The doctype is HTML5 in case anyone wants to know.
I've tried changing the setting of background-attachment to fixed, I tried the various settings of background-origin even though it doesn't seem to have to do anything with my current problem. I tried breaking up the multiple shorthand background into all the separate statements that are in there. I can't get it to work.
I'd rather not resort to sticking the bottom two corner images into a footer or a div at the bottom of my page that's just there for styling purposes. What I want, which is a <body> tag with four backgrounds positioned in the four corners of the entire page, should be possible, I just can't figure out what's going on here.
I've made a pen of what I think you're trying to achieve here:
Codepen example
I've used background-size to size the background images.
You may need to tweak this to match the size of your background images:
eg:
background-size: 40px 40px, 40px 40px, 40px 50px, 60px 60px;
depending on what size your images are.

How can I make a white rectangle extend all the way down, on top of another background?

I'm a complete beginner. I tried my best to search for a solution, but part of the problem is that I don't even know what the technical term is for the thing I'm trying to do.
Essentially I want to have a tiled background repeating everywhere, but then also have a white rectangle that extends from the top of the page to the bottom, occupying roughly 50% of the horizontal screen space. How would I go about accomplishing this?
If I get it correctly, you might just want a repeated background of the page and then absolutely-positioned <div> with white background.
This is pretty basic stuff, I suggest you take a beginner's course in HTML and CSS before going too much further.
body {background: url(tile.png) left top repeat;}
content {background-color: #fff; margin: 0px auto; width: 50%;}
I hope this is what you wanted. It is a tiled, repeating background with a white strip, half the screen space, going down the middle. If you want a tiled background, you don't need to define anything in CSS, and CSS will do it for you, but I'm not sure with the browser compatibility so it might be safer to explicitly define repeat:.
First of all, to those complaining that height: 100% does not work, note that the div with height: 100% is only being the height: 100% of its parent element (the container that encloses the div, in the case of this JSFiddle, the #container). Therefore, if its parent has no content, the div with 100% height will become invisible.
Therefore, the html, body and container must all have height: 100% for the white strip to have 100% height here in this JSFiddle:
JSFiddle
After this you are free to add any content to the white strip, which will probably be your webpage! :D
Note: Here I have defined the strip as width: 50%; but sometimes it may be better to explicitly define the width (width: 1200px;) so that you can avoid problems with the text and divs going haywire when you zoom in, zoom out, etc.
Edit:
Also, since the height of the container increases as you add more content, such as divs, the problem with the white strip not reaching the bottom of the page is that you simply have nothing that fills it up. As you add more content the strip will naturally grow to fill the page. Good luck!
Solution 1
Here's a solution that uses only the background CSS property applied to document body, no extra elements needed. It's documented so you can understand whats going on.
body
{
/*
* This specifies two background images, separated by comma
* First parameter is just a white pixel
* For the second use any background pattern of your choice
*/
background-image:url("http://i.imgur.com/qdx0kzd.png"),
url("http://subtlepatterns.com/patterns/tasky_pattern.png");
/*Center background images, self-explanatory*/
background-position: center;
/*Repeat white background image on Y-axis (vertical) only*/
background-repeat: repeat-y, repeat;
/*Make white background size 50%. Adjust as needed*/
background-size: 50%, auto;
}
You can see an example in this fiddle: http://jsfiddle.net/dV2zZ/6/
Solution 2
This solution applies different backgrounds to different elements: the pattern to the document body, and the white background to a content container. Code is also documented for better understanding.
HTML
<div id="content">Content</div>
CSS
html, body
{
margin: 0;
/* Make document size extend to the bottom of the page */
height: 100%;
}
body
{
/*Patern background. Use a pattern of your choice*/
background-image: url("http://subtlepatterns.com/patterns/tasky_pattern.png");
}
#content
{
/*Make container background white*/
background-color: #FFFFFF;
/*Center container*/
margin: 0 auto;
/*Size 50%, adjust as needed*/
width: 50%;
/*Extend to the bottom*/
height: 100%;
}
See an example fiddle here: http://jsfiddle.net/jDRG3/1/

CSS - Can an image overlap a page border without affecting page width?

I have the following element in my initial page concept:
http://tinyurl.com/bcmcxp9
The ribbon is a PNG image. What I'd like to be able to do is position this image exactly over the border of a box-shadowed div (representing the page content), without affecting the page width.
I've tried a couple of techniques.
By using position:absolute, I've been able to achieve the visual effect I was looking for, but it brings up the dreaded horizontal scrollbars! I want the edge of the div (not the edge of the image) to represent the edge of the page.
#banner-ribbon {
background-image: url(ribbon-right.png);
background-repeat: no-repeat;
position: absolute:
width: 419px;
height: 114px;
left: 700px;
top: 400px;
}
By using a div that sits between the content wrapper and the background, I've been able to position the image in the right place without affecting the horizontal scrollbars (sort of, I might need a little javascript to absolute-position it relative to the center), but I can't raise the image's z-index above its child divs!
#banner-ribbon-wrapper {
background-image: url(ribbon-right.png);
background-repeat: no-repeat;
background-position: 90% 400px;
z-index: 70; /* does nothing */
}
Any ideas?
It sounds like the image is extending the boundaries of the page, causing the horizontal scroll bars. One way to fix this may be to set a width for your page and then hide anything that goes outside of it. Something like this may work for you:
body {
width: 100%;
overflow-x: hidden;
}
Example jsFiddle
Give your content div
position: relative
and to your ribbon
position: absolute
right:0
Make sure your image don't extend boundaries uncontrollably.
Working sample on JsFiddle:
http://jsfiddle.net/BrvJk/

Fixed header with transparent background CSS oddity

I've been baffled by a CSS issue with a fixed header, so I'll just jump into it.
Basically I'm using the same image fixed position for both the header and a div in the body, to make it look like a seamless background. Then as you scroll down, the content in the div goes under the transparent header. But something is going wrong once I scroll past the end of the div with the background image. I've played with z-index, but Chrome/Safari doesn't seem to like that. (I can only imagine how IE would handle this). Works as intended for me on Firefox 16.
Anyways, the site itself is at www.meeker.io. Any help in the right direction is greatly appreciated.
try changing your css:
.topBar {
background: url(bgRailsColor3.png) no-repeat top left;
}
.rails {
background: url(bgRailsColor3.png) no-repeat top left fixed;
}

Slider image and background repeat?

I have a slider that for some reason is half obeying margin 0?
Also, is there anyway I can make the top bar background not have such a large white border around it? I'm trying to make it start right underneath the browser url bar but it seems to leave a fairly large gap?
http://ispiked.net/tests
Add position: relative to the div with class="oneByOne1". That should fix the slider.
As for the top bar, add margin: 0; to both the body element and the p element inside .topbar - afterwards you might want to add something like padding-top: 15px to that same p element.
Also, is there anyway I can make the top bar background not have such
a large white border around it?
tried CSS like
html, body { margin: 0px; padding: 0px; }
to reset the layout at the beginning?