I'm trying to get my background image to stretch across the entire page, but so far i have this:
This is the picture i want stretched across the browser window:
My external CSS contains the code below:
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("mybackground.jpg")}
Can anyone tell me how I can edit the CSS file to fix my problem?
You can use:
background-size: cover;
However please bear in mind which browsers this supports. For example, this won't work in IE8 and below.
Another option would also include:
body{
background-image:url("mybackground.jpg")
background-size:contain;
background-repeat:no-repeat;
}
Use background-size: cover. Note its browser support.
MDN documentation.
Background size will do the trick:
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;
}
Check this out for more info:
http://css-tricks.com/perfect-full-page-background-image/
You need to make this an <img> tag, with a low z-index, with position: fixed and then for the <img> tag, use height: 100%; width: auto or the opposite.
This method is cross-compatible for all browsers.
Have you tried using
background-size: 10px 10px
Change 10 to the width and height of the body
You can also do
background-size: 100%
Related
I'm just starting on a website and I already encounter a small problem where I can't find a specific solution to.
I wanted to make my website background fit any screen size in width, height does not matter.
This is the link to my image:
../IMAGES/background.jpg
EDIT
I have no idea what's wrong, but for some reason the body doesn't even want to get the background image. It just displays a plain white background.
body
{background-image:url(../IMAGES/background.jpg);}
you can do this with this plugin http://dev.andreaseberhard.de/jquery/superbgimage/
or
background-image:url(../IMAGES/background.jpg);
background-repeat:no-repeat;
background-size:cover;
with no need the prefixes of browsers. it's all ready suporterd in both of browers
Try this ,
background: url(../IMAGES/background.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
For more information , follow this Perfect Full Page Background Image !!
You can try with
.appBackground {
position: relative;
background-image: url(".../img/background.jpg");
background-repeat:no-repeat;
background-size:100% 100vh;
}
works for me :)
Try this, I hope it will help:
position: fixed;
top: 0;
width: 100%;
height: 100%;
background-size: cover;
background-image: url('background.jpg');
body{
background-image: url(".../img/background.jpg");
background-size: 100vw 100vh;
background-repeat: no-repeat;
}
Try this:
background: url(../IMAGES/background.jpg) no-repeat;
background-size: auto auto;
.. I found the above solutions didn't work for me (on current versions of firefox and safari at least).
In my case I'm actually trying to do it with an img tag, not background-image, though it should also work for background-image if you use z-height:
<img src='$url' style='position:absolute; top,left:0px; width,max-height:100%; border:0;' >
This scales the image to be 'fullscreen' (probably breaking the aspect ratio) which was what I wanted to do but had a hard-time finding.
It may also work for background-image though I gave up on trying that kind of solution after cover/contain didn't work for me.
I found contain behaviour didn't seem to match the documentation I could find anywhere - I understood the documentation to say contain should make the largest dimension get contained within the screen (maintained aspect). I found contain always made my image tiny (original image was large).
Contain was with some hacks closer to what I wanted than cover, which seems to be that the aspect is maintained but image is scaled to make the smallest-dimension match the screen - i.e. always make the image as big as it can until one of the dimensions would go offscreen...
I tried a bunch of different things, starting over included, but found height was essentially always ignored and would overflow. (I've been trying to scale a non-widescreen image to be fullscreen on both, broken-aspect is ok for me). Basically, the above is what worked for me, hope it helps someone.
This worked for me:
body {
background-image:url(../IMAGES/background.jpg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
Try this,
.appBg {
background-image: url(".../img/background.jpg");
background-repeat:no-repeat;
-webkit-background-size: 100% auto;
-moz-background-size: 100% auto;
-o-background-size: 100% auto;
background-size: 100% auto ;
}
This one works for me
Background image fix to screens with browser compatibility css
.full-screen {
height: 100%;
width: 100%;
background-image: url(../images/banner.jpg);
background-size: cover;
background-position: center;
//for browser compatibility
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
}
Although there are answers to this your questions but because I was once a victim of this problem and after few search online i was unable to solve it but my fellow hub mate helped me and i feel i should share.
Examples explained below.
Folders: web-projects/project1/imgs-journey.png
background-image:url(../imgs/journey.png);
background-repeat:no-repeat;
background-size:cover;
My major points is the dots there if you noticed my journey.png is located inside an imgs folder of another folder so you're to add the dot according to the numbers folders where your image is stored. In my case my journey.png image is saved in two folders that's why two dot is used, so i think this may be the problem of background images not showing sometimes in our codes. Thanks.
width: 100%;
background-image: url("images/bluedraw.jpg");
background-size: cover;
You can do it like what I did with my website:
background-repeat: no-repeat;
background-size: cover;
background: url("../image/b21.jpg") no-repeat center center fixed;
background-size: 100% 100%;
height: 100%;
position: absolute;
width: 100%;
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.
I have a giant background image that I need 100% 100% scale. But my problem is if the webpage is say 150% height that of the browser (so browser is say 1000x1000, and my website is 1000x1500) when you scroll down to see the rest of the website the background repeats and doesn't get scaled down.
My css is
html,body { width: 100%; height 100%; }
body { background: url(blah) no-repeat; background-size: 100% 100%; }
Any idea of how I can fix that?
Here is a great resource on that topic.
http://css-tricks.com/perfect-full-page-background-image/
Hope it helps.
Like the CSS-Tricks article explained, you could change the CSS to:
html {
background: url(images/background.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
This will make sure your background image covers the whole page, but is only supported in CSS3. Like above, you need to include specific code for each major browser.
Alternatively, try just using:
height: 100%;
or
width: 100%
depending on the image size in relation to your page, but this should let the image resize to the right height/width of your page, while nicely maintaining aspect ratio.
Try applying the background image to the html instead.
Just set 100% on the width if its smaller then the height otherweise set the height 100%. You could probably fix that with javascript.
How to make an image as background for web page, regardless of the screen size displaying this web page? I want to display it properly. How?
its very simple
use this css (replace image.jpg with your background image)
body{height:100%;
width:100%;
background-image:url(image.jpg);/*your background image*/
background-repeat:no-repeat;/*we want to have one single image not a repeated one*/
background-size:cover;/*this sets the image to fullscreen covering the whole screen*/
/*css hack for ie*/
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.image.jpg',sizingMethod='scale');
-ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.jpg',sizingMethod='scale')";
}
um why not just set an image to the bottom layer and forgo all the annoyances
<img src='yourmom.png' style='position:fixed;top:0px;left:0px;width:100%;height:100%;z-index:-1;'>
Via jQuery plugins ;)
http://srobbin.com/jquery-plugins/backstretch/
http://buildinternet.com/project/supersized/
Use this CSS to make full screen backgound in a web page.
body {
margin:0;
padding:0;
background:url("https://static.vecteezy.com/system/resources/previews/000/106/719/original/vector-abstract-blue-wave-background.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Use the following code in your CSS
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;
}
here's the link where i found it:
Make a div 100% wide and 100% high. Then set a background image.
A quick search for keywords background generator shows this CSS3 produced background pattern that's dynamically created.
By keeping the image small and repeatable, you won't have problems with it loading on mobile devices and the small image file-size takes care of memory concerns.
Here's the markup for the head section:
<style type="text/css">
body {
background-image:url('path/to/your/image/background.png');
width: 100%;
height: 100%;
}
</style>
If your going to use an image of something that should preserve aspect ratio, such as people or objects, then you don't want 100% for width and height since that will stretch the image out of proportion. Instead check out this quick tutorial that shows different methods for applying background images using CSS.
CSS
.bbg {
/* The image used */
background-image: url('...');
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
HTML
<!doctype html>
<html class="h-100">
.
.
.
<body class="bbg">
</body>
.
.
.
</html>
I have followed this tutorial: https://css-tricks.com/perfect-full-page-background-image/
Specifically, the first Demo was the one that helped me out a lot!
CSS
{
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
this might help!
I found the reason why there is always a white boder of the background image, if I put the image in a 'div' element inside 'body'.
But the image can be full screen, if I put it as background image of 'body'.
Because the default 'margin' of 'body' is not zero.
After add this css, the background image can be full screen even I put it in 'div'.
body {
margin: 0px;
}