Making a portfolio, I have a very multi-layered parallax homepage and an about section below it. Trying to set it up for one page scrolling so I'm using vh, but for some reason this div just slides under the home page when being resized to the point where the height is very small. It appears as though the home page doesn't appear to push to be below it, as if it has an offset or something. Tried using clear under first div, doesn't work. Here is what it looks like: http://puu.sh/sL8Km/4cf16e2ff7.jpg
I'm assuming it's something to do with the css of the parallax, which looks like this: http://puu.sh/sL8Bb/31cca57cef.png
All of the layers of parallax look like #parabg, #scene and #home are wrappers. Any ideas? Thank you!
The miracle of finding out the problem just after you post the question. If whoever's reading this is also using a very complicated parallax and tried to follow parallax.js' poor documentation, don't use padding-top! I'll make a codepen in a bit for anyone that wants to do a fully responsive multi-layered parallax.
#parabg {
background: url(../assets/parallaximages/home/bg2.png) no-repeat 50%;
background-size: cover;
/* padding-top: 52%; */
width:110%;
height: 100vh;
margin-left:-5%;
Related
I am trying to get my background to behave the same way as http://www.gamestop.com's background but everything I have read and tried doesn't work right.
Here is the CSS I currently have and I feel like it just needs to be tweaked a little to make it respond the way I want it to:
html{
background: url('../images/fbg.png') no-repeat center center fixed;
background-color:#000;
}
It is supposed to be fixed at the top of the page, centered, and all overflow should be hidden on the image to where if you were to zoom out it would simply show more of the image on the sides but remain fixed at the top in the same spot. I also would like to make it so that this background is click-able like a link and haven't been able to find anything about that either..
The site that it is going on is http://www.hackersarchive.com/beta.
Thank you for all of the replies! I figured it out & it was right in front of my face! Thank you for everyone who did answer the question for me as well!
Here is the correct code I was looking for:
html{
background: url('../images/fbg.png') no-repeat center top;
background-color:#000;
}
Simple issue that was more of a hassle than it should have been.
I am trying to write clean code without wrappers.
So let me give an example
<head>
</head>
<body>
<header>Header and nav section (Leaving nav in header is good way?)</header>
<article>Main content. This part should stretch</article>
<aside>Not so important but desktop view still have place for it</aside>
<footer>Just footer but sticky</footer>
</body>
The first try was to give footer a
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 100px;
and for body
margin: 0 0 100px;
after this just set min-height: 100%; to html and it works fine.
Now I'm trying to pin aside just at the top of the footer and I can't because I need to stretch the article to cover the rest of the page.
And finally the question:
How can you achieve this if the size of the aside changes depending on the subsite, and I don't want to use wrappers because they are kind of ugly?
Additionally is it possible to use html5/css3 magic (I found advice to use flex but without example...) and still have compatibility with ie8. Usage of XP is still huge in my country sadly.
I spent a couple of days on SO and I found many examples using wrap for the whole page that includes footer or wrap for header and content that leaves footer as another box, but that's not what I want.
Update
I partially found the solution.
Link to snippet
But now I have another strange problem.
Here is example my page
I have an empty space below the footer and according to dev tool in chrome and IE this part belongs nowhere.
How is this possible?
1.footer should be position fixed
2.for body: dont use margin, use position:fixed; bottom:100px;
3.min-height:100%. Well, this is kinda nonsense. Simply use height:100%;
I am working as an internship for a company and the owner has asked if it would be possible to fade the random images that appear to the right of the website down to near the bottom of the page (that was bland, will go into detail below).
So far, I have set up a test site and here is a page example.
The site uses Joomla CMS (not my choice). If you look at the right there is an image of a musician, each refresh pulls up a different musician/image. What my boss wanted me to do (since apparently I'm low on tasks since revamping their site) is to make a fade gradient that starts at black under the image that uses the rest of the pages height to slowly transition to the background color or transparent (I assume the background color would be easier). So far my thoughts are that this is pretty impossible but I thought I would ask you guys anyways.
My main issue is the height right column of the page to dynamically match with the height of the page height... if that is possible. I know how to make it gradient, but the height issue is bugging me!
The CSS for the whole right column (without gradient, obviously) is:
#columnrt {
width:200px;
background-color:#673601;
float:right; }
If inspecting the source code on the page, the random image shows up in a class called "random-image" in which I have a strong feeling it's generated by Joomla... example so you can identify the what image are I am talking about:
<div class="random-image"><img src="/images/stories/sidebar/lubsym_nov11_017-crop.jpg" width="200" height="306"></div>
Any input would be nice, thank you all!
PS: unpaid internship... I don't want you guys to think I'm leaching off y'all!
As you say, your main problem is making the right column as tall as the page, i.e. extend down as far as the main content. This can be solved by adding to the CSS:
#columnrt {
width:200px;
background-color:#673601;
position:absolute;
top: 0;
right:0;
bottom:0;
}
That will make the height of the right column extend properly, allowing you to add the gradient.
use below css and one div and your assignment will be completed
td { position: relative; }
.bg-gradient { background: blue; min-height: 100%; width: 200px; position: absolute; z-index:-1; }
add this div as first child under '.columnrt'
<div class="bg-gradient"></div>
give background gradient you desire to '.bg-gradient' in css
First, a warning, I have come back from a years break of html/css and have pretty much forgotten everything, so I'm at newbie level again.
I have been trying to add background images - one at top left and one at bottom right. What I have at the moment can be seen here: http://test.nihongohub.com/Mainsite/firstsite.php as you can see if you change the width of the browser the div containing the img will hit my main part and ruin it.
I have tried a few fixes suggested on stack overflow but none of them worked. Does anybody have any suggestions how to fix this. A friend suggested that I add the img to the footer and squeeze it out, but I don't like this idea.
2 things I want this image to do, move with the browser window, and be able to go behind my main page.
Thanks for any help offered
You could try using fixed positioning and the use z-index to move it to the back, ie.
#bottom_leaf_holder {
position: fixed;
bottom: 50px;
right: 0;
z-index: -1;
}
edit: I ment fixed, changed the answer.
You could put all your content in a div, and add a css rule to that div. Something like
#main_holder {
background: transparent url('img.jpg') no-repeat bottom right;
}
The best solution for this would be to have a wrapper div just inside the body tag that contains only the background image. This will act similar to the body tag allowing you to place an image that does not interfere with the layout and will go underneath your content if the viewport is small.
I've seen this page here and I really like the breadcrumbs at the bottom.
How do I achieve this behavior ? The breadcrumbs at the bottom stays at the bottom and nomatter if you're scrolling down, it is still there.
http://developer.apple.com/iphone/library/navigation/index.html?section=Resource+Types&topic=Getting+Started
Please someone help me with some good code. Because I have no clue.
#breadcrumbs {
position: fixed;
bottom: 0px;
width: 100%;
/* Set your desired height
* and other factors like you would
* any other div.
*/
}
position: fixed fixes your element to an edge of the viewer, in this case, to the bottom. If you want to fix the element to the top, you would go top:0px, or left side 30px from the bottom, you'd go left:0px;bottom:30px. I use this a lot for my CMS admin pages (I put nav bars and logout at the top). It's a great tool, but bear in mind that the iPhone does not support native CSS :fixed, nor does older IE.
Did you look into using javascript or a jQuery plugin to make the breadcrumb for you? Then you can use dclowd9901's answer to position it