This question already has answers here:
Responsive css background images
(19 answers)
Closed 6 years ago.
I'm making a one-pager from an existing bootstrap theme that has a background image in the section with the background-size: cover selector applied to the header.
Currently, the image only covers about 80-90% of the screen vertically on most browsers, pcs I've tried it on. The bottom is filled with a white background, that of the following section below. I would like the image to occupy the entire vertical view when you first load the page.
I can manually edit the height by pixel to make it work for a given monitor/browser, but is there any way to have it dynamically resize based on the height of the view for each browser, machine, etc.? Or am I stuck with this "white space" problem.
Example in chrome on this PC:
https://i.stack.imgur.com/yqMHp.jpg
Give it height:100vh;
html,body{
width:100%;
height:100%;
margin:0;
padding:0:
}
.imageH{
width:100%;
margin:0;
padding:0;
background-image:url("http://images.financialexpress.com/2015/12/Lead-image.jpg");
background-size:cover;
background-position:center;
height:100vh;
}
<div class="imageH"></div>
And if you have a navbar before this div say of height 50px then use calc(100vh - 50px)
html,body{
width:100%;
height:100%;
margin:0;
padding:0:
}
.navbar{
width:100%;
margin:0;
padding:0;
background-color:green;
height:50px;
}
.imageH{
width:100%;
margin:0;
padding:0;
background-image:url("http://images.financialexpress.com/2015/12/Lead-image.jpg");
background-size:cover;
background-position:center;
height:calc(100vh - 50px);
}
<div class="navbar">navbar comes here</div>
<div class="imageH"></div>
hi just give this code
body{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;}
you can see this as a example
https://blackrockdigital.github.io/startbootstrap-the-big-picture/
thanks
this problem is occur due to your background size.you have to adjust your background image size.
background-size:cover; or use this background-size:100% 100%;
this will fill all white spaces that is in your background image at botoom.
Related
All I want is to place background image for div for 100% width. Could you please help me to find my mistake.
html
<div class="slogan_background">
<h2>Slogan</h2>
</div>
css
background-image: url("../img/bg.jpg");
background-repeat: no-repeat;
background-position: center;
width:100%;
min-height: 526px;
If I understand the issue correctly, this might help:
background-size: cover;
Your code looks good but maybe you didn't set height and width for body tag. Try adding this to your css
html, body{
width:100%;
height:100%;
}
Also set padding and margin to 0 to remove spaces from the side
.slogan_background{
padding:0;
margin:0;
}
Add the
backgroun-size:100% 100%;
duplicate here
I'm attempting to create a frosted glass effect using 2 images, one is the background of the page and one is the background that looks frosted. To achieve this i use the following code:
body {
background: url(interferentie.png) no-repeat center center fixed;
background-size: cover;
}
#centerlogo {
width:600px;
height:200px;
background:url(interferentie_lensblur.png) center center fixed;
background-size:cover;
top:50%;
left:50%;
margin-left:-300px;
margin-top:-100px;
position:absolute;
}
In firefox, this works fine. But in chrome, the background of the div doesn't get centered. You can see an example here: http://www.wavelengthfestival.nl.
In chrome, it appears that the background of the div simply starts where the div starts. does anyone know of a solution for this problem?
#centerlogo margin-left:auto margin-right:auto
So I've got a body with a CSS gradient background. Then I've got an absolute positioned div nested just within that with a background overlay. In turn, the content wrapper div is then nested within this. I want background div to be fixed and the web page to scroll over the top. The problem is, when the page scrolls the background overlay div kind of disappears like a roller blind...
Here's my fiddle to demonstrate the issue... http://jsfiddle.net/WPk6h/ (try scrolling the result pane to see the effect I mean).
HTML....
<body>
<div id="bgwrapper">
<div id="wrapper">
Content...
</div>
</div>
</body>
and CSS...
body {
background-color:#fcf
}
#bgwrapper{
position:absolute;
top:0;bottom:0;left:0;right:0;width:100%;height:100%;
background: transparent url(http://www.freesmileys.org/smileys/big/big-smiley-001.gif) no-repeat right bottom;
background-size:cover;
background-attachment:fixed;
}
#wrapper {
width:300px;
margin: 0 auto;
}
Any ideas how to prevent this so that the background overlay remains visible at all times?
note... I've not tested it heavily in all browsers yet - the issue is in the first browser I've been using, Chrome so I haven't got round to testing in others yet.
EDIT...
People are wondering why I don't just apply the background image to the HTML or BODY tags - well, there is a clash between CSS gradients and background images - you cannot have them both in the same element, as can be seen with the two examples below. This is why I'm using an additional background wrapper div to create the effect of an 5% alpha image overlaying the gradient bg.
http://jsfiddle.net/tqbtm/ (attempting to add gradient and bg image to body tag)
http://jsfiddle.net/ca5wa/ (adding bg image to bg wrapper div over the body gradient)
You need to remove position: absolute from #bgwrapper div:
#bgwrapper{
width:100%;
height:100%;
background: transparent url(http://www.freesmileys.org/smileys/big/big-smiley-001.gif) no-repeat right bottom;
background-size:cover;
background-attachment:fixed;
}
Update jsfiddle
You could also have a look at the following link:
http://css-tricks.com/perfect-full-page-background-image/
which details several different methods of doing full-screen, fixed, backgrounds
the method I currently use is method 1 (CSS3) for this kind of technique
html {
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;
}
As Doug told you just add background-attachment:fixed; background-size:cover; width:100%; height:100%; to your #bgwrapper style.
Set the Position to be fixed
position:fixed
In ...
#bgwrapper{
position:fixed
top:0;bottom:0;left:0;right:0;width:100%;height:100%;
background: transparent url(http://www.freesmileys.org/smileys/big/big-smiley-001.gif) no-repeat right bottom;
background-size:cover;
background-attachment:fixed;
}
I have a div tag like
<div id="MainMenu1" dojotype="dijit.layout.ContentPane"></div>
This div is associated with a css like
#MainMenu1
{
height:53px;
background: url(../images/top_banner.png) no-repeat;
background-position:center;
margin:auto;
width:100%;
border:0;
}
I see that the background image is fine on a smaller screen but on a wider screen, it occupies only the center position. I want the image to occupy the full screen even on wider screens and I do not want the image to "repeat".
How would I do this?
#MainMenu1
{
height:53px;
margin:auto;
width:100%;
border:0;
background: url(../images/top_banner.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Try this. It works perfectly for me. It should fit the background perfectly in the center and reasonably stretch it to whatever screen size the website is being viewed on.
You can either let the image repeat meaning it covers the whole space or use background-size: cover which will scale it to cover the whole area while keeping the original aspect ratio of the image.
I have a number of divs of certain, knows sizes. The pictures that I would like to use as background differ in size so, I was thinking to use background-size:cover to make sure that the images inside sort of look good instead of being stretched or shown just a part of them.
But I cannot find the way to accomplish this. Another reason why this is not working is that I have the need to assign the background-image property inline only.
Does anyone have any idea on how to use background-size:cover on something that is actually not the whole viewport, but just a div?
Thanks in advance
Try these styles:
background-size:contain;
background-repeat:no-repeat;
background-position:50% 50%;
Add a class with the following attributes, use this class with that div and make sure that for maintaining the aspect ratio you make width and height to 100% inside another div positioned relative
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;
Edit:
Resize the frames in jsfiddle and you will observe that the image does not shrink below the min-width (set in percentages) while it can expand depending upon the space available
http://jsfiddle.net/UQP78/12/
http://jsfiddle.net/UQP78/10/
<div id="bg">
<img src="http://www.faber04blog.com/wp-content/uploads/2012/08/jquery" alt="">
</div>
#bg {
position:fixed;
top:-50%;
left:-50%;
width:150%;
height:150%;
}
#bg img {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
min-width:25%;
min-height:25%;
}
http://jsfiddle.net/UQP78/7/