I have an image called myImage.jpg. This is my CSS:
body {
background-image:url("../images/myImage.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
}
For some reason, when I do this, the width of myImage stretches across the entire screen but the height only stretches until the height of everything else on the page. So if I put a bunch of
<br>
in my html page, then the height will increase. If my HTML page consists only of a
<div id='header'>
<br>
</div>
then the height of the background image would just be the height of one
<br>
How do I make the height of my background image 100% of the screen which the user is using to view the webpage?
You need to set the height of html to 100%
body {
background-image:url("../images/myImage.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
}
html {
height: 100%
}
http://jsfiddle.net/8XUjP/
I would recommend background-size: cover; if you don't want your background to lose its proportions: JS Fiddle
html {
background: url(image/path) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Source: http://css-tricks.com/perfect-full-page-background-image/
The VH unit can be used to fill the background of the viewport, aka the browser window.
(height:100vh;)
html{
height:100%;
}
.body {
background: url(image.jpg) no-repeat center top;
background-size: cover;
height:100vh;
}
html, body {
min-height: 100%;
}
Will do the trick.
By default, even html and body are only as big as the content they hold, but never more than the width/height of the windows. This can often lead to quite strange results.
You might also want to read http://css-tricks.com/perfect-full-page-background-image/
There are some great ways do achieve a very good and scalable full background image.
Related
I am creating a website, however I would like the website to have a full screen div (Like this: http://peet.io)
However I do not know what is wrong with my code, I have tried googling several times, but still no help.
This is my code:
http://jsfiddle.net/6p3dk2yo/
.introduction {
height: 100%;
width: 100%;
background: url('../images/header.jpg') no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: absolute;
}
That is my introduction css code.
However it only show's my test div and not my introduction div which is what I need the most, is not showing, the 'test' div is making it hidden.
If anyone knows how i can fix this then please say:)
That is because setting height: 100% simply means "stretch to the height of element's content". And since it is an empty <div> element, a height of 100% simply computes to 0px.
What you can do though, is to use vw or vh units when it comes to dimensions (see browser compatibility and support) that have to be calculated relative to the viewport size:
.introduction {
height:100vh;
width: 100%;
background: url('../images/header.jpg') no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: relative;
}
http://jsfiddle.net/teddyrised/6p3dk2yo/3/
Even better, is that you can also use max-height or min-height to control how big the element should be when it comes to smaller, mobile viewports through the #media conditional statement.
Your introduction div has a height: 100%; but it's 100% of nothing.
If you put some content in your div, like in this JS Fiddle then you'll be able to see the background image.
If you don't want any content in the div, then you should change height to a fixed pixel amount, like height: 500px;.
Your div technically has no content, so it is in fact 100% of 0px (content size). If you want to stick with the percentages and keep things responsive as you are, why not throw an actual image in that div containter? Check out this Jfiddle. -> http://jsfiddle.net/6p3dk2yo/
<body>
<section class="introduction"></section>
<section class="test"><img src='../images/header.jpg' alt='header' /></section>
<script src="javascript/smoothscroll.js"></script>
</body>
I'm trying to make a landing page, and it needs to be 100% of viewport, example .
As you can see, picture is 100% of width and height.
I've succeed to make it 100% of width, but for height I haven't. Picture is bigger than my viewport.
This is my css code :
body {
background-color: #e3e3e3;
}
#main_wrapper {
width:100%;
height: 100%;
float:left;
background-image: url("http://imgur.com/B2y6wuI");
background-position: center top;
background-size: 100% auto;
}
#wrapper {
width:970px;
height:1000px;
margin:0 auto 0 auto;
}
#landing {
width:100%;
height:800px;
}
if you are working with html5/css3 you can use height:100vh (instead of %... vh = viewport height)... EDIT: depending on what browsers you want to support.. http://caniuse.com/viewport-units
with css3 you can
#main-wrapper{
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;
}
Could you clarify what you are trying to do here? If you are trying to have a full size background image that scales to the width and height of your viewport, then a lot of your CSS is unnecessary. There is certainly more than one way to skin a cat but in this case CSS3 allows us to use
background-size: cover;
http://jsfiddle.net/LtMpw/6/
I have an image that is my header. Here is my simple HTML:
<html>
<body>
<div class="wrapper" />
</body>
</html>
It fills the full width of the page, but I had to specify a height for it show up. Here is the css:
.wrapper {
background-image: url(../assets/bridge.jpg);
background-repeat: no-repeat;
background-size: 100%;
width: 100%;
height: 250px;
}
How do I make this image responsive? Right now when I expand the page it gets to the point where the pic is unrecognizable.
Didn't got your question quiet well, but I think you are missing a value here
background-size: 100%; /* 1 value is not wrong but you'll probably need 2 */
--^---
CSS
.wrapper {
background-image: url(http://images.google.co.in/intl/en_ALL/images/logos/images_logo_lg.gif);
background-repeat: no-repeat;
background-size: 100% 100%;
width: 100%;
height: 250px;
}
Demo
As ralph.m suggested, if you are using this image as your website background, than use the background property on body element instead of div
You need to use following CSS to make the background responsive
body {
background: url(bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Reference Link
You need to think carefully about how you want/expect this to work. Without some actual content in the div, it will have zero height, which is why you needed to set a height on it; but in general, try to avoid setting heights. Presumably, if this is a "wrapper", it will be wrapping some content that will hold it open without you having to set a height.
As for the background image, you need to think about how it will behave. Do you just want it to appear in a strip along the top? If you use Mr Alien's solution, be aware that the image will stretch wider and wider and start to look odd. So we need some more information on what you are trying to do here.
My CSS code is as follows:
body {
background-image: url(images/bg.png);
background-attachment: scroll;
background-repeat: no-repeat;
background-size: 100%;
}
The background image is obviously larger than a standard webpage, but it still won't let me scroll down.
[A side note - I also cannot scroll down in the design view: http://www.meikledesign.co.uk/host/example.jpg]
Give the body a finite height for testing purposes.
body {
height: 2000px;
}
Backgrounds do not artificially increase the body of an html page (defined, by default, as 100%, 100% of browser window) if I remember correctly.
Change the body min-height to the bg.png height, not too pretty solution, but works
If you are trying to achieve responsive background, then check this perfect-full-page-background-image
you can achieve that with css3, like this:
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;
}
but that way it wont work in all browsers.
Check the link i provided for crossbrowser solution.
And about scrolling, you can do that as other members said earlier, by adding min-height to the body.
I am just trying to set my background but this image will not work. It is between 15 to 20MB in size so I tried to turn it into 5MB. Still no luck. I made a really small image, 25KB size, and that worked but just repeated. My localhost will not show big images either. Is there some limit? What do I need to do to get a full image page?
body {
background-image:url(background.jpg);
}
Do this to avoid repeating the image:
body
{
background-image:url(background.jpg);
background-repeat:no-repeat;
}
You can also experiment with background-size: cover like this:
body
{
background-image: url("http://www.google.com/doodle4google/images/carousel-winner2012.jpg");
background-repeat: no-repeat;
background-position: center center;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment: fixed;
}
Here's a demo at JS Bin with a beautiful Doodle 4 Google as the background image to test the behavior:
http://jsbin.com/ivexah/2
you need to assign a width and height to body.
for example:
html, body {
width: 100%;
height: 100%;
}
You can use the shorthand background css property:
background: url(background.jpg) no-repeat;
Also your body might not have a height of 100% because there's no content on your page. Either give your html and body a height of 100% or add more content to your page.
To make a background image cover its entire container use background-size:
background-size: cover;
IE8 and lower don't support this. For those browsers you need a javascript fallback. There's an excellent article on css-tricks.com that shows different techniques.
You shouldn't have any "size" limitation on your background image. More than likely, you're file is so large that you are not waiting long enough for it to load OR you have not set a width and height. Without the dimensions, the element tahat you are trying to load the background image will essentially have a size of 0px x 0px. See the following jsfiddle example:
http://jsfiddle.net/GymxW/1/
The HTML:
<div class="container"></div>
The CSS:
.container {
width: 400px;
height: 100px;
background-image: url(http://dummyimage.com/400x100/4d494d/686a82.gif&text=background+image);
background-repeat: none;
background-position: 0 0;
}
IMPORTANT: If you are wanting to have an image that is "stretched" to the full size of the viewport, a simple solution is to use a plugin, such as Backstretch.