What is Reddit's opinion of
Materialize?
From 3.5 billion Reddit comments
75 reviews of this app found across Reddit:
Most likely CSS Grids.
http://materializecss.com/grid.html
EDIT: Above is the correct link. Link below references the css grid property, as opposed to the above which references what I was referring to.
https://css-tricks.com/snippets/css/complete-guide-grid/
Good article, even if you don't know any CSS. You can see from the pictures how you can easily drop things onto a page while keeping other content stable.
Edit: Looking at the site, it's not identical to grid layout but the idea is the same - preset containers that you put next to each other to fit the fixed page width of 970px.
Editedit: Actually it's all fixed width stuff, boo!
Can someone explain what this actually means on a practical level? What would change in Bootstrap that would make it "material design"? Would this basically be a Bootstrap theme to give it an appearance similar to Google UI elements?
I looked at http://materializecss.com/ and it seems to be very similar to Bootstrap with just a few extra details like buttons that have an animation when you press them. I also looked at http://www.google.com/design/spec/material-design, but that seems to be basically Google's style guidelines described in detail and also a description of a lot of the standard conventions of typical UI design. I'm not sure what part of this would be added to Bootstrap.
Here was mine from my wedding two months ago for those looking for other inspiration: http://christinaahn.com/wedding
Built with http://materializecss.com/ , best CSS framework I've ever worked with. Damn site built itself...
Side note, I'm a front end developer, but trained as a designer - so its design heavy and backend light.
Good stuff for a first website.
Some feedback regarding the design: I personally don't like the font, but regardless of taste, the font-sizes could use some improvement. The footer should have a smaller font-size than the rest of the main content and the main content could use a bit more line-height. The pdf links font-sizes could also be the same as the main content (and a nicer shade of blue).
Fonts resources: https://www.google.com/fonts Colour resource: http://materializecss.com/color.html
On the homepage the 3 blocks at the bottom lengths go from small to big. I would suggest putting the largest one in the middle to balance out the layout.
Code wise I personally suggest avoiding #id selectors in CSS as they increase the CSS specificity unnecessarily (use .classes isntead). I also don't see a reason to split up the CSS in different files per page considering the pages have very little CSS.
The 3 images on the homepage use javascript to replace the img onmouseover. This means that the first time the user hovers of the img, theres a delay before its shown. To get around this use the css :hover state to show the other image. Something like div { background-image:url('hoverimage') } div:hover img {display: none} - this way your first image is still in the HTML. Also add 'alt' attributes to your images for SEO and accessibility reasons.
I also noticed a <p align="center">, which I'm pretty sure is a deprecated attribute. You should avoid any styling specific attributes in your HTML alltogether, and use CSS instead: p {text-align: center} There is also a border=0 attribute on your images (use CSS instead) and a name attribute - this should be an ID (if it's used by JS) or a class if it's used by CSS
I'm sure I could come up with more but I don't want to overwhelm you. It's a good job for a first site!
AngularJS is overkill for this kind of application, Materialize should be enough for the front-end and why not some Ajax with jQuery if you want to make it look more like an app.
Yes you could use bootstrap. Just don't use their grid layout, and the rest should be fine.
Otherwise, there are a bunch of options available:
Just google css framework, or, css form styles.
im actually working on this now, but if youre good with data and backend id love some help. im writing c# scripts to interface with the show rundowns site, using name recognition to get guest lists and topics that you can filter and sort using SQL.
The main reason i made this was to learn web development so if we do that i want to have it all custom code, not drop ins.
I was thinking about letting users add tags using chips (whassat?) http://materializecss.com/chips.html
Also what type of engineer are you? I can send you an invite to our slack room and we can chat there if you wanna help out. Thx budday
I find myself using http://materializecss.com/ quite often. It's similar to Material-ui, obviously. I personally didn't know about Material-ui until I read your post, but it seems quite good. I'd say it's a thing of preference.
Check out Materialize CSS. That and Twitter Bootstrap. Like someone else said; it might teach you to be lazy. It might also give you a lot of unnecessary complexity. However, it makes creating a professional looking website fast. If your doing small to medium projects, they might be exactly what your looking for.
Bonus: I'm unemployed right now, and I see a lot of jobs looking for people with Twitter Bootstrap experience
Edit: I wanted to add; if your design-retarded like myself, these frameworks really help
Ciao, per mia esperienza, solitamente si tende a non reinventare la ruota per ogni progetto (cioe', se puoi riutilizzare lavoro fatto da altri, ben venga). Nel caso CSS, prova a guardare queste librerie, magari trovi qualcosa che ti piace. Ti basta caricare il file .css che forniscono e poi puoi cambiare lo stile ad un elemento semplicemente assegnandolo ad una class:
Questo invece e' piu' generico, parla di come usare grid layout:
Buon divertimento :)
http://bourbon.io/ along with its suite of add-ons, especially Neat.
And yeah, Bootstrap and Foundation. But its gotta be a Sass or Less version or a hardcoded Angel doesn't get its wings.
I'm really digging Bourbon and Neat, though. I just finally got to try them this weekend. It feels really 'right' to move nearly all my grid garbage made in Bootstrap into the css.
The docs explain how to change the font: http://materializecss.com/typography.html
But, since Avenir is a paid font that's not available on every computer, you'll need to use a library like fonts.com to serve it. https://www.fonts.com/web-fonts
I'm guessing that using @font-face and hosting your own Avenir files would violate the license.
If you're not interested in paying for it, I would suggest finding a similar font on Google Fonts or another free web font site. Nunito is similar: https://fonts.google.com/specimen/Nunito
Materialize CSS is designed to be used with anything else. Like if you have some HTML and want to do some styling. Don't expect it to offer powerful UX components. Materialize is just not powerful enough as a UX library.
Material the official library has a nice side bar implemented in Typescript. It is also tested for evergreen browsers.
If you build an Angular app, use Material.
I used mdb free for a few projects and eventually asked myself the same question. Some of the pro features I wanted and/or needed so I looked for alternatives and found http://materializecss.com. it isn't based on bootstrap but is similar enough where a few find/replaces updated everything.
I know this doesn't really answer your question but figured it may help you as well.
its ok
But here is what I would had done.
I would list all the videos in a grid with infinite scroll, when you click the video, a modal is popped up, full screen with the video, that way user will never lose the place where the video is, and they just pop up any video they want.
hell you could even use Liquid Fire to animate the transition.
and disable autoplay
what is modal
I'm just finishing up a rails app at the moment which uses bootstrap and bootstrap-material-design gems. It's not perfect, but it works for what I'm doing. There's also another framework called materialize which looks really nice. I wish I had used that at the beginning of my project.
Could you please elaborate? I'm sorry but I kinda am curious.
Also, what libraries would you recommend instead of Bootstrap? I've seen several grid systems but not a lot of widget collections outside of Materialize.css, Polymer and Angular MD...
Just curious, have you ever used the tabs in Materialize such that the scrollbar isn't visible when there are too many tabs, but is still scrollable?
This is an issue I'm facing now and the only thing I don't really like about that particular component.
Yeah definitely a good option, I'll add that that http://materializecss.com/ is very similar (both based off the same guidelines) but has a bit more detail.
Wouldn't recommend mixing these libraries and bootstrap though, lot of class cross over.
I have been looking into Materialize CSS ( http://materializecss.com/ ) to replace bootstrap in my next project. I have done few POCs and Material and Materialize seems to work ok. But I do not have definitive decision on this one yet.
You could put each technology into some kind of chip/tag similar to linkedIn maybe. Not sure you saw this before, they kinda look like the chips http://materializecss.com/chips.html without the cross.
In my opinion, there's too many horizontal lines, which makes it unpleasant to read. You might consider other ways to lay out/style Things, Stuff, Examples and Proof to give the site a little more visual pop.
(Something which springs to mind is that you could make them cards, along the lines of the "basic card" at http://materializecss.com/cards.html )
I don't know how any of these frameworks compare, but I came across this idea of mini css frameworks on Reddit a while ago and I think there are loads around. These were three that stuck out in my mind...
http://getskeleton.com http://materializecss.com http://purecss.io
Sure bootstrap will work just fine. I personally use http://materializecss.com for some nice Material Design elements right out of the box, but that's a purely design decision.
If you want to do anything fancy like having heavily interactive elements on the client side, you might want to look into adding things like Backbone, React, etc. to keep things more organized.
I don't get what there is to learn about bootstrap, it's simply a css framework and if you go to their site like others you can click on components and see how to use them (aka what class/id to type in and bam there it is!)
Sass takes getting used to but that has nice documentation as well. Just like css but with one more step to run in terminal (or you could just enable watch and it'll do it for you!)
My suggestion is build your 12 page site with bootstrap, then do it again but with another framework such as Materialize or Pure and then you'll get an understanding what frameworks are meant for. I jump around between frameworks because I do have a tendency of making my sites look really similar especially if I don't use a framework.
In my experience, Bootstrap was a bit overwhelming at first. Looking at the markup without having seen the documentation is jarring.
That being said, the documentation is top-notch and easy to understand. Spend an hour or two on the documentation and building a little test site: It's amazing how quickly you can roll a Bootstrap site and adjust how it looks so you're not seeing a "bootstrap site".
I tend to use Initializr too, though it's starting to look extremely dated.
I've also been taking a look at Materialize. It's a bit too much Google-ized for me, but it is beautiful.
While the look and workflow are fairly basic uses of Materialize, I thought there should be a calc with a little eye candy. Might throw in a little mo.js stuff just because.
I've been working on our team website, teamquadx.org, a bit over the summer using HTML/CSS and the framework Materialize, which is insanely helpful. It's not done yet, but I'm proud of the progress so far.
I know what you mean, a lot of developer's have a weird disdain for bootstrap. If you're starting from scratch check out "google's bootstrap," Materialize - it was just released and the default styles are pretty slick looking, imo. http://materializecss.com/
I currently use MaterializeCss
Its decent but i'm eagerly awaiting the official google "bootstrap like" implementation.
Should come in a month or two (or way later because they fall short or their promise)
I don't want to be forced into a framework just yet, either angular or react.
Plus the react material ui wasn't working really nicely when i tried it.
You'll see materializecss is great for many things but still lacks some others. namely better notifications (toast). So Go google go !
Analyzing evanx11
- comments per month: 41.5 ^I ^have ^an ^opinion ^on ^everything
- posts per month: 1.7 ^lurker
- favorite sub xboxone
- favorite words: really, games, never
- age 2 years 0 months
- profanity score 0.5% ^Gosh ^darnet ^gee ^wiz
trust score 87.4%
Fun facts about evanx11
- "I am saying is that the PS4 and Xbox One have proved that there is even more to gain by leaving this feature out."
- "I am in college now so I am going to resume streaming almost every night once I finish up this term."
- "I am hoping one day that it will click for me like it did for you."
- "I am sure they would work with MS to design an Xbox specific Oculus."
- "I am willing to bet they will form some partnership with Oculus."
- "I'm a college student who uses it on my iPhone, iPad Mini, and Macbook If you have friends who play PS4, yes."
- "I am working with right now called Materialize."
- "I'm a good actor but that's still not the most fun."
- "I am always super happy when he gets brought back on the show."
- "I am not actually that funny."
- "I am cool with what Monument Valley did, where they just add level extra level packs and you pay for those."
I would just have a field act as a flag called "is_archived" initially set to 0. When the user clicks the "delete" button, it would simply send an ajax request to change the is_archived value to 1 for that widget; HIDE the item. As soon as the request is complete show a toast (or whatever) that has the option to undo, which would also send an ajax request when clicked, but also unhide the widget.
Truthfully there is more javascript than back end stuff.
So is the only way to download it to fork/clone it on GitHub?
One suggestion is to add the download instructions on your README.md and at the bottom of the About page after the "Principles" section.
I'd like to see the default form use labels as a best practice
http://www.pardot.com/faqs/best-practices/placeholders-and-labels/
So basically you can use webcomponents anywhere DOM elements are allowed. I have a similar project going on, integrating webcomponents into a .NET backend with angular.js server side rendered. Webcomponents are only there for style encapsulation in this project.
Polymer used to be the number one choice due to it offers features for developers to easily create webcomponents and serve the needed polyfills. Since 2018, the webcomponent standard is on the move and is integrated into the HTML & DOM standard - that means browser will natively support them soon. Chrom and Opera are already 100% supporting them. Firefox will until the end of 2018 as well as Safari. Edge has already planned to integrate the Shadow DOM.
So polyfilling will only be necessary for browsers <= IE 11.
It seems like you dont really need the features webcomponents offer, but you are looking for a library that offers styling components. Something like: http://materializecss.com/
To the polymer serve thing, you don't have to use it. Polymer is really only a tool that helps developers, although you could use it as a whole framework and create SPAs with it.
Feel free to ask anything about webcomponents. I have started with that technology last year and it was quiet confusing to get my head around it. If you are german you can read my thesis about it or check out my repo https://github.com/drdreo/webcomponent-cms
Normally I agree, but I honestly jumped into material as my first and think it helped me a lot. There are really easy CSS libraries like materializecss and Material Design Lite with examples and components you can copy/paste and learn from. Google uses it on most of their applications so if OP is remotely exposed to Google apps they already have a good idea on how the design language works.
Ah.
Well after you learn bootstrap you'll have to good choices to pick. Here's some free 'design blocks' using bootstrap.
There's also Materialize.css.
Gotta say, absolutely stunning website! I'd still love some examples (both code and view) of your components though, like Bootstrap or Materialize.
You can use materialize CSS for the front end with Django...
Include the CSS and you have a fully functional rich front end framework. Combined with the back end power of Django it's everything you need.
From experience there is an advantage to having front end and back end be separate. On any project your front end will change 10:1 over your back end. For me the other frameworks couple them too closely together.
They are absolutely in denial then, part of the reason modern advertising is so valuable is because advertisers can get information on how long you stop scrolling when an ad is on your screen, how often you hover over ads, etc.
If people want a working example this site has a free and running on the page script to track mouse coords and materialize css has scroll snooping with no javascript work on the designers end
Angular Material for angular projects, and if I ever need a table anywhere I use Material Data Table because it is also implemented in the material spec.
Material design is really nice, especially since it's a philosophy instead of a concrete project. It gives you options to what you want to use, such as Materialize for jQuery-ish stuff and Material UI for React.
It may be a good idea not to use bootstrap. It's now just bloatware an old ideas.
You can do everything bootstrap can do with Vue, jQuery and http://materializecss.com/ or maybe even a https://html5up.net/ template.
I have found Bootstrap visual design to look a bit dated. Their underlying source isn't the best anymore. Additionally the amount of 3rd-party additional libraries is excessive.
Bootstrap designs are easily detectable, and some of the solutions to scrolling, parallaxing or live-loading could be improved.
If Materialize is too much for a quick tool, the HTML5 up templates will really help. Some are really feature complete and don't smell like last season.
*Edited for clarity
Thank you for your feedback.
It was made using Materialize CSS and was designed to be responsive. I looked at it on various device size using Google Chrome Developer tools and I didn't see any issues with readability on various screen sizes.
Can you elaborate on what you are seeing on your device and how media queries would make it better?
Disclaimer: I'm new to web dev, so I'm still very much learning some of the fundamentals. Apologies in advance if it should be obvious how media queries can help.
What's a good way to let the user know that there is a fault? I use Materialize CSS and they support toasts, is it a good way to let the user know that there has been an error and that it's being worked on?
Well for uniqueness I would not use bootstrap. While it is quite good, a lot of sites will look quite similar plus it is quite heavyweight in terms of what you may need.
I would recommend finding a simple grid based framework, something like Skeleton, and then work on the rest of the stuff yourself.
Materialize Is one I am a big fan of myself, but that is because I really like the material design.
Our website is very much a learning experience, and still very 'work in progress.'
While most of our code is our own, the general design is based on Google's material design framework. The particular framework we chose to use is Materialize CSS. We definitely got inspiration from other team's sites and ideas, as well as from other sources.
On a side note:
If I may, a note for anyone working on a website... If you are using GitHub or BitBucket to collaborate (and use FTP to update the main site), I highly recommend taking a look at FTPloy. FTPloy is a service to auto-upload your git changes to your FTP server for your website, it can upload from the root, a specific directory, or a specific branch.
It looks nice. Although the QR Code display occupies too much space. Would you considering updating the card animation into something like this Card Reveal component from materializecss? Great work!
Offering an alternative mostly front end solution: you could display an indeterminate progress bar that is something similar to this. Basically, send the request, toggle that bar so it displays, handle the response however you'd like then toggle that bar so it no longer displays. Just a quick alternative.
"Give up and move to the next thing"
If you already thinking this prelaunch, then that might be a bad sign.
You should learn front end anyway. It will be an investment in yourself and whatever project you want to create in the future. Using templates and stuff like http://materializecss.com/ If you can do backend, frontend should be a breeze.
I imagine your software could have various other applications. So I would dig deeper on it.
Now I get it - but this is something that comes from Materialize (look at the tabs in Materialize. You can use the bottom bar with or without an indicator.
I'm really bad with resources :) This is mostly from experience.
I would say, check out how UI frameworks do layout stuff, bootstrap or materializecss. Try it out and look at their grid styles. Browser developer console is your best friend. Inspect and change and experiment.
Since you're using materialize, I'd suggest a modal if you insist on an "alert style" notification I guess... But I'd rather just redirect them to a login / create account page and explain that the user needs an account for that action/quiz.
CSS these days, but if you don't know CSS, you're going to have a job on your hands. You could try one the numerous websites that are designed to help people in your position, such as http://materializecss.com/ (was the first result googling for "css material design website" but there are many more) but slicing up jpegs isn't he way to go, it's an extremely unwieldy and un-optimised method. People haven't done it since the mid 2000s.
Concordo sull'utilizzo del Material Design, ma (sempre IMHO) preferirei Materializecss a Material Design Lite. L'ho provato una volta poco tempo fa e me ne sono innamorato.
I mean maybe there is some third site that both got the inspiration from for some of the component examples but these two are exactly the same: Cards in MaterializeCC vs. Cards in MDBootstrap
You are right that MDBootstrap allows for a previously existing bootsrap environment to easily integrate Material Design, but I was mostly trying to point out that it is eerily similar in terms of examples used.
As for both being free, both are free, but MDBootstrap has premium features that are actually free on MaterializeCSS
Not sure who the original creator is but this is very reminiscent of materialize css? It seems like a better alternative without relying too heavily on bootstrap, plus its open source on github
As the current developer of our site, I agree that it looks fantastic so far. There is not yet much content as we are currently rebuilding it with Materialize but it will continue to be updated as we get more pictures and content to populate it with. I would HIGHLY suggest the Materialize platform for numerous reasons. It is basically Bootstrap on steroids and is based off of Google's material design standards with tons of built in aesthetic appeal. It is a great platform!
I used the Materialize framework that I found for the design, and the backend is built on the Drupal framework (so PHP/MySQL) with a custom module I built to do the scraping.
I thought that making the league public would solve the privacy issues, but I didn't realize that each season has its own privacy settings. I'm thinking of adding the option to enter your league creds after seeing your tool.
And it's not open source yet, but only because I'm lazy, and Drupal is database-driven, so I'm not quite sure how to share that.
We're not using Wordpress or Avada. The landing page is using http://materializecss.com/ and jquery/css for the animations.
In the fronted of the actual site we're working on, we use AngularJS and angular-material.
You can see the complete code in our github page!
One area where Chrome seems to be the clear-cut winner (at least for me) is in fluid JavaScript animations. Try going to this page with both Firefox Android and Chrome Android and just play around with it. Click on a few of the collapsible lists, click on the top-left menu bar, etc.
The page is sluggish on Firefox (for me, at least), but blazing fast and responsive on Chrome. Although I'm not entirely sure if this is because of my own user configuration (I have a few extensions/plugins on Firefox. I never use Chrome, so it's plugin/extension free).
I used to use Zurb Foundation, then recently converted to Bootstrap with Bootswatch, but have also used Imperavi Kube, which is also pretty nice and follows a typical "flat design" approach.
Materialize I think is a more recent materialisation (ha), though I haven't used it yet.
Personally I wouldn't bother rolling your own if your only complaint with existing ones is how they look. Just use whichever framework offers the syntax and functionality you like the most, and build styles on top of it. I've had a lot of success with Bower + Bootstrap SASS + Bootswatch SASS and simply overriding a bunch of variables.
If I had to make a single recommendation though, I'd say give Materialize a go.
This does seem to return a promise when it's not given a callback although it's not the focus of my investigation :)
I have now had to move the client script to a jquery ($.script) inclusion because it was breaking my materialize functionality. I'm the first to admit my project is cluttered with style related includes, but I think there is something going on in the client script which would be really useful to know about.
Found the problem. Select boxes apparently have to be initialized as mentioned about half way down this page. If you add that script at the bottom of the page the forms will render properly.
I use this function at https://github.com/IgorAntun/resume/blob/master/js/main.js#L112 that prints a new character from the wanted text every 20ms :)
And thank you! It means a lot! I used this bootstrap theme https://github.com/FezVrasta/bootstrap-material-design for this project, but I'd recommend http://materializecss.com/getting-started.html instead, it has some other features :)
Materialize.css has a similiar feature, based on the Lightbox plugin. I think they surround the image with a div, which serves as a placeholder (as you can see in the source). This way the content wouldn't be pushed.
Analyzing evanx11
- comments per month: 39.8 ^I ^have ^an ^opinion ^on ^everything
- posts per month: 1.7 ^lurker
- favorite sub xboxone
- favorite words: really, games, never
- age 2 years 1 months
- profanity score 0.5% ^Gosh ^darnet ^gee ^wiz
trust score 86.4%
Fun facts about evanx11
- "I am so I switched)."
- "I am saying is that the PS4 and Xbox One have proved that there is even more to gain by leaving this feature out."
- "I am in college now so I am going to resume streaming almost every night once I finish up this term."
- "I am hoping one day that it will click for me like it did for you."
- "I am sure they would work with MS to design an Xbox specific Oculus."
- "I am willing to bet they will form some partnership with Oculus."
- "I'm a college student who uses it on my iPhone, iPad Mini, and Macbook If you have friends who play PS4, yes."
- "I am working with right now called Materialize."
- "I'm a good actor but that's still not the most fun."
- "I am always super happy when he gets brought back on the show."
- "I am not actually that funny."
Foundation CSS are definitely better for custom design. Bootstrap has too many padding/margins and shadows everywhere, that makes hard to customize it, even with less/sass variables.
I used both for backend, and found only one small issue. Bootstrap have fixed-width form prefix/suffix elements, but with foundation width of form field prefix will scale in fluid container. That looks terrible on full hd screens.
That's basically why I found bootstrap more suitable for backend )
Btw. if you are not bound with old browsers, I recommend to use https://github.com/ptb/flexgrid or http://flexboxgrid.com/ instead of grid component of any other framework. Flex makes layout more predictive and composable without bad side effects.
Also it's not worse to check some modern alternative - http://materializecss.com/ If you are worry about end user satisfaction.
i'd say it depends on the size.
if you only have a few classes / components then codepen can work.
otherwise i would recommend to create a new git repo for it and throw it on a network server or github (if you dont plan on putting secret stuff in there).
there you can play around, have version control and can set up a build process to have them minified, etc.
then you can include the minified files in your main project.
advantages: more control over the output and self sufficient.
disadvantages: no tags out of the box; having a more granular control (i.e only include a specific script) comes with a tad more overhead.
as far as previews go you can just create a simple html file and put all your elements on it (see foundation)
or a more split up solution (see materializecss)
I hardly notice the shadow on the button. Basically the whole thing is put together with Materialize. So all of this is their CSS. I can disable shadows though (I had to make my own class).
The label animation I am also not sure of. My phone doesn't do that, and this is supposed to be based on material design. I have disabled it, because it is a little distracting. A simple placeholder looks much nicer.
I have a problem adding dropdown list using materialize css... I used following codes
HTML code
<label>Materialize Select</label> <select> <option value="" disabled selected>Choose your option</option> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> </select>
Jquery $(document).ready(function() { $('select').material_select(); });
this code example is provide in the documentation (source - http://materializecss.com/forms.html). but it doesn't work for me. Is there any other way of using this method ?
Would you be okay with using an existing CSS library implementing MD or does it have to be fresh from the ground implementation? http://materializecss.com for example can offset a lot of work that would otherwise go into implementing the design.
Many Sass tools exist independently of one another. For example you can use Susy grids with a material design UI kit with a type scale tool with a animation library and so on.
Anyway, here is a material design theme: http://materializecss.com/, here is another: https://github.com/dmglab/material-design-theme-sass
Use whatever you want, you don’t need them bundled together.
I would move the #top background into an <img> src inside of a container z-index'd to to be below the menu. Why? Because position fixed on a background element is extremely buggy at the moment and causing massive frame rate drops.
This way you still get the effect you want without the FPS drop. For a working example you can visit Materialize, of course you don't have/need to make it parallax but it shows how to setup fixed image backgrounds really well.
I used Materialize, a material design frame work, for a website I built.
link: http://bmecareerfair.bme.unc.edu
I don't use adsense though.