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.
Related
This is my design layout. Structure like this
<div class="outer">
<div class="container">
<div class="content"></div>
<aside></aside>
</div>
</div>
The css for that layout is
.container{width:1000px; margin:0 auto;}
.content{width:70%; float:left;}
aside{width:30%; float:left;}
Okay, now I need to set up a gradient background for the sidebar. I can use a gradient image repeat-y to make that for the sidebar. But the margin-right space of the container also have the same gradient.
I have used the background gradient for .outer div. It is okay for normal desktop. But when it is visited from a higher resulation it shows something like that.
I know the gradient displacement is happening because of the % used to generate the gradient. I am giving you the default gradient line I have used without prefix.
background: linear-gradient(to right, #ffffff 0%,#ffffff 67%,#e5e3e6 66%,#f5f5f5 72%,#f5f5f5 100%);
What is the probable solution for that???
** This is a long page with short sidebar. But the background should be from top to bottom.
If you need live link, I have that. https://blog.measuredsearch.com/
Try this background for container_wrap class
#main .container_wrap
{
background:-webkit-linear-gradient(left, #ffffff 0%,#ffffff 50%,#e5e3e6 66%,#f5f5f5 72%,#f5f5f5 100%);
}
Rather than applying the background to the entire container and setting percentages at which the gradient should start so that it fits over the aside I recommend applying this only to the aside and adjusting the styling accordingly.
As well as issues with resolution, you also have duplicate percentage values being stored.
aside{
width:30%;
float:left;
//background gradient definition here
}
http://jsfiddle.net/ky9enkb4/
Browser show you correct result. As a fast variant media queries for wide-screens
#media screen and (min-width: 1500px) #main .container_wrap {
background: linear-gradient(to right, #ffffff 0%,#ffffff 62%,#e5e3e6 66%,#f5f5f5 72%,#f5f5f5 100%);
}
Or just give width for white gradient width 62%. It will be normal.
I believe this is what you are trying to achieve
The whole page with background gradient from top to bottom. Starting with #fff to accommodate content section
The dark region to accommodate sidebar.
To maintain the stability with large and small screens.
What I have done
I have added the gradient to the body so that the left is white and right is dark color.
Different gradient whit only dark colors and ending with the same color that the body is ending with (You might have to check with really large screen if the shade difference occurs outside the container).
The container, aside to occupy height from top to bottom of the screen
Check out the Fiddle
body{background: linear-gradient(to right, #ffffff 0%,#ffffff 67%,#e5e3e6 66%,#cfd7da 72%,#cfd7da 100%);margin:0;}
.container{width:400px; margin:0 auto;background:#fff;height:100vh;border:1px solid #999;}
.content{width:70%; float:left;height:100vh;}
aside{width:30%; float:left;background: linear-gradient(to right, #acb9bf ,#cfd7da 72%,#cfd7da 100%);height:100vh;}
hi you may try this may this work for you
background: linear-gradient(to right, #ffffff 0%,#ffffff 0%,#e5e3e6 66%,#f5f5f5 72%,#f5f5f5 100%);
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 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;
}
I'm facing an odd problem. I have a document with a gradient background color.
<body class="loginbackground">
.loginbackground {
background: #64889A; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#DCDCDC', endColorstr='#64889A'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#DCDCDC), to(#64889A)); /* for webkit browsers */
background: -moz-linear-gradient(top, #DCDCDC, #64889A); /* for firefox 3.6+ */
width: 100%;
height: 100%;
}
When first building the page I hadn't set a doctype (yes my bad, but it is still in pre-pre-alpha!)
I added <!DOCTYPE html> to my html file, and bam, the background gradient disappears.
It works fine in Chrome and IE. This is only broken in Firefox. I'm using Aurora (13a0.2). If I remove the line -moz-linear-gradient, then it shows the default background color (no gradient).
Am I doing something wrong or is it actually a bug in Firefox?
** UPDATE **
If I give a background-size: 1000px 1000px then it works, somewhat. I would like to give 100% 100% or auto, but that doesn't work. Giving a fixed size means that it is screen resolution dependent.
Your problem is that per spec the gradient sizing box is the box of the element the background style is on. And in standards mode, the height of your body is 0 because you didn't set height: 100% on the <html>. You can see this if you put a border on the body.
Try replacing you css with this variant:
background: -moz-linear-gradient(top, #dcdcdc 0%, #64889a 100%);
The place I go to when I need cross-browser gradient is this: http://www.colorzilla.com/gradient-editor/
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/