I'm trying to add a gradient to the body background which starts from white and ends in grey at the bottom of the page. Since the page has a sticky footer, when the content is bigger than the browser window, the body doesn't stretch/expand with the content. So the gradient stops in the middle. Can someone please help?
HTML :
<html>
<body>
<div class="content"> </div>
<div class="footer"> </div>
</body>
</html>
CSS :
html {
height:100%;
}
body {
height:100%;
background: -moz-linear-gradient(top, #fff 0%, #d5d6db 100%);
}
.content {
min-height: 100%;
}
.footer {
height: 55px;
}
background-attachment:fixed;
Add this to your body CSS.
On a side note you may know this already but: background: -moz-linear-gradient(top, #fff 0%, #d5d6db 100%); won't work on IE. This property is only for Mozilla Based browsers.
Cross Browser CSS Gradient ...
http://webdesignerwall.com/tutorials/cross-browser-css-gradient
You just need to set htmland body CSS to auto and remove size from body background gradient - see: http://jsfiddle.net/ZqkY7/
Related
My background output is not coming as it should be.
I was expecting this
only the code that I used is html with external css with empty body tag
<body></body>
css code is:
body{ background: linear-gradient(to bottom right, red, blue); }
but the output came like this.
i am unable to detect any problem accept for the fact that you have written <body></boyd> instead of <body></body>
If your body has no content, it will have no height and the gradient will be shown as a small line (based on the default padding/margin on the body element) and repeated by default. You can see what's being repeated by disabling the repeat like this:
body {
background: linear-gradient(to bottom right, red, blue);
background-repeat: no-repeat;
}
To work around this, add a min-height to the body:
body {
background: linear-gradient(to bottom right, red, blue);
min-height: 100vh;
}
How can I create a CSS background consisting of an image covering the top x pixels of the body and a solid color or gradient below (also spanning behind the top bg picture if it is transparent)?
A gradient can be stacked placed on top of a solid color, so that the gradient fills the entire height of the screen. How can I change the gradient to a picture and only make it x pixels high?
background: linear-gradient(0deg, rgba(239,237,224,1) 30%, rgba(255,255,255,1) 100%) top/100% 100vh no-repeat rgba(239,237,224,1);
Use a pseudo element for the image:
body {
min-height:100vh;
margin:0;
position:relative;
background:linear-gradient(red,blue);
}
body::before {
content:"";
position:absolute;
height:100px; /* update this */
inset: 0 0 auto;
background:url(https://picsum.photos/id/1069/800/600) center/cover;
}
You can have multiple background images - with a mixture of actual images and gradient images.
The first image in the list is rendered on top of the others and so on down the list. You can set the size and positioning and repetition of each separately or together.
In this snippet the individual settings are separated out to make it clearer what is going on:
.bg {
width: 100vw;
height: 100vh;
background-image: url(https://i.stack.imgur.com/ew6J2.png), linear-gradient(to bottom, red,blue);
background-size: 30vw auto, 100% 100%;
background-position: center top, 0 0;
background-repeat: no-repeat;
}
<div class="bg"></div>
This question already has answers here:
Background image is cut off at bottom or right when scrolling viewport
(5 answers)
Closed 7 years ago.
(This is a better rephrase of my initial question - you can mark the other one as a duplicate of this one. Thanks)
I saw quite a few similar questions but could not find a fix. Open this sample and resize the browser to make its height shorter than the main div height (~400 pixels).
When scrolling down, the background image attached to the body is cut off.
html {
height: 100%;
color: white;
}
body {
height:100%;
padding: 0;
margin: 0;
background:url(bg.jpg) repeat-x;
background-position: bottom;
background-size: contain;
}
/*#pageWrap { background:url(bg.jpg) repeat-x;}*/
#page {
height:100%;
}
#divHeader {
width:100%;
height:115px;
}
#divMain {
width:600px;
height:400px;
border: solid 1px brown;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="pageWrap">
<div id="page">
<div id="divHeader">Header</div>
<div id="divMain">Main</div>
<div id="divFooter"><p>All Rights Reserved. Blabla® 2015</p></div>
</div>
</div>
</body>
</html>
I tried to move the background image to the pageWrap div as someone suggested.
It solves the vertical scroll problem, but creates a similar problem horizontally: When the window is too narrow and you scroll left, the image is cut off on the right.
Any real solution?
Perhaps you could remove the height:100% from HTML, BODY and #page, and then set background-color on the body to #3E3E3E (in this example).
The difference is that the background image would not stretch all the way down, but it would remove the scrolling problems.
Height:100% only applies to 100% of the height of the browser window, not the height of the page within the browser window - that's why you;re getting the white area below when you scroll down.
I would suggest replacing your background image with a CSS gradient, this might seem difficult but there is a fantastic tool that does it all for you (they also show a browser support table below the tool!)
The output CSS for a gradient that you'd want looks like this:
background: rgb(0,0,0); /* Old browsers */
background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(204,204,204,1) 96%, rgba(204,204,204,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(204,204,204,1) 96%,rgba(204,204,204,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(204,204,204,1) 96%,rgba(204,204,204,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */
Furthermore, you might want to remove height: 100% on the html and body for min-height: 100% since you'll want this gradient to stretch out over the length of this page.
The reasons you'd want to use a gradient over an image is just purely because it replaces a request to a ~100-300kb image with no request and only ~100-300b added to your CSS which I think is a good trade off against almost any criteria.
The tool also has support for importing an image, you can basically take your image, upload it and get a gradient out of it that comes closer to a perfect result than you could ever do by hand.
I'm trying to make my site with 2 backgrounds,
first background in top and second one in footer, currently im using the below code:
body {
background: url(images/bgfooter.png) bottom center repeat-x, url(images/bgheader.png) top center repeat-x;
}
this css is working well when page is bigger than screen height, but i have some of pages with about height 500px and in these cases bgfooter isn't showing in footer,
i like to add something like this,
body {
background: url(images/bgfooter.png) bottom center repeat-x, url(images/bgheader.png) top center repeat-x;
min-width: screensize;
}
any option?
You can set a dubble background in CSS3
background:
url(number.png) 600px 10px no-repeat, /* On top, like z-index: 4; */
url(thingy.png) 10px 10px no-repeat, /* like z-index: 3; */
url(Paper-4.png); /* On bottom, like z-index: 1; */
Set the background img to the body and then set a separate background img for the footer.
body {
background: url(images/bgheader.png) top center repeat-x;
}
#footer {
background: url(images/bgfooter.png) bottom center repeat-x;
}
Your HTML
<html>
<body>
<div id="footer">
</div> <!-- END OF FOOTER DIV -->
</body>
</html>
Now that you have set the background img to footer you may adjust any other attributes to the footer and body to your preference.
I can't figure out how to make my seasonal overlay div the full height of the html. Right now its the height of the screen, but scrolling down cuts off part of the image. Does anyone know the right way to make the sesasonal overlay div extend the whole height of the html? The div is part of a server side include so I can't close the underlay div after my content. Also, half my closed online sales don't use javascript, so it needs to be an html/css solution please.
You can save time from reading below by just seeing my JSFIDDLE.
Thanks.
CSS:
html{
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#C5CEFF', endColorstr='#F8D0FD',GradientType=0 );
background: -webkit-gradient(linear, left top, left bottom, from(#C5CEFF), to(#F8D0FD)) fixed;
background: -moz-linear-gradient(top, #C5CEFF, #F8D0FD);
margin:0px;
padding:0px;
min-height:100%;
}
body{
margin:0px;
padding:0px;
overflow-x: hidden;
min-height:100%;
display:block;
}
.background-overlay-season
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
width:100%;
background-image:url(http://sonosmile.com/images/fall.png);
margin:0px;
padding:0px;
overflow-x: hidden;
min-height:100%;
display:block;
}
HTML:
<html>
<body>
<div class="background-overlay-season"></div>
a bunch of content....
</body>
</html>
Right, I think I've found it.
Firstly, I think the image should be set on the body, but you said that didn't work in IE, and you were right.
If we remove the filter from the html CSS and the body background-image appears, but obviously that's not too helpful as we've lost the gradient in IE. Ok. So, trying to find out why, I tested creating a new gradient from Colorzilla. When I put that in, it worked:
background: #c5ceff; /* Old browsers */
background: -moz-linear-gradient(top, #c5ceff 0%, #f8d0fd 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c5ceff), color-stop(100%,#f8d0fd)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #c5ceff 0%,#f8d0fd 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #c5ceff 0%,#f8d0fd 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #c5ceff 0%,#f8d0fd 100%); /* IE10+ */
background: linear-gradient(to bottom, #c5ceff 0%,#f8d0fd 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c5ceff', endColorstr='#f8d0fd',GradientType=0 ); /* IE6-9 */
Great. But why? After some debugging, it turns out that unless you specify the first background (background: #c5ceff; /* Old browsers */), it won't work, the background on the body just won't show. And it's not just a background-image, it won't work for a solid color either. No idea why.
But there you go. Here's your new CSS, with your leaves background-image on the body, and working in IE.
html {
background: #c5ceff; /* Old browsers */
background: -webkit-gradient(linear, left top, left bottom, from(#C5CEFF), to(#F8D0FD)) fixed;
background: -moz-linear-gradient(top, #C5CEFF, #F8D0FD);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#C5CEFF', endColorstr='#F8D0FD',GradientType=0 );
margin:0px;
padding:0px;
}
body{
margin:0px;
padding:0px;
background:url(http://sonosmile.com/images/fall.png);
}
http://jsbin.com/eBOcuLE/4/edit
Note that I removed all your styling for the empty div. Using that div as your background won't work, because although you can make it 100% height, it will only be the height of the viewport. It has no content in it, so it has no idea that the page content is going longer that the viewport.
Hmmm, I think I may have an answer for you.
Remember that when using position:absolute, the element ends up being relative to the first ancestor element it encounters with position:relative. Should one not exist, the container will be considered the <html>. So why doesn't <html>, and hence .background-overlay-season go to the bottom of the document?
You have to consider what the min-height: 100% you specified on <html> is actually relative to; what exactly is it 100% of? The behaviour suggests that it is actually relative to the browser viewport's height, so the <html> (and any element using it as a reference for height) can be guaranteed as tall as the viewport. As a result, you'll actually want to make <body> the container, not <html>, with a simple addition to your CSS:
body{
position:relative;
}
Here's a JSFiddle showing what this achieves. Note that .background-overlay-season extends to the bottom of the document now. If this isn't what you were looking for, let me know and I'll be happy to (try) helping further! (This was a bit of a learning experience for me too, haha...)
If you want background-image on all your body, you can use this
body
{
background-image: url(http://sonosmile.com/images/fall.png);
background-size: contain;
}
Try this fiddle
Move the content of the div .background-overlay-season to body.
body {
background-image: url("http://sonosmile.com/images/fall.png");
display: block;
left: 0;
margin: 0;
min-height: 100%;
overflow-x: hidden;
padding: 0;
position: absolute;
top: 0;
width: 100%;
z-index: -1;
}