#section{
position: absolute;
top:0;
height: 100%;
width:100%;
background: url("http://cdn9.howtogeek.com/wp-content/uploads/2010/05/ubuntu-human-1440x900.jpg") no-repeat center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
<body>
<section id="section"></section>
</body>
When background-size is set to cover the image changes its size to cover the window when window size is changed.
Is there any way to cover background totally at the start and then when after window size is changed to make the image unresponsive ?
If you're looking to make your background image fill the screen on load, and then not resize afterwards (which i would reconsider - but maybe im not seeing the big picture, no pun intended ;) )
A possible option is to load the image in a seperate div, set the z-index:-9999; (which will make the div sit below all the other divs), and then use javascript to determine the size of the image/div when it covers the whole page and change the size of the div with javascript element.style.width = ""
window.onload = function(){
theWidth = document.getElementById("background").offsetWidth;
theHeight = document.getElementById("background").offsetHeight;
document.getElementById("background").style.width = theWidth;
document.getElementById("background").style.height = theHeight;
}
#background{
position: absolute;
top:0;
height: 100%;
width:100%;
background: url("http://cdn9.howtogeek.com/wp-content/uploads/2010/05/ubuntu-human-1440x900.jpg") no-repeat center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
<body>
<section id="background"></section>
<section id="your_content"></section>
</body>
If you wish to make it so that it does not overflow and give you horizontal scrolling after it loads, wrap the background in a <div style = 'max-width:100%; overflow:hidden; position:relative;'> div - overflow:hidden; will hide all content that overflows that divs bounds (like the div holding the image inside of it which will be at the original width while current width could be smaller) and position:relative; is needed for the overflow:hidden; to apply (IIRC - if i remember correctly)
You can do apply a .cover class via jQuery on initial page load and remove it when the window gets resized, like so:
$('section#section').addClass('cover');
$(window).on('resize', function () {
$('section#section').removeClass('cover');
});
see fiddle
How about remove the background-size instead. the image will be shown as it's original size.
#section{
position: absolute;
top:0;
height: 100%;
width:100%;
background: url("http://cdn9.howtogeek.com/wp-content/uploads/2010/05/ubuntu-human-1440x900.jpg") no-repeat center;
}
<body>
<section id="section"></section>
</body>
Change background-size:cover; to background-size: 100% 100%; background-repeat: no-repeat;;
And it will be like that.
#div{
position: absolute;
top:0;
height: 100%;
width:100%;
background: url("http://cdn9.howtogeek.com/wp-content/uploads/2010/05/ubuntu-human-1440x900.jpg") no-repeat center;
background-size: 100% 100%;
background-repeat: no-repeat;
}
<body>
<div id="section"></div>
</body>
Visit here
Or you can use it:
body{
position: absolute;
top:0;
height: 100%;
width:100%;
background: url("http://cdn9.howtogeek.com/wp-content/uploads/2010/05/ubuntu-human-1440x900.jpg") no-repeat center;
background-size: 100% 100%;
}
<body></body>
Or can check this link
Related
How can I have an image always covering all the screen regardless of monitor sizes? I have an image which has a height of 1000px and a width of 1000px. I don't want the image to be repeated but I don't want the scrolling bar to appear as well. If I use % the image is repeated, because it's inside a div. Thank you
I want the bottom of the image to be always at the bottom of the browser page and the div/image to be always the same size, even if I zoom with the browser
div {
width: 1000px;
left:0%;
right:0%;
top: 0%;
height: 800px;
text-align:center;
position: absolute;
background-image: url("image.png");
background-position: 50% 50%;
margin:auto; }
Try this out
div {
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;}
If you still want to know more, do check out this link
https://www.w3schools.com/howto/howto_css_full_page.asp
well if you want set up a full image background that is also responsive, you can do the following:
div {
width: 100%; height: 100%; top: 0; left: 0;
background: url(images/bg.jpg) no-repeat center top; position: fixed; z-index: -1;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
If you want to add this image as background image you can add the below css
div {
width: 100%;
height: 100%;
background: url(images/bg.jpg) no-repeat center top;
position: fixed;
z-index: 0;
}
Or if you want image to be show you can do the below things
<img src="images/bg.jpg" style="width: 100%;height :100%">
if (screen.width>=500){document.write(" body{zoom:78%;}");}
Here's the solution for my code, I needed to change the zoom.
I am trying to make a background image cover the whole screen width and height, and I can't seem to get it right with the height.
I am following these tips to achive it but I don't get it right. It just goes as high as the inner div content can go.
This is the html and css, you can see it in jsfiddle as well:
HTML:
<div class="navbar"></div>
<div class="background-container">
<div class="bg">
<div class="container">
JOIN US!
</div>
</div>
</div>
CSS:
.navbar {
height: 50px;
}
.container {
text-align: center;
padding: 10px;
color: #fff;
}
.bg {
height: 100%;
background: url(https://images.unsplash.com/photo-1431578500526-4d9613015464?q=80&fm=jpg&s=169b4f4e6f3882a03b6b93b2e6848052) no-repeat center center fixed;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Body tags are not full-height by default. You need to specify that.
html, body {
height: 100%;
}
Demo
To prevent the resulting scroll, remove margin and and padding as well.
Demo 2
If feasible please add position: absolute; width: 100%; height: 100% to your .bg class.
The problem is the .bg is just that container you see. If you want the background like you are describing change .bg to body and it works
body {
height: 100%;
background: url(https://images.unsplash.com/photo-1431578500526-4d9613015464?q=80&fm=jpg&s=169b4f4e6f3882a03b6b93b2e6848052) no-repeat center center fixed;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
//add this if you want it to stay fixed
background-attachment: fixed;
}
or you can make the .bg position absolute or fixed so it'll take 100% height.
The default html gets a margin so it will not stretch till the end, so add margin:0 and padding: 0, for stretching till the corners of the browser. Next the width:100vw; implies that 100% of your viewport width so as to make a responsive webdesign, similarly height:100vh; 100% of the viewport height
Add a CSS rule
body, html {
margin:0;
padding:0;
height:100vh;
width:100vw;
}
I'm building an one page scroll down type website, where each slide is a page.
In the last slide, the background image is somehow geting cuted and there's just a white space. The css used on the id of that slide:
#seven {background:url(../img/camara_view.JPG) bottom no-repeat fixed; }
Here's a print:
http://postimg.org/image/489mxfagt/
Any solutions?
You can use background-scale property:
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Scaling_background_images
If you're supporting modern browsers, you can do the following.
#seven {
background-size: cover /* contain */ /* width in px/em/rem ie 50rem 20rem */
}
Alternatively, you can put your image in an img tag within a container, position the container using either fixed or absolute positioning. Next, give it a width of 100% and height of 100% or top, left, right, bottom a value of 0, while hiding the overflow. Lastly, set the img width to width: auto and height: 100% with display: block.Example here.
using css background image
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;
}
else you can try some other way below code works fine from ie7
css code
#bg {
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
#bg img {
position:absolute;
top:25%;left:25%;
right:25%;bottom:25%;
margin:auto;
min-width:50%;
min-height:50%;}
html code
<div id="bg">
<img src="images/Body-bg.png" alt="">
</div>
Just add .bgwidth { width: 100%; }
.bgheight { height: 100%; }
this will eliminate issue
My background image is fluid only to a certain point. When resizing the browser it starts to shrink
background-image : url("http://...");
background-repeat:no-repeat;
background-size: cover;
background-attachment: fixed;
background-position: center right;
height: 400vh;
You can see what I'm talking about here
The height: 400vh is your problem I believe if you can put this code on the html element as such
html {
background: url("http://...") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
and delete the class "me" from your code this should be fluid for you. The problem is you are setting the background on "me" which doesn't contain any content and its height is only being set by you as "400vh" so once it hits that height it stops being fluid so by setting it on the html it will wrap the whole page and be fluid
Edit
if you desire to have your image not clipped in anyway and show 100% of it on every screen you can do something like this
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto 0px;
}
turn the me class into an image instead of a div
<img class="me" src="http://24.media.tumblr.com/8760c4adc4f8c4b7cafa14c5cf6cc55c/tumblr_n2kq1hnFSF1tswi9io1_1280.jpg"></img>
and the css like this
.me {
width: 100%;
}
this will give you a wrap that will cover 100% of the persons screen size and will allow you to set the image to be in the background and will not clip the image as you resize. If you are trying to make this website responsive I wouldn't suggest using absolute references in your css as this may lead to some items out of place on different screen sizes. You may want to check out www.getbootstrap.com since they provide an excellent library for a responsive grid.
click_hear_demo
css
#wrap{
display:block;
width: 100%
}
body {
margin: 0 0;
position: relative;
}
.me {
background-image : url("http://d1jqu7g1y74ds1.cloudfront.net/wp-content/uploads/2013/04/44GHz_image_1.jpg");
background-repeat:no-repeat;
background-size: cover;
background-attachment: fixed;
background-position: center right;
height: 400vh; /*cia su viewportais reikes padirbet, nes cia realiai procentai kaip ir*/
}
}
html
<body>
<div id="wrap">
<div class="me"></div>
</div> <!-- end of #wrap -->
</body>
I set the body to:
body { background-image: url(file:///Volumes/HDD/photomadness_remixed/css/Flavours_400812054.jp2);
background-attachment: fixed;
background-position: center;
background-size: cover;
z-index: 0;}
and it displays my background but when i set this code:
body {
z-index: -1;
background: #425b77; }
#myBody {
background-image: url(file:///Volumes/HDD/photomadness_remixed/css/Flavours_400812054.jp2);
background-attachment: fixed;
background-position: center;
background-size: cover;
z-index: 0;
}
it just would not display the background and instead just displaying the color i set on the body tag.
Any idea how to solve this?
Edit:
When i look at this code on another webpage i have it works correctly and i have written the exakt same thing.
This is my result from code at the second line:
https://www.dropbox.com/s/ioo1cnfszdzh0wu/Skärmavbild%202014-03-07%20kl.%2018.44.33.png?m=
This is the result i get from the code at line 8 and downwards:
http://www.dropbox.com/s/d8wjnwt346gzdv3/Skärmavbild%202014-03-07%20kl.%2018.44.02.png?m=
Edit:
If i add content inside the <div id="myBody"></div> then it will be blurred too because i want a blur filter on it.
try this :
body {
background: #425b77; }
#myBody {
background:url(your picture) no-repeat center center scroll;
background-size: cover;
-moz-background-size: cover;
width:50%; height:50%;
display:block;
position:fixed;
z-index:1001;
}
this is just example... change position width and height as you wish
You forgot to add Height and Width (or add the content do that div).