Menu
I've researched this topic for the past 2 days straight, tried 250+ variations of code, and am at my wits end, which is why I'm now here... I feel like I'm very close to a solution so hopefully someone here can put it over the edge...I'm fairly new to CSS so if I'm way off base here I apologize...
I am trying to achieve an effect that you can view on stumbleupon.com's homepage. When the page is loaded, the bg image perfectly fits into the viewable area of the browser regardless of resolution. The bg image is not fixed and you can therefore scroll down to view more content. You can see the exact same effect on http://www.bakkenbaeck.no/ ...again original image fits perfectly, and is not fixed with content below.
I thought I finally found my answer when I came across the StackOverflow question and answer here Making a div fit the initial screen
I followed instructions there and came oh-so-close...but no cigar.
You can view my test domain I've set this up on at www.konnect.co
The code I entered for this bg image is
#wrapper-8 {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background: url(http://bakkenbaeck.no/content/01-work/01-easybring/01.jpg)
no-repeat center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
This displays the image perfectly in 2 browsers that I've checked. However, the bg image is completely overlapping the content of the 2nd div on the page. I created a 2nd div, gave it a bg color and added a bit of content to test, and it's invisible hiding behind the bg image from the div above it. If you resize the browser to a smaller size it will then allow you to start to scroll as the bg image gets small. Am I missing something with the bg image div height here? I've tried several height options but can't get anything to change. Any help would be greatly appreciated.
841
position:absolute You can also use position absolute as well as set all the viewport sides (top, right, bottom, left) to 0px will make the div take the full screen.
Using CSS, you can set the background-size property for the image to fit the screen (viewport). The background-size property has a value of cover . It instructs browsers to automatically scale the width and height of a responsive background image to be the same or bigger than the viewport.
To keep your background fixed, scroll, or local in CSS, we have to use the background-attachment property. Background-attachment: This property is used in CSS to set a background image as fixed or scroll. The default value of this property is scroll.
For vertical scrollable bar use the x and y axis. Set the overflow-x:hidden; and overflow-y:auto; that will automatically hide the horizontal scroll bar and present only vertical scrollbar. Here the scroll div will be vertically scrollable.
Here is Your solution:
Use absolute positioning to both class and put the content after it with top: 100%!
.image {
position: absolute;
width: 100%;
height: 100%;
background-image: url(images/bg.jpg);
background-size: cover;
background-color: purple;
}
.content {
position: absolute;
top: 100%;
width: 100%;
height: 200px;
background: yellow;
}<div class='image'></div>
<div class='content'>Here is Your solution!!! :-)</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
