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;
}
Related
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 making a website using Dreamweaver CC 2015 and it's fluid grid layout. I got the design as I want it but when I resize the browser to simulate a tablet or smartphone the images do not stay together?
You can see it on this page: www.sverkel.dk
This is an issue with the value of background-size. You are setting it to 100%, but you should be setting it to 100% 100%. Once you fix that in the style sheet, the images will always stay together without leaving any gap between them. For example:
#midt {
background-image: url(../billeder/bgmidt.jpg);
background-repeat: no-repeat;
height: 100%;
background-size: 100% 100%;
}
Why does this happen? If background-size only gets one value, it is interpreted as the value of the width of the image, and the value of the height is set to auto. You need to specify two values so you are setting both width and height (source).
As explained in the comments below, this may cause some issues with the rounded borders not looking nice as the image is stretched.
If you can, it may be a good idea to move to a CSS-only solution (without images), that will adapt to the screen size and keep the proportions all the time. It will also save you some bandwidth as you'll stop using 100KB in images. The only con is that you may need to do some tricks to make it work in old browsers (although it doesn't seem like you need that, see JSFiddle below).
Something like this (you can also see a more in-depth sample on this JSFiddle):
body {
background: url(http://www.sverkel.dk/billeder/bg.jpg) center center;
}
.gridContainer {
width:90%;
max-width:1200px;
border-radius:10px;
box-shadow:0px 0px 16px rgba(0,0,0,0.8);
margin:auto auto;
text-align:center;
background:#e5e5e5;
}
.gridContainer #top {
background: #b4b4b4; /* Old browsers */
background: linear-gradient(to bottom, #b4b4b4 0%,#e5e5e5 100%); /* W3C */
height:125px;
border-radius:10px 10px 0px 0px;
}
.gridContainer #bund {
background: #b4b4b4; /* Old browsers */
background: linear-gradient(to bottom, #e5e5e5 0%,#b4b4b4 100%); /* W3C */
height:125px;
border-radius:0px 0px 10px 10px;
}
.gridContainer #menu {
background: #cf5858; /* Old browsers */
background: linear-gradient(to bottom, #cf5858 0%,#902727 100%); /* W3C */
height:45px;
line-height:45px;
color:rgba(255,255,255,0.9);
border-radius:10px;
margin:16px;
}
<br/>
<div class="gridContainer clearfix">
<div id="top" class="fluid"></div>
<div id="menu" class="fluid">Forside - Produkter - Priser - Om - Kontakt</div>
<div id="midt" class="fluid">Hvad så der?</div>
<div id="bund" class="fluid"></div>
</div>
I have been experimenting with a top to bottom linear-gradient for a background of a page I am making. The only problem is that there is a footer on the page and I would like to end the gradient before the end of the div.
Is this possible in CSS solely, or should the HTML be changed to create a div which ends before the footer begins? Or should jQuery calculate the percentage at which the footer begins?
The pages are all different lengths, so ending by percentage would not work for all pages. Can a linear gradient be ended, say 500px before the end of the div?
My code is here, the wrapper div extends for the full width of the page.
div#wrapper {
background: #ffdf96; /* Old browsers */
background: -moz-linear-gradient(top, #ffdf96 0%, #a67f25 50%, #000 60%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffdf96), color-stop(50%,#a67f25), color-stop(60%,#000)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffdf96 0%,#a67f25 50%,#000 60%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffdf96 0%,#a67f25 50%,#000 60%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffdf96 0%,#a67f25 50%,#000 60%); /* IE10+ */
background: linear-gradient(to bottom, #ffdf96 0%,#a67f25 50%,#000 60%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffdf96', endColorstr='#a67f25',GradientType=0 ); /* IE6-9 */
}
The page in context is here: http://bit.ly/1ar6KuR
Many thanks for any help that you can give :-)
Why not reverse the gradient color stops and reverse the direction from top --> bottom to bottom --> top and have the first color stop at the required pixel value.
Codepen Example
Or am I overthinking this?
Perhaps the best way is to add :before pseudoclass and apply gradient to that, like:
#wrapper:before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 60%;
content: "";
... and background here ...
}
or DIV inside #wrapper as first child with the same CSS settings.
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/
I have a cross-browser CSS gradient, such as this:
#background {
background: #1E5799; /* old browsers */
background: -moz-linear-gradient(top, #002c5a 0%, #79d6f4 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#002c5a), color-stop(100%,#79d6f4)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#002c5a', endColorstr='#79d6f4',GradientType=0 ); /* ie */
}
But I need it to span the height of the entire page, not just the viewport. In other words, I need to apply the style to an element that has the same height as the entire page, which would usually be body or html.
Further complications:
I'm also using the sticky footer, which requires html and body to be set to 100% height. So applying the style to them results in only the viewport being filled.
I'm not even sure if what I'm asking is possible, but any help would be appreciated.
html body {
min-height: 100%;
}
It will do the trick, the min-height property spans the total height even if the page is scrollable, but height property sets the height of active view-port as 100%.
This works cross browser!
Another option if you want the gradient to scale ONLY to your viewport but be maintained when you scroll. So instead of the gradient plotting the entire height of the document it remains relative only to whats visible. (Try it out you will see what Im saying)
background-attachment: fixed;
Based on Kyle's solution, as well as the other styles from the sticky footer, here is the solution that finally worked:
.wrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -250px;
background: #1E5799; /* old browsers */
background: -moz-linear-gradient(top, #002c5a 0%, #79d6f4 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#002c5a), color-stop(100%,#79d6f4)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#002c5a', endColorstr='#79d6f4',GradientType=0 ); /* ie */ } /* corresponds to height of #footer */
#body-wrapper {
height: 100%;
width: 100%;
}
With the following html:
<body>
<div id="body-wrapper">
<div class="wrapper">
<p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer">
<p>Copyright (c) 2008</p>
</div>
</div>
</body>
You could wrap the entire content of the page in a background div, then set it to that. This way the wrapping div will fill up with all your content and the background will expand across the whole page.
HTML:
<body>
<div id="background-wrapper">
<!--all your content-->
</div>
</body>
CSS:
#background-wrapper {
background: #1E5799; /* old browsers */
background: -moz-linear-gradient(top, #002c5a 0%, #79d6f4 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#002c5a), color-stop(100%,#79d6f4)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#002c5a', endColorstr='#79d6f4',GradientType=0 ); /* ie */
height: 100%;
width: 100%;
}
That should do it :)
you don't need a wrapper:
CSS:
body{
width: 100%;
height:100%;
background-repeat:no-repeat !important;
margin:0; padding:0;
background: #603813; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#28abe2', endColorstr='#ffffff'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#28abe2), to(#ffffff)); /* for webkit browsers */
background: -moz-linear-gradient(top, #28abe2, #ffffff); /* for firefox 3.6+ */
}
sample HTML:
<body>
<div id="headerBG">
content goes here content goes here content goes here content goes here
content goes here content goes here content goes here content goes here
content goes here content goes here content goes here content goes here
content goes here content goes here content goes here content goes here
</div>
<div id="container"><!--start container-->
<div id="content"<!--start content-->
content goes here content goes here content goes here content goes here
content goes here content goes here content goes here content goes here
content goes here content goes here content goes here content goes here
content goes here content goes here content goes here content goes here
content goes here content goes here content goes here content goes here
content goes here content goes here content goes here content goes here
content goes here content goes here content goes here content goes here
content goes here content goes here content goes here content goes here
</div><!--end content-->
</div><!--end container-->
</body>
The gradient won't show if you don't have any content inside your divs! :) Hope this helps!
html, body {line-height:1.5;background:#23538a;
background: -moz-linear-gradient(top, #ffffff 0%, #23538a 50%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(50%,#23538a)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#23538a 50%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#23538a 50%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#23538a 50%); /* IE10+ */
background: linear-gradient(top, #ffffff 0%,#23538a 50%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#23538a',GradientType=0 ); /* IE6-9 */
}`