I have the following HTML structure:
<section class="mysection">
<div class="parallax"></div>
</section>
<section class="some-text">
blah.....
</section>
Before using parallax on the parallax div, some text just sits immediately below the bottom border of mysection. This is the CSS for parallax.
.parallax{
width: 90%;
margin-left: auto;
margin-right: auto;
}
When I scale parallax by 1.11111111, the parallax uses 100% width of the viewport. However, some text does not sits right beneath the parallax anymore. Instead, it overlaps with the parallax area. Here is a picture of a real-life situation:
How can I make some text always sits beneath the bottom border of mysection without overlap?
To be more detailed, I use a tool called ScrollMagic for this work if this is relevant.
Related
So, I am new to HTML CSS and in progress in designing a website. I am designing a website which is similar to trello (https://trello.com). Where you can add cards, delete cards, etc.
I have this background problem where the background does not cover the whole page when I scrolled horizontally,
Here is the problem I have:
As you can see, the whole page looks okay, the background works properly. However, If I added more list, the background does not works properly.
Here, the background is white when I scrolled horizontally. It does not cover the whole page.
Here is my Html code:
<div class="container" id="amethystBackground2">
<!-- contents here -->
</div>
Here is my Css code:
#amethystBackground2
{
position: relative;
background-color:#9B59B6;
//This is needed to remove white space on top of page
margin: 30px 0 0 0;
//This is needed to for the background cover the whole page when scrolled verticallly
//(when you have too much cards, you need to scroll down)
min-height: 100vh;
min-width: 100vw;
//This is needed give space on top of page
margin: 50px 0 0 0;
}
I tried adding overflow-x: hidden and it is just not allowing me to scroll horizontally which is not helpful.
I also tried width:100% and 'height:100%', But it does not work.
Please help me, Thank you in advance.
The .container class of Bootstrap as a size in pixels, so it won't fit the whole page if you extend it.
First solution
Set your background-color to your body instead of your container div.
Just move background-color:#9B59B6 to
body {
background-color:#9B59B6;
}
Second solution
The "Bootstrapest way" would probably be using a container-fluid instead of a container, because it can expands to fill the available width.
<div class="container-fluid" id="amethystBackground2">
<!-- contents here -->
</div>
More about container-fluid here.
You have a class of container on there, if you are using bootstrap my advice would be to create your #amethystBackground2 div as an outer div so something like this:
<div id="amethystBackground2">
<div class="container">
</div>
</div>
Now set your widths/heights accordingly. If you use the overflow-x: hidden rule then you are telling the page that you don't wish to scroll horizontally so scroll bars will not be shown.
I have a webpage that is displaying an image and another section of text entitled "About Me" with some paragraphs underneath. Currently, the image is on the left and all the text is on the right (I want this). What I can't figure out, is how to align both the image and the text section (both the h3 and paragraphs) an equal distance from both the top of the screen and bottom of the screen. I would like the top of the image to align with the top of the h3 in the middle of the screen, with the paragraph sections sitting under the h3 on their corresponding side.
HTML:
<div id="wrapper">
<section id="homepage_section">
<img src="img/1935323_10153090821883239_4407778661294134622_n.jpg" class="profile-photo">
<h3>About Me</h3>
<p>
Some text here.
</p>
<p>
Further text.
</p>
</section>
<footer>
<p>
© 2016 Name
</p>
</footer>
</div>
CSS:
.profile-photo {
display: block;
max-width: 350px;
border-radius: 100%; /* adds rounded corners to an element */
}
#wrapper #homepage_section .profile-photo {
margin-top: 50px;
}
I generally want to avoid doing something like I have here, where I am simply just pushing the element down the page with margin-top. I'd rather have something that allows the element to automatically sit between the top and bottom of page. I'm also a little confused why the margin-top style element works in the second CSS section, but doesn't work when I put it in the .profile-photo section (which seem to be the same thing to me), but I suppose that is a little bit of a different issue.
When I add a background image to a div, the following div scrolls past the image, creating a cool parallax effect.
However, this only works when the background attachment is fixed. But in fixed position I cannot get the background image size to "cover" or "contain" the div without the image disappearing or resizing too large.
The only solution I found was to use repeat, which I don't want to do. I've also played around with background-position but that doesn't seem to work either, the image sometimes disappears or isn't in the same place across browsers
.imgContainer{
height:250px;
border-top-right-radius:inherit;
border-top-left-radius:inherit;
background-repeat:no-repeat;
background-image: url('test.jpg');
background-size: cover;
background-attachment: fixed; /*If I remove this the image fills the div approriately, but the div below it doesn't scroll over it. */
}
HTML
<div class="content">
<div class="imgContainer">
</div> <!--ends imageContainer -->
<div class="contentPosts">
Content goes here and should scroll above the image rather than push it up
</div>
Use a JavaScript library Skrollr.js, you will have a great control of your animations and the timing.
Check our these two tutorials to get you started with Skrollr:
Simple parallax scrolling tutorial
How to create a parallax scrolling website
I'm using the skeleton framework to build a site,and during the design I want to put a 960px grid image as a background because it's easier for me to structure all the elements.
But if I put the grid image as the body background, the image doesn't match with the 960px container and if I put the grid image as the background of the 960px container, the image doesn't shows up in the browser.
Probably this is very easy but I'm not seeing how to do it.
Any other tips about how to see the grid during the designing process are also welcomed.
Thanks.
You need to wrap your container in a div with your background. Then just put your content in the container div. Quite Simple, MANY OTHER WAYS TO DO THIS, this is my preferred way as in future designs you will notice padding and margin issue when adding stuff to container divs
.wrapper {
background-image: url ('../YOURSITE/IMAGE.JPG');
width: 960px;
background-repeat: repeat;
}
.container {
width: 960px;
}
<html>
<body>
<div class="wrapper">
<div class="container">
</div>
<!--end container-->
</div>
<!--end wrapper-->
</html>
</body>
I've been given a design for a website, and am trying to implement it.
One problem I've run into is that the design has some background images (one for the header, one for the body, and one for the footer of the site) that are wider than the main content area of the site.
Simply putting them in as background images doesn't work, since expanding the header, body and footer divs enough to accommodate the backgrounds causes horizontal scrollbars to appear if the browser window is not big enough to fully show the backgrounds.
This is undesirable since the backgrounds are not really important for viewing the website, and I don't want scrollbars to appear for them (scrollbars should only appear once the browser is too small to completely show the content of the website).
The second technique is to have a separate, absolutely positioned div to show the header background image (and put it under an element with the browser window's size), and set its width to 100% so that it never exceeds the size of the browser window (and hence create scrollbars).
This works up to a point - however, when the window is too small, the background starts shifting around relative to the content since the "top center" position of the background is relative to the browser window, not the content area. At large sizes, these are effectively the same since the content area is centered, but at small sizes, only part of the content is shown, so the center of the content and the center of the browser window are different.
A good illustration of this problem that I've found is the Quicken website: http://quicken.intuit.com/. At large sizes, its cloud background looks fine, but if you make your window's width small enough, the clouds start shifting relative to the content (bad!).
Any ideas on how to fix this so that backgrounds images
don't create scrollbars since they are not part of the content of the site
are fixed relative to the content of the site (and don't shift around at small browser window sizes)
?
An ideal solution would be something like turning overflow to hidden on the body, but only for specified divs. Unfortunately I believe this is impossible.
I'd prefer a pure html/css solution, but I accept that I may need js to get the effect I want.
Thanks! (this is a complex issue, so if any clarification is needed, let me know)
UPDATE: Fixed this by setting min-width on the background div to the width of the content.
Set the min-width on the div containing the background image to the width of the content.
You need to have your header, content & footer have a width of 100%. And put the image in as a background image in these divs ... center it horizontally.
Inside the specific divs have a wrapper that is centered. and is the width of the content of them divs.
Like so.
HTML
<div id="header">
<div class="wrapper">
...
</div>
</div>
<div id="content">
<div class="wrapper">
...
</div>
</div>
<div id="footer">
<div class="wrapper">
...
</div>
</div>
CSS
div#header {
background: url(...) 50% 0; /* to center your background image horizontally */
}
div#content {
background: url(...) 50% 0; /* to center your background image horizontally */
}
div#footer {
background: url(...) 50% 0; /* to center your background image horizontally */
}
div.wrapper {
margin: 0 auto; /* to center the div horizontally */
width: 960px; /* or however wide it should be */
}
Hope this helps.
Am I missing something, or should you be using the CSS background-image property?
I had a look at the Quicken site, and to be honest the cloud background image shifting when the browser is resized shouldn't be worried about unless your background-image is most distinctive than a bunch of clouds.
See what I mean?
You could use the overflow property and set it to hidden on the div that cause a scrollbars to appear.
I had the same issue on a site that I worked on, and come up with the following solution, which works well if all your background images are the same width.
/*
A container div that is set to the 100% width, with the overflow set to hidden.
This hides the overflowing images if the window sizes is too small
*/
#bg_container {
position:absolute;
z-index:0;
top:0px;
width:100%;
overflow:hidden;
}
/*
A div that sets the size of the content and centers itself on the page.
*/
.bg {
margin:0 auto;
width:1000px; /* content size */
overflow:visible;
}
/*
Here I set the image away from the left edge of the div to center it to the content. The actual size of the image is 1500px.
*/
.bg img {
margin-left:-250px;
}