body {
margin:0;
padding:0;
position:relative;
background:url(../images/imgs/backgrnd.png) no-repeat;
background-size:cover;
}
The background-size:cover works perfectly for the most part and resizing is generally not a problem, but in some cases it leaves a large white strip down at the bottom of the page on some resizes.
The background is a 1920x1080 image
Not sure if you solved this problem, but I was tearing my hair out over it for a couple of days and nothing I could Google was helping. I talked to someone at work on our UI team and it turns out that the body of the web page won't necessarily cover the whole height of the page. Adding the following to my css file completely solved the problem:
html {
height: 100%;
}
body {
background-size: cover;
height: 100%;
}
This stretches the content of the body to fit the whole height of the window. Just including the "body" bit worked for me, but my coworker informed me that it's better to include both because some browsers will act funny with just one.
Add an overflow:auto; to resolve this issue.
For Instance,
body {
margin:0;
padding:0;
position:relative;
background:url(../images/imgs/backgrnd.png) no-repeat;
background-size:cover;
overflow:auto;
}
Hope this helps.
It's 2021 and I encountered a similar problem and none of the solutions worked for me.
I managed to figure it out and hope this will help someone.
You will need to set the viewport height and width to 100%. According to w3schools, The viewport is the user's visible area of a web page. This will eliminate any white spaces by setting the minimum height to that.
height: 100vh;
width: 100vw;
Perhaps you can also try using:
background-size:100% 100%;
just a suggestion
Related
I am having trouble keeping a consistent Background image height on a div across multiple devices, I am using Chrome's DevTools to preview the outcome on different devices based on their width. Let me explain further.
I have a div with the following class...
.header-image {
width: 100%;
height: 57%;
background: url('img/fruit-water.jpg') lightgrey;
background-size: 100%;
display: block;
}
This displays perfectly fine on the normal computer viewport, the height: 57%; property displays the perfect amount of the background image that I need. But when I change the view onto another device it doesn't display the same amount of the image that it initially did, it only shows about 20% of the image.
Does anyone know a way to keep the amount of the image displayed consistent, even with the width value changing?
I can't use Jquery or any plugins as the page is an AMP page and validates according to the AMP rules set by google.
https://jsfiddle.net/pre6L7d9/1 <-- Fiddle, Please look into it
Thanks in advance.
as #severinolorillajr said you can use:
background-size:cover;
and if you want to center it to the top you can use:
background-size: cover;
background-position:50% 0%;
EDIT:
Sorry i cannot answer the other question,
if you want to use a % height like 57% you need to set the image position:absolute;
Or you can use:
height:57vh;
That will do the trick!
EDIT2:
maybe you need to mantain the image scale, then you need to set it to:
height:57vw;
.header-image {
background: url('img/fruit-water.jpg') no-repeat center center fixed;
background-size: cover;
}
Check this for other CSS Implementation
Thanks for any help. I'm fairly new to web developing and I've run into a strange issue on my site. http://bit.ly/1nnzqeB
The image that seems to be BEHIND it should be scaling to fit in the section, rather than what it's doing now. I've been stumped on this for hours and I feel that it's probably something stupid simple so I'm reaching out to the experts. Please help!
Well, im guessing you want this image to scale and fit the entire horizontal white space.
http://codesilver.us/wp-content/themes/SVG/img/slide1-1.jpg
After looking at your code, your .container needs to be 100% width
.container {
width: 100%;
}
After i applied this fix it appears to work, you may want to clean up your div structure a bit overall, but that's a different conversation.
UPDATE:
For re sizing you can use the css cover property for background-size: cover; this make sure the image covers the entire div and vertically and horizontally aligns the picture as well.
newheader {
/* background-size: 100px 100px; */
background: url("../img/slide1-1.jpg") no-repeat scroll center center;
margin-top: 5%;
/*background-size*/
-moz-background-size:cover;
background-size:cover;
}
Assuming this is actually how you want it to look, do two things:
Remove the background-size: 100px 100px; from the .newheader class
Add width: 100%; to the same class
I have a problem with my body selector. When I make my windows smaller it doesn't keep the body width at 100%, and I don't have any clue why.
body
{
margin:0px !important;
background:url(../images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width:100%;
height:100%;
}
This is generating a footer bug when I make the window smaller because the body is not on the whole width.
I can't add pics to show because I don't have 10 rep, but you can check at this link and make the windows smaller:
http://websoftit.ro/lackoflove/about.php?active=1
i dont want my website to be responsive i just want my body to be 100% on any resolution. here are the links of pics and problem i have when i make the window smaller: i.imgur.com/70sj43G.png i.imgur.com/OgMZVxa.png
You have widths set inside the body. For example your navigation has a width of 1060px as does your main_bg div.
The problem is actually caused by div#banner, which has the following style:
#banner {
position: absolute;
width: 150px;
margin-top: 5px;
margin-left: 1040px;
}
Margin set to 1040px together with width: 150px causes your banner to have overall width of 1190px, that is wider than the rest of site.
I assume you've used position: absolute on your banner to avoid this problem, but this is not enough to make it work like you want.
You can read more about solution to this issue here.
Note:
The above solves your problem, but won't help making your site responsive.
If responsive design is your goal (you didn't say this, I'm just guessing that maybe it is), I'd recommend looking at some tutorials to get the basic rules etc.
There also are responsive frameworks like Bootstrap or Zurb Foundation that help making responsive websites.
The child divs are not set to fluid widths. If you change the CSS "width" to "max-width" you'll get a chance to see how the layout changes at different screen widths. There will definitely be further updates needed to your CSS, but this will get you started.
document.onresize = function() {
document.body.style.width = document.body.scrollWidth+"px";
}
This can help you, when the document is resized, this callback reset body width to 100% of document's width.
So I am trying to do 2 things that work well on their own, but I'm having trouble integrating them together. First off, here's a link to the site: http://ericbrockmanwebsites.com/dev4
Create a fullscreen background image using
html {
min-height:100%;
background-size: cover;
background-image: url(images/bg.jpg);
background-repeat: no-repeat;
background-position: center bottom;
}
create a footer that stays at the bottom of the page, even when there's no content, which normally would require something like this:
html {
height:100%;
}
body {
height:100%;
}
.container {
min-height:100%;
}
#footer {
clear:both;
position:relative;
}
The problem is that in order for the footer to stay at the bottom the height of the html / body needs to be defined at 100%, but unless I define them using the min-height value, the background image just covers the screen as it loads. Meaning that if / when there's a need to scroll down, the background image only goes down to where the bottom of the screen was on load.
I've played around with this for a few hours, but can't seem to find a resolve. Am I missing something obvious?
Firstly, height and min-height aren't mutually exclusive. There's no reason you can't use both. As for the background scrolling when the page is longer than the available space, have you tried background-attachment: fixed?
I'm making attempts to build a responsive site however i'm am struggling with the resizing on the two background images i applied to my site. when i view on a mobile device the header looks squashed, i presume this is become a i applied a fixed height to the header. I have tried using the property height:auto, However still no joy.
can someone point out what i'm doing wrong?
#header{
background: url(images/page_header_1024px.png) no-repeat;
background-size: 100% 100%;
max-width:1024px;
min-height: 100%;
margin: 0 auto;}
click here
Write like this :
html, body{
height:100%;
}
#header{
min-height:100%;
}
Is there a reason you're not using a standard tag? Then the browser will natively resize it - try resizing this page (just your image in it's own window):
http://thisiswired.com/responsive/css/images/page_header_1024px.png
Is that the effect you want?