I am trying to replicate the header image background from the following site: http://vistachurchslo.com/sundays/what-to-expect
Each page has a header with a background image. Regardless of the size/aspect/orientation of the browser window there is ALWAYS white-space (a blank horizontal area) below the background image. The image is always filling the browser window (except for the bar below it). The page text is not visible until you scroll/swipe down.
Can this be done with plain CSS, or do I need javascript as well? I would really appreciate any help figuring this out.
Image attached to help see the effect.
THANKS!
The "white-space below the background image" isn't just a bar. That's the next section tag coming in. If you look at the css of that section:
background-image: linear-gradient(180deg, rgba(0, 0, 0, .2), rgba(0, 0, 0, .2)), url("https://uploads-ssl.webflow.com/571fb2df2ab0dfe37255621b/59d667e68849c400014a5c31_outside-vets2-hd.jpg");
background-position: 0px 0px, 50% 50%;
background-size: auto, cover;
background-repeat: repeat, repeat;
background-attachment: scroll, fixed;
height: 90%;
So they set the background to be the image, set the size of it to cover the section, and then set the height of the section to be 90%. This means that 10% of the next section will be visible, which is the "white-space" that you're seeing.
As for the scrolling, this is simple screen-wipe. I found Scrollmagic really useful for that when I was beginning. It allows you to add a "scene" for each tag you choose (in this case, the sections") and then add a pin to achieve that screenwipe effect. Here's a demo.
Related
I am creating a simple app with login, sign up and a home page. I want different full screen background image on each component. I set up 3 different CSS files for each component but all 3 components are taking the same background image. How can I achieve different background images?
Here is the CSS that I am using to set a full background image.
html {
min-height:100%;
background-image: linear-gradient(to right, rgba(255,0,0,0) 50%, rgba(0, 0, 0, 0.541) 50%), url("login.png");
background-repeat: no-repeat;
background-size: 100% 100%;
background-size:cover; }
I expect to have each component their own background image.
By looking at your problem, it seems you are not setting the background image for a specific component. Assuming this is client-side rendered single page app, HTML is not getting reconciled, only your components are getting updated.
Try to set up a background image within the component.
How can I use background-repeat with multiple images? The primary background image is static and only sits at the top of the unscrolled page.
Once the user starts to scroll down on longer pages, there is a secondary background image than blends in with the first image.
This image repeats infinitely (if necessary) for long pages.
How can I do this?
This is what I have tried:
background-image:
url(../images/background/large/static.png),
url(../images/background/large/repeat.png);
background-repeat:
no-repeat,
repeat-y;
background-position:
0px top,
600px top;
The static.png background page is on top and displays from 0 to 600px. The repeat.png then starts at 600px and keeps repeating down to infinity if necessary. The static page should only display once at the very top. Any suggestions? Thank you!
I think one big problem is, background-repeat is only applied once and to both images.
Got everything working. The issue was with the background-position. I did not understand the syntax. 600px from the left and align to the top is what it says in the above example. I thought its meant 600px from the top. When I tried using the real number it was putting the image way off the screen at right making it feel like it wasn't working. I understand the syntax now and all is working perfectly. Thanks!
background-image:
url(../images/background/large/static.png),
url(../images/background/large/repeat.png);
background-repeat:
no-repeat,
repeat-y;
background-position:
left top,
left 600px;
What I tried:
#page-text {
background-image:
url(./images/paper-top.png),
url(./images/paper-bottom.png),
url(./images/paper-mid-2.png);
background-repeat: no-repeat, no-repeat, repeat-y;
background-position: 0 0, 0 100%, top 10px;
background-size: 100% auto;
}
Unfortunately the repeating part repeats all over #page-text and since paper-top is partly transparent, paper-mid-2 is visible in those transparent parts. For illustration notice the top corners of the paper (or see the live version)
You are probably better off dividing #page-text into three vertical sections. A nice way to do that without extra HTML is to use :before and :after on #page-text, holding the top and bottom background images and placed above and below #page-text respectively. That way, you can let the middle background image repeat as much as needed without interfering with the top and bottom background images. You also then don't need CSS3, thus providing a more backward-compatible solution.
I am having a great deal of difficulty with getting rid of the white space at the bottom when I apply a CSS3 gradient and the content has insufficient height for a scrollbar.
Such as here: http://womancareolympia.webs.com/
I have tried playing with setting both html and body heights to 100% or auto. I am able to make the gradient go to the bottom this way, but then when content requires a scrollbar, the content flows past the gradient.
Thanks for the help!
Add min-height: 100% to body.
Remove all instances of padding-top from body (or otherwise set it to 0).
Set top: 129px on #fw-container.
Set margin-bottom: 110px on #fw-container.
Add overflow: hidden to #fw-foottext.
(tested in Chrome+Firefox only)
I do think you should redesign your CSS to not use stuff like top: 100px and margin-top: -50px all over the place. There's just no reason for it.
I had the same problem. This can be resolved by adding the following properties to the body element (where the linear gradient has been defined)
body {
background-image: linear-gradient(
to right bottom,
var(--clr-primary-100) 0%, // Random colors
var(--clr-primary-900) 100%
); // Linear gradient
background-size: cover; // Add these properties to your body tag
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
}
I hope this helps. Let me know if you face any problems.
Could someone explain to me what this portion of code means?
repeat scroll 0 0 #F6F6F6;
I have googled a lot and only found syntax to this part
-moz-linear-gradient(center top , #FFFFFF, #EFEFEF)
My code:
background: -moz-linear-gradient(center top , #FFFFFF, #EFEFEF) repeat scroll 0 0 #F6F6F6;
Thanks!
These are actually part of the background CSS property, not -moz-linear-gradient. Have a look at that link, it should explain.
Basically:
repeat: The background repeats!
scroll: When the page scrolls, the background scrolls too
0 0: Says, "start the background from this point in the image".
All the extra stuff is probably unneccessary - they seem to be the same as the defaults.
background: <image> <repetition> [scroll] <pos-x> <pos-y> <color>;
image can be both an image url() or in some browsers, a gradient object.
repetition can be no-repeat, repeat-x, repeat-y or repeat (both) and means how to repeat the image if it doesn't fill the background.
if scroll is set, the background will stay fixed on the screen and not follow the text when you scroll.
pos-x and pos-y determines the offset of the background.
color means the color that used if the image value was invalid.
Those are additional options to the background: css shorthand.
The repeat repeats the image (although, -moz-linear-gradient doesn't support repeating).
scroll (as opposed to fixed) allows the background to "scroll"
0 0 are x and y coords for the placement of the top left corner of the image.
#F6F6F6 is a background color