Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Nestor Segura
13,025 Pointshow to fix an image to the width and height of a windows sizes?
I want to stabilish an image as a background on the index on my personal site, and I want the size to be always the size than the windows and at the same time that the content after this image only show after pressing a button (arrow, symbol, etc)? wich technology should I use? javascript? jQuery? Jason? Thanks
Nestor Segura
13,025 Pointsyes exacullty.
I already looking in jQuery API Documentation and found height(). I now know I can get the height of the windows throug this function, and I am know looking to create a function that set this height to the background. have you an other idea?
I am not thinking right know on how I want the content to display, but if you have some ideas I would be happy to hear them. (maybe by clicking a down arraw on the screen will scrowl down to the page content).
Thanks!
3 Answers
Christian Andersson
8,712 PointsNestor Segura, you can do the following to get the window height on load and on resize:
´´´jQuery $(window).resize(function() { windowHeight = @(window).height(); });
Though you might want to have the function directly resize the picture rather than changing the variable and *then* change the height from that variable. Though either approach should work, depending on your code.
As @[Joe Dayvie](https://teamtreehouse.com/joedayvie) pointed out, you should use the jQuery functions `show()` and `hide()` to display the appropriate content and `click()` to trigger that. Though, if you just have the picture on top and the website content behind, all you'd have to do is hide the picture to display the content -- so `show()` may not be needed in your case, unless you have something different in mind for that *. Also, it's preferrable to use `.on("click")...` than just `.click()`.
So here is how I might have done it:
```jQuery
$("#arrowButton").on("click", function() {
$("#coverPicture").hide();
});
Hope that helps! :)
- If you do need to use
show()then I'd recommend usingtoggle()rather than using bothhide()andshow(). http://api.jquery.com/toggle/
EDIT: I forgot to mention that instead of show() and/or hide() (or even toggle()) you can use fadeIn(), fadeOut() and fadeToggle() respectively if you want a smooth transition.
http://api.jquery.com/category/effects/fading/
Nestor Segura
13,025 PointsThank you Christian,
I solved the problem using your proposition like this:
jQuery
$("#overflow").height($(window).height());
$(window).resize(function() {
$("#overflow").height($(window).height());
});
the first line ist to set height by document ready, and then the function to rezise it depending window height.
Joe Dayvie
11,956 PointsNestor,
For the background issue, you want to use a width: 100%; and then have the background-size: cover; to ensure the entire image is shown in the background (if that is what you want?).
Regarding the content to show only on a click, you can use jQuery. You would want to use the .click method and then the .show I believe =) You can set the CSS for that content to display: none; and then use the .show in jQuery to appear when an element (of your choice) if clicked.
I hope that helps and/or makes sense.
Joe
Nestor Segura
13,025 PointsYes, I want the image to cover 100% the background, but also that push the content down no wather the window size is. I am looking jQuery API Documentation and I am trying with height() to get window height and then make the background height that value
Nestor Segura
13,025 PointsI am trying this to set the height value for the background that I want with id="overflow".
***jQuery var windowHeight = $(window).height();
var overflowHeight = function(value){ $("#overlflow").css("height:value"); };
overflowHeight(windowHeight);
It get the first value when the page is loaded, but then if I rezise the window the value does not change automactly.
Any idea?
Christian Andersson
8,712 PointsChristian Andersson
8,712 PointsHi Nestor,
I'm not 100% sure what you are trying to achieve. From my understanding, you want a website to display a picture (and only a picture) that scales with the window. When the user presses a button this picture disappears and shows the content of the site.
Is this what you want?