I'm trying to get a background image to start and stay in a fixed position, but only until the rest of the 'content' of the page is finished, at which point the full image is displayed.
I'm working on a purely CSS solution. I should note that the image is larger than most (laptop) screens.
Specifically, here's the code that I've been using:
body {
background:$bgcolor;
background-image:url('http://i.imgur.com/cIGSehG.jpg');
background-repeat:no-repeat;
background-position:0px 72px;
background-attachment:fixed;
margin:0;
...
}
The image that I'm using is given in the url():
The effect that I'm looking for is basically the image will display only about the top 10% of the grass hill while you're looking at most of the page, but if you finally scroll all the way down past all the page content, the remaining 90% of the grass hill will be shown.
I couldn't find this anywhere, but I may have just been using poor search terms since I'm not so familiar with the lingo.
Well, this was one jiggy nut! I did come up with a not so stable trick to achieve this. I don't have time to develop it any more right now, but perhaps it might be a working concept.
Main contept
By providing a large and empty footer area that the user is likely to hover when reaching the bottom of the page, we use a sibling selector to change the position of its sibling element containing the background:
#footer:hover ~ #background {
background-position: center bottom;
}
Along with a few quirks (which ought to be improved) we can achieve a parallax effect.
Go Fiddle
Check out this JFiddle (in Chrome) to see and play with it.
Related
What I want to achieve:
I am doing the very familiar CSS zen garden however I can't seem to get the image to float like this. I want it at the top of the page and to stay at the top like a toolbar like stackoverflow has mounted to the top of the page.
Unfortunately, any time I try to display my image it is not only behind the text but also far too large. I only see about 1/3rd of my image. If I try to scale it in any way then it disappears completely. I have seen that other people do this with the added <divs> but I am told that I should use ::before to do this ....either way I can't get either to even display my image ...the only thing that does barely work is ...
body{
background: url("../CSSMidterm/Header.png") center;
}
but as I said that displays 1/3rd of the image....any idea how I can rectify this situation?
To make it clear, I am asking how to mount an image to the top of a webpage using ONLY CSS no touching HTML at all. I want it to be fairly similar to the toolbar at the top of Stack Overflow own page.
You can try this
body {
background : transparent url("../CSSMidterm/Header.png") no-repeat center center/cover;
}
Link to the documentation for background css
I am helping a friend setup a web site for his company. At the top of the page, below the navigation bar, I have a background image of a house that is set to 100% width, image size is 2400px x 1602px. My problem is how to control the image so that the house is always front and center. I also need to keep the height at (or around) 75vh.
I have tried using background-size: cover and contain, as well as setting background-positions. But with the way cover works, the house is not always centered. Especially when browser width is larger--then only the roof of the house is visible. Next I tried using the aspect ratio of the image for padding. This works well, but does not allow me to set height (as far as I can tell) so with larger screens I end up with the height being way to big.
Was hoping someone might have a suggestion that would help me out and point me in the right direction. What I would like to have in the end is an image of a house where the house is always viewable and also be able to keep the height # 75vh. I have a feeling that media queries may be my answer, but wanted some advice before I continue on that path. Also wasn't sure if I need to crop my image to limit the height? I have tried so many different things that I am not sure how to proceed. Thank you for any suggestion, I really appreciate it.
I think the background cover image is the right approach, you might just have something wron gin your code that is not centering the image and that is why you only see the roof (top part of the image I assume) instead of the middle part in very panoramic screens.
Here is the code I would use:
This is the HTML
<div class="header">Your menu and other header stuff goes here</div>
<div class="bg_image" style="background: url('https://www.marriedwithmoney.com/wp-content/uploads/2017/06/house-1024x698.jpeg') center center / cover no-repeat;"></div>
And this is the CSS
.header {
width: 100%;
height: 200px;
background-color: #ccc;
}
.bg_image {
width: 100%;
height: 75vh;
}
and here is a working example which does what you inted if I understood your situation correctly https://codepen.io/anon/pen/REerRR
Hey all this is my first question on here go easy on me. I'm learning CSS3 and came across an effect that I wanted to use. I'm not sure if it's simply classed as parallax scrolling or if there is a specific name for it.
The effect doesn't show on mobiles...
http://www.anotherstory.co/home/
At certain points scrolling down there is a different static background behind the content. What is it called and how is it achieved? Any links to references would be appreciated.
Cheers!
I don't know what it's called, but it's achieved like this (extra stuff removed):
// first div
.intro-text {
background: #fb860a url("../css/images/Office2.jpg") no-repeat fixed center center / cover ;
}
// second div
div.Services {
background: #454545 url("../css/images/Office3.jpg") no-repeat fixed center center / cover ;
}
Parallax is an effect where we have the objects positioned at same line of sight but they move at different speeds when we scroll our page this creates an illusion of objects moving at different speeds.
Refer This link
http://www.uiupdates.com/how-to-create-a-simple-parallax-scrolling-webpage/
I have a navbar and footer than I grabbed and customized from Bootstrap's site. I now want to have a background imagine, but I'm unsure how to do this. I know if I wanted to have just an imagine, I could put it in a div between the navbar and footer and set play around with height:100%; width:auto; so that it resizes with the browser (although this doesn't work perfectly without some modifications) but I don't know how to do this if I have body { background-image: url('...'); } I have a large resolution picture in there right now, and on a 1080 screen it doesn't scale down, it just shows 1080px of the original imagine. Is there anything in Bootstrap or CSS tricks I can use? This might be trivial to some but I am new to this, just finished Codecademy courses which introduced me to Bootstrap and now I'm trying some stuff on my own.
So to recap I want to have 16:9 ratio of a large picture, if the browser becomes to narrow, I want the height to stay the same and start "cutting off" the left/right sides of the image so that the center of the image is still in the center of the browser. Likewise for vice versa. the height:100%; width:auto; doesn't quite work because if the ratio is wrong, it stretches the image.
I also want to have a different picture if the website is accessed from a screen-reader, but that's a project for another day. Let me know if I need to clarify anything, and thanks in advance
Use your CSS this way to make the background responsive.
body {
background-image: url("myimage.jpg");
background-size: cover;
}
Then when the page becomes "too narrow" use media queries to switch the background-size properties to actual width and height that work the way you have in mind.
I've got this peculiar bug I've been trying to fix today—-still no luck.
If you look at the example below,
http://vitaliyg.com/alpha/hire/
Here's what happens. The full-width background image loads in the correct position, centered along the y axis. Then when we hover over the image, the whole image jumps over to the middle, and slowly adjusts itself back to it's normal desired position.
What's causing this is left: 50%; margin-left: -960px;. This allows us to center the image correctly to begin with. If we didn't have this CSS, the hover wouldn't jump, but the image would load anchoring itself on the top left of the browser.
In the link above, the red box is the content div. The blue box is some text that will be parallaxing with the background-image.
Here is what I am trying to achieve:
Make the background-image appear centered.
When the user hovers over the background-image, it would not jump to the middle of the page.
And lastly, decrease the width of which the user would be able to "parallax" on the x axis. The way it is now, is that the user can see from side to side of the image if patient enough. I want the parallax to be very subtle.
Also, I'm using jParallax, found here:
http://stephband.info/jparallax/
Thank you for your help!
Once you set the position via CSS for the background image, it seems jQuery Parallax plugin alters those settings. The solution then is to apply those settings after the jQuery Parallax has dealt with that parallax layer.
First, remove the margin-left and left from your .parallax-layer#background class.
.parallax-layer#background {
background-image: url('../images/bg.jpg');
background-repeat: no-repeat;
background-position: center bottom;
width: 1920px;
height: 620px;
}
Ideally, center the blue box using the same method (unless you want it partially off screen). I've also removed non essential CSS based on your HTML.
.parallax-layer#tagline {
background-color: blue;
width: 400px;
height: 400px;
}
Finally, add the CSS rules that were removed from the background and tagline selectors so they are applied after jQuery Parallax has manipulated those items.
jQuery(document).ready(function(){
jQuery('#parallax .parallax-layer')
.parallax({
mouseport: jQuery('body')
});
jQuery('#background').css({marginLeft: "-960px", left: "50%", bottom: "0px"});
jQuery('#tagline').css({marginLeft: "-200px", left: "50%"});
});
You no longer will see the large white section (body background color) to the left of the background image when the mouse enters the viewport.
This jQuery Parallax plugin aligns everything top/left by design. If the mouse enters the
viewport from the right of the blue box, that box animates to that location correctly.
However, should the mouse enter from the left side of the blue box, that box will 'jump' to the cursors location. You might consider removing the last jQuery line above so the blue box is top/left upon browser load or use a lower percentage value like 25%.
For those that landed on this Question/Answer and wanted some real markup to work with, I have set up two jsFiddles. One jsFiddle duplicated the problem and the other has the solution as shown above.
Original Problem - jsFiddle
Fixed Applied - jsFiddle
Both jsFiddles are in full screen mode so the Parallax effects can be seen.
Instructions to view Original Problem:
1. Launch the above Original Problem jsFiddle Link.
2. Press the jsFiddle Play Button, being careful not to enter the viewport. If the blue box moves in any way... you've entered the viewport so press the play button again.
3. Enter from the top/left of the viewport and you will see the problem... the HTML Body (white color) is seen as the background image readjusts itself.
4. Press the Play Button at any time to reset the webpage.
To see the Fixed Applied, either launch the link above or at the Browsers Address Bar modify the URL so you see revision 1 of that jsFiddle. (i.e., http://jsfiddle.net/UG4Sq/1/embedded/result/ )
The blue box indicates via text which jsFiddle your viewing. Cheers!