I am making a social network, and I'm using linear-gradient(#dadae3, white). This works, however a section at the bottom with the color #dadae3 shows at the bottom. I do not have an element for this section.
Screenshot:
I am looking for a solution to get rid of this gray section. Thanks!
Your background gradient is just repeating there because of lack of height of the body element(I assume you are using gradient on body element), also make sure you have set your background-repeat to no-repeat
Demo
html, body {
height: 100%; /* Setting both the elements height to 100% */
}
body {
background-repeat: no-repeat;
/* mmmm not required as we have set to fixed but than too no harm using it */
background-attachment: fixed; /* Fixes background for you */
background: linear-gradient(#dadae3, white);
}
It might be the background-color for the body or the html element of the page!
And the gradient is just covering the div in your page! Check the css for body or html (or the parent of this element).
You might also want to check the footer CSS properties too!
Try this for a check:
html, body, footer {
background-color: transparent; // remove the background..
}
Related
I am wondering how can I something like this with CSS & HTML:
https://www.vatsim.net
You open the page and you get a backrgound that fits all the browser, but then you scroll down and you get a solid color as background and more info.
I tried with this, but is not what I am looking for, I want something like the link on the top,
https://codyhouse.co/gem/alternate-fixed-scroll-backgrounds/
Thank you very much!
You can get far by just adding a bit of CSS. In the snippet below, there are two divs. The first one is for the top area with the image. The second one is for the rest of the content.
The first div gets a height of 100vh, making it 100% of the screen height. The background image is centered and set to scale so it covers the entire div. And, well, that's basically all there is to it. No script needed.
* { /* Just get rid of some whitespace */
padding: 0;
margin: 0;
}
div.image {
height: 100vh; /* div is 100% of viewport height */
background-image: url(https://www.ancestry.com/wiki/images/archive/a/a9/20100708215937!Example.jpg);
background-size: cover; /* Entire div is covered by the image */
background-position: center; /* Image is centered relatively to the div. */
}
/* Just some styling to make it visible. */
div {
color: white;
font-size: 150%;
}
div.content {
color: black;
background-color: #eee;
height: 2000px;
}
<div class="image">This is the top area. The image exactly covers the view.</div>
<div class="content">This is the rest of the content. You can scroll down a bit just to see what happens.</div>
The webpage you added is basicly splitted to divs, the first is 100% height and 100% width. therefore you can see him all over your screen.
The others are just divs with 100% width but not 100% height, which gives you the ability to switch the background color from light gray to white and then to gray.
Not too complicated but yet a nice design
I am having some trouble changing the background color of my webpage, and cannot seem to find a solution.
I have content on the page, but the black background stops when the content stops. I have tried to extend the content, use the body selector, and universal selector...but none of these work.
Is there any: height: 100% property, so that it can can retain the color for all screens?
Apply it to the html tag instead.
html{
background-color: black;
}
Your body content is overflowing the container that has the background color. That's why you see the background color stops but content goes on. To fix the issue ensure that the container contains the content.
I think you are looking for vw,vh,vmax,vmin Units
you can use it on your body tag
body{
padding: 0;
height: 100vh; /*add this to fill the screen*/
background: red /*set the background color here*/
}
I'm trying to place one div with a partially transparent background (meaning regions of the image are blank -- not X% opacity) on top of another.
#about {
background-image:url('http://i.imgur.com/B922OoM.png');
background-position: center;
background-repeat: none;
background-size: cover;
background-color: transparent;
z-index: 2;
height: 450px;
width: 100%;
}
I can't get the div to not fill with white behind the image.
jsfiddle: http://jsfiddle.net/4HAxu/ -- the relevant div is #about
(I'm pretty sure the image is exported properly -- if you change background-color:transparent to background-color:blue, you'll see what I mean.)
Your image is fine.
It's the fact your #header doesn't actually extend down that far. If you change the background colour of your body you'll see it's not your #about div it's the body showing behind it that is white
Red BG body JSFiddle
To alleviate this problem, if you actually overlay your divs you will get the effect I think you're trying to achieve.
Overlayed divs with negative top margin
You know how sometimes when you're low on content, and then footer stands right under the content?
Instead of sticking it to bottom using fixed position, or else,
Why not make everything under footer, be the same color as the footer's background (without changing the body background, if possible).
Also, to use 100% as height, so it's dynamic.
For example:
BEFORE:
http://gyazo.com/801af7d0c1c797900ca00648cc82443e
AFTER:
http://gyazo.com/5cb8503f122107d83a01ddae2c7fbc2a
How do I do so?
Thanks!
Use CSS sticky footer to ensure that the footer sticks to the bottom of the viewport when there is not enough content to fill the page - http://ryanfait.com/sticky-footer/
I usually let the body of the page have the color which you want below the footer. Then let a container (with 100% width) have the actual page color. To avoid "flicker" or a black page (depending on color offcourse) I add this to the container:
#container {
background-color: white; /* Page color */
min-height: 600px;
overflow:auto;
}
You can make the page have the background color of the footer, like:
body { background: blue; }
div.footer { background: blue; }
Then, you want your main content div to have a good color, like white:
div.content { background: white; }
I'd like to have separate background images on the top and bottom of my site but can't quite seem to nail it. I would like the images to stay at the absolute top and bottom of the page.Below is a shot of the site mockup, and a shot of the backgrounds on their own with dimensions.
The mockup doesn't show it, but there will be text links and copyright info at the bottom. You can find my failed attempt at coding at www[dot]dev[dot]arbitersoflight[dot]net
Mockup
img683[dot]imageshack[dot]us/img683/4502/mocky[dot]jpg
Backgrounds
img233[dot]imageshack[dot]us/img233/1293/94210454[dot]jpg
Note: The backgrounds are 1200x400 each.
EDIT: At this point I can get the two images to show up without fail, the problem is getting the bottom image to stick to the absolute bottom of the browser window. It seems that it is currently at a fixed position. Below is my CSS and HTML..
UPDATE (Solved): I finally solved this by reworking my code based on this guide: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/ Thanks for all of the suggestions everybody.
You could use the second image as the body background, set a color too, and the first image as the container's background. Or vice-versa, but remember to align the background, and if you switch, mind the container's height.
The body and html background (like the suggestions from zzzzBov and nemophrost) don't work in my Firefox...
body {
background: #DDD url('2.png') no-repeat center bottom;
}
.container {
background: url('1.png') no-repeat center top;
}
Another thing you can do is set a background image on the body and on html.
body {
background: url(...);
}
html {
background: url(...);
}
You can see jqueryui.com for an example of this.
What you can do:
The menu is a div with an own background to fit the upper area.
Then apply the background with the bottom part to the body or content/page container that you are using.
It sounds like you want:
html
{
background: url(...) no-repeat top; /* see the background-position property */
}
body
{
background: url(...) no-repeat bottom;
}
you may want to switch one or both to use repeat-x, and make sure you set a suitable background color to match the color on the images.