Scrolling under a transparent fixed element - html

The problem image
I am working on a page with a fixed header that has transparent background. And i need to make the content below it somehow when scrolled under this fixed header disappear like how it would act if the header was non-transparent.
EDIT:
Fixed it by adding the same background to the transparent fixed element as the body and by adding properties
background-position: center top;
background-size: cover;

indeed, setting a background on the header with the background-position attribute works but I think it would be slightly better in your case to fix the rest of the content in place and set its overflow to scroll

Related

Background image not showing in nested divs

I'm having an issue where I my background image isn't showing in a specific circumstance, and when it does there are some issues.
<div id="indHeader">
<div id=" indImg">
content goes here
</div><!-- end of indHeader-->
</div> <!-- end of indImg-->
If I have the div ids swapped, the image shows as normal - the issue being it gets messed up when messing with the size of the page (the image reduces in size, but there is a growing margin like space above the image. The width remains 100%, but the height does not.) If I have it as it is in the above code, the background image does not show at all.
#indImg {
background-image: url("../images/index_header.jpg");
background-size: 100%;
background-repeat: no-repeat;
background-position: center bottom;
}
Would there be a way to have the background show in the indImg div, or to not have it move when adjusting the size of the page? If I remove the background-size style, it somewhat fixes it but then the image does not fit 100% of the browser width. Adjusting background-position changes where the height changes, e.g removing the current property makes the image go to the top, not the bottom.
Image sort of showing what I mean.

CSS Background Image limits to content instead of entire page

So, I made a gradient image for the background of my site and since it didn't have much detail I figured I would take the image and use background-image and stuff with CSS to stretch it out over the page. However, the image refuses to stretch vertically the correct way. I can get it to stretch horizontally just fine, but no matter what I do, it will not stretch vertically to 100% on the page, and instead it limits itself to the content on the page, which I do not want. The only way I can get the picture to stretch horizontally without dead-setting the pixel length is by using cover, but then it becomes too tall. Can anyone give me a piece of code I can use to expand the image to fit the page horizontally and vertically? Because it refuses to and I don't know why
This is the CSS code I have in my style tags in the head
body {
background: url('Background.png');
background-repeat: no-repeat;
background-size: 100% 100%;
}
For starters background-repeat is set to no-repeat.
You need to make the body fill the browser no matter how much content it contains or it will only repeat as far as the content.
Edit:
Make the page fill the browser winder no matter what the content.
html, body { height: 100%;}

Background image need to "stretch" on scroll down instead of staying static?

I have a background image which seems to be static on my website and when I scroll down it keeps scrolling with the page... I want the top to stay static and then when I scroll down for the rest of the page to appear as #FFFFFF...
html, body{background:#ffffff url(images/background-repx.png) repeat-x;height:100%;min-height:100%;}
Any ideas how to do this, I'm not familiar with CSS backgrounds.
Thanks in advance
- Hyflex
Try
background:#000000 url(<img>) no-repeat scroll center top;
To see this effect, using chrome, change the css to:
background:#FFFFFF url(<img>) no-repeat scroll center top;
Which sets a background colour AND image, places the image statically at the top, so that after scrolling down, the background colour is only visible.

Messed up absolute positioned image on my page

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;
}

Scroll background image of webpage with content

I have a webpage with a static CSS background, but the content is longer than the height of the image. This causes whitespace at the bottom after the image ends.
How can I make the image scroll along with the view of the user's screen?
background-attachment: fixed;
See http://meyerweb.com/eric/css/edge/complexspiral/demo.html for a more detailed example.