I'm trying to setup a full page background image using the following in the css file
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;
}
Although it does appear nicely, it appears only below of anything appearing in the main body (e.g. footer)
Any help would be appreciated
Regards, loaannis
Perhaps you didn't set your div's right:
Here I have a sample code for you including a "main-content" div and a "footer" div inside the "body" tag:
HTML:
<body>
<div id="main-content">
<p>1234 testing 1234</p>
<p>main content goes here</p>
<p>4321 testing 4321</p>
</div>
<div id="footer">
<p>Contact information here</p>
</div>
</body>
and this is the CSS with an extra line determining the footer color (for better visibility):
body {
background: url("http://www.neyralaw.com/wp-content/uploads/2012/07/tokyo-blue-background-4547.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#main-content {color:yellow;}
#footer {position:absolute; bottom:0; color:white;}
Notice that, for better visibility I have replaced your local image url with an image I found on the internet. Of course any image url will show correctly. I have also replaced the "html" with "body" in the css. Since the "body" is what it is actually "shown" I don't see why you should style the "html". However, even if body is replaced with html in the css, it still works fine!
Demo here: http://jsfiddle.net/Ee74C/4/
Happy coding,
Thodoris
I have a fairly complex webpage and am looking to have a image in the background that is seen through all out all the div layers. Please take a look at http://va.in-design.com for the code. No matter what I try, I am able to only get some of the menu to show. Some settings make it show when the menu on the page is accessed (hovered over). Can someone give me a pointer on the best way to do this. Also, is there anything available out there that would allow that image to be 100% at load and then fade down to 15%?
There is CSS opacity and CSS transitions, but for this I am going to use jquery.
Adjust your html{} selector to show the background like this
html {
height: 100%;
margin: 0;
width: 100%;
background-image: url(/images/logos/v-alexander-logo1-04-transpart-web.gif)
no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I am not sure what you mean the menu doesn't show I saw the menu over the background image for sure. If you are still having this issue I would recommend using the z-index as one of your css rules for your menu ul#sdt_menu or wrapping that in a div id also and adjusting that parent div's z-index.
the jquery to do the opacity fade would be this http://jsfiddle.net/naeluh/XYB3u/
add this div to all the pages you want the background.
<div id="background"></div>
add this css rule to your style.css file and take away your html{}
#background{
height: 100%;
position:absolute;
top:0;
left:0;
width: 100%;
background-image: url(http://va.in-design.com/images/logos/v-alexander-logo1-04-transpart-web.gif);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
z-index:-1;
}
add this in the head of the pages you want it to fade out
<script type='text/javascript'>
$(window).load(function(){
$('#background').fadeOut(9000);
});
</script>
How do I get a full page background in IE8? it works fine in firefox and chrome. I specified the background of a 1000px div. But I am open to specifying the background of the body or html. Thanks for your time. Steven
<!doctype html>
<html>
<style>
html {
}
div.whole{width="1000px";margin:0 auto;border-style:solid; border-width:0px;height:100%;padding:0px;
background: url(images/parchment.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
html, body {
margin: 0px;
padding: 0px;
border: 0px;
height:100%;
width:100%
}
div.image{position:relative; top:50px;left:900px;width:300px; border-style:solid;border-width:0px;}
#font-face
{
font-family: myFirstFont;
src: url(pachs___.ttf);
}
div.text{position:relative;left:250px;top:-300px; font-family:myFirstFont; font-size:250%;border-style:solid;border-width:1px;
width:600px;}
</style>
<body>
<div class="whole">
<div class="image">
<img src="images/tran.png" width="282px" height="381px" class="tran">
</div>
</div>
</body>
</html>
div.whole needs to go below the html, body tags. You aren't structuring it properly because the elements that appear first act as a container for the elements that appear second. This is a habit you need to get into even with css. You also need to specify the height, and I would recommend using percentage values to ensure it covers 100%. Just replace 1000px with 100%. If you want backgrounds for the html and body, you need to specify that within their own brackets.
I have this CSS code:
<style>
body {
position:absolute;
background-image: url(art/c11.jpg);
width:100%;
height:100%;
}
</style>
As I read on the net, I expected that this would resize the background image and fit it to the browser window.
But no. I think I am obviously doing something wrong (I don't know enough CSS). Any tips?
UPDATE:
I add the hole example (not working):
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>No Title</title>
<style type="text/css">
body {
position:absolute;
background-image:url(art/c11.jpg);
background-size:100%;
background-repeat: no-repeat;
width:100%;
height:100%;
}
</style>
</head>
<body >
</body>
</html>
add the background-repeat property.
finished code should look like this:
body {
position:absolute;
background-image: url(art/c11.jpg);
background-size:100%;
background-repeat: no-repeat;
width:100%;
height:100%;
}
If you're going to make this work cross browser, you're better off putting an image on the page and then wrap all your content in a DIV that's laid on top. E.g.
CSS
#background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#content {
position: relative;
z-index: 1;
}
If you plan on supporting IE6, then add this snippet:
<!--[if IE 6]>
<style type="text/css">
html {
overflow-y: hidden;
}
body {
overflow-y: auto;
}
#background {
position:absolute;
z-index:-1;
}
#content {
position:static;
}
</style>
<![endif]-->
HTML
<img id="background" src="art/c11.jpg" alt="" />
<div id="content">
Your content
</div>
Code in action.
I dont think there is a way to stretch or control the size of a background image using CSS. However, you could use the background-position, background-attachment and background-repeat porperties to achieve an alternative result..
or you may use some JavaScript putting Image into a lower z-index layer and set the layer as you backgournd, however that is a little bit Hacking there
By using css3 you can achieve perspective image resize,
html {
background: url(bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
This works in all browsers and ie9+.
The following filters works in ie7 and ie8 too.
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.bg.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg.jpg', sizingMethod='scale')";
You can use the CSS3 property of background-size:100% but the support for this property is not across the board yet and won't work in older browsers. To achieve what you want you need a bunch of hacks to get it to work. There are a number of blogs like this one that will show you what you need to do. I don't recommend doing this since if you have a big image/slow connection you will see the image load. If the image isn't the best quality then it won't look good all stretched across a screen or in a different resolution.
I want that my background image stretch and scale depending on the browser viewport size.
I've seen some questions on Stack Overflow that do the job, like Stretch and scale CSS background for example. It works well, but I want to place the image using background, not with an img tag.
In that one an img tag is placed, and then with CSS we tribute to the img tag.
width:100%; height:100%;
It works, but that question is a bit old, and states that in CSS 3 resizing a background image will work pretty well. I've tried this example the first one, but it didn't work out for me.
Is there a good method to do it with the background-image declaration?
CSS3 has a nice little attribute called background-size:cover.
This scales the image so that the background area is completely covered by the background image while maintaining the aspect ratio. The entire area will be covered. However, part of the image may not be visible if the width/height of the resized image is too large.
You could use the CSS3 property to do it quite nicely. It resizes to ratio so no image distortion (although it does upscale small images). Just note, it's not implemented in all browsers yet.
background-size: 100%;
Using the code I mentioned...
HTML
<div id="background">
<img src="img.jpg" class="stretch" alt="" />
</div>
CSS
#background {
width: 100%;
height: 100%;
position: fixed;
left: 0px;
top: 0px;
z-index: -1; /* Ensure div tag stays behind content; -999 might work, too. */
}
.stretch {
width:100%;
height:100%;
}
That produces the desired effect: only the content will scroll, not the background.
The background image resizes to the browser viewport for any screen size. When the content doesn't fit the browser viewport, and the user needs to scroll the page, the background image remains fixed in the viewport while the content scrolls.
With CSS 3 it seems this would be a lot easier.
CSS:
html,body {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover; /* For WebKit*/
-moz-background-size: cover; /* Mozilla*/
-o-background-size: cover; /* Opera*/
background-size: cover; /* Generic*/
}
background-size: 100% 100%;
stretches the background to fill the entire element on both axes.
The following CSS part should stretch the image with all browsers.
I do this dynamically for each page. Therefore I use PHP to generate its own HTML tag for each page. All the pictures are in the 'image' folder and end with 'Bg.jpg'.
<html style="
background: url(images/'.$pic.'Bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/'.$pic.'Bg.jpg\', sizingMethod=\'scale\');
-ms-filter: \"progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/'.$pic.'Bg.jpg\', sizingMethod=\'scale\')\
";>
If you have only one background picture for all pages then you may remove the $pic variable, remove escaping back-slashes, adjust paths and place this code in your CSS file.
html{
background: url(images/homeBg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/homeBg.jpg', sizingMethod='scale');
-ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/homeBg', sizingMethod='scale');
}
This was tested with Internet Explorer 9, Chrome 21, and Firefox 14.
Use this CSS:
background: url('img.png') no-repeat;
background-size: 100%;
You can actually achieve the same effect as a background image with the img tag. You just have to set its z-index lower than everything else, set position:absolute and use a transparent background for every box in the foreground.
You can add this class into your CSS file.
.stretch {
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;
}
It works in:
Safari 3 or later
Chrome Whatever or later
Internet Explorer 9 or later
Opera 10 or later (Opera 9.5 supported background-size, but not the keywords)
Firefox 3.6 or later (Firefox 4 supports non-vendor prefixed version)
It is explained by CSS tricks: Perfect Full Page Background Image
Demo: https://css-tricks.com/examples/FullPageBackgroundImage/progressive.php
Code:
body {
background: url(images/myBackground.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
In order to scale your images appropriately based on the container size, use the following:
background-size: contain;
background-repeat: no-repeat;
I use this, and it works with all browsers:
<html>
<head>
<title>Stretched Background Image</title>
<style type="text/css">
/* Remove margins from the 'html' and 'body' tags, and ensure the page takes up full screen height. */
html, body {height:100%; margin:0; padding:0;}
/* Set the position and dimensions of the background image. */
#page-background {position:fixed; top:0; left:0; width:100%; height:100%;}
/* Specify the position and layering for the content that needs to appear in front of the background image. Must have a higher z-index value than the background image. Also add some padding to compensate for removing the margin from the 'html' and 'body' tags. */
#content {position:relative; z-index:1; padding:10px;}
</style>
<!-- The above code doesn't work in Internet Explorer 6. To address this, we use a conditional comment to specify an alternative style sheet for IE 6. -->
<!--[if IE 6]>
<style type="text/css">
html {overflow-y:hidden;}
body {overflow-y:auto;}
#page-background {position:absolute; z-index:-1;}
#content {position:static;padding:10px;}
</style>
<![endif]-->
</head>
<body>
<div id="page-background"><img src="http://www.quackit.com/pix/milford_sound/milford_sound.jpg" width="100%" height="100%" alt="Smile"></div>
<div id="content">
<h2>Stretch that Background Image!</h2>
<p>This text appears in front of the background image. This is because we've used CSS to layer the content in front of the background image. The background image will stretch to fit your browser window. You can see the image grow and shrink as you resize your browser.</p>
<p>Go on, try it - resize your browser!</p>
</div>
</body>
</html>
I wanted to center and scale a background image, without stretching it to the entire page, and I wanted the aspect ratio to be maintained. This worked for me, thanks to the variations suggested in other answers:
INLINE IMAGE: ------------------------
<div id="background">
<img src="img.jpg" class="stretch" alt="" />
</div>
CSS ----------------------------------
html {
height:100%;
}
#background {
text-align: center;
width: 100%;
height: 100%;
position: fixed;
left: 0px;
top: 0px;
z-index: -1;
}
.stretch {
margin: auto;
height:100%;
}
Thanks!
But then it was not working for the Google Chrome and Safari browsers (stretching worked, but the hight of the pictures was only 2 mm!), until someone told me what lacks:
Try to set height:auto;min-height:100%;
So change that for your height:100%; line, gives:
#### #background {
width: 100%;
height: 100%;
position: fixed;
left: 0px;
top: 0px;
z-index: -1;
}
.stretch {
width:100%;
height:auto;
min-height:100%;
}
Just before that newly added code I have this in my Drupal Tendu themes style.css:
html, body{height:100%;}
#page{background:#ffffff; height:auto !important;height:100%;min-height:100%;position:relative;}
Then I have to make a new block within Drupal with the picture while adding class=stretch:
< img alt="" class="stretch" src="pic.url" />
Just copying a picture with the editor in that Drupal block doesn't work; one has to change the editor to non-formatted text.
I agree with the image in absolute div with 100% width and height. Make sure you set 100% width and height for the body in the CSS and set margins and padding to zero. Another issue you will find with this method is that when selecting text, the selection area can sometimes encompass the background image, which has the unfortunate effect of making the full page have the selected state. You can get round this by using the user-select:none CSS rule, like so:
<html>
<head>
<style type="text/css">
html,body {
height: 100%;
width: 100%
margin: none;
padding: none;
}
#background {
width: 100%;
height: 100%;
position: fixed;
left: 0px;
top: 0px;
z-index: -99999;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
#background img {
width: 100%;
height: 100%;
}
#main{ z-index:10;}
</style>
</head>
<body>
<div id="main">
content here
</div>
<div id="background"><img src="bg.jpg"></div>
</body>
</html>
Again, Internet Explorer is the bad guy here, because it doesn't recognise the user-select option - not even Internet Explorer 10 preview supports it, so you have the option of either using JavaScript to prevent background image selection (for example, http://www.felgall.com/jstip35.htm ) or using CSS 3 background-stretch method.
Also, for SEO I would put the background image at the bottom of the page, but if the background image takes too long to load (that is, with a white background initially), you could move to the top of the page.
I used a combination of the background-X CSS properties to achieve the ideal scaling background image.
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
This makes the background always cover the entire browser window and remains centered when scaling.
Use the Backstretch plugin. One could even have several images slide. It also works within containers. This way for example one could have only a portion of the background been covered with an background image.
Since even I could get it to work proves it to be an easy to use plugin :).
The following worked for me.
.back-ground {
background-image: url("../assets/background.png");
background-size: 100vw 100vh;
}
that worked to cover the entire background on different dimensions
If you want to have the content centered horizontally, use a combination like this:
background-repeat: no-repeat;
background-size: cover;
background-position: center;
This will look beautiful.
Use this CSS:
background-size: 100% 100%
You can use the border-image : yourimage property to scale the image up to the border. Even if you give the background-image, the border image will be drawn over it.
The border-image property is very useful if your style sheet is implemented somewhere which doesn't support CSS 3. If you are using Google Chrome or Firefox, then I recommend the background-size:cover property itself.
Do you want to achieve this just using one image? Because you can actually make somewhat similar to a stretching background using two images. PNG images for instance.
I've done this before, and it's not that hard. Besides, I think stretching would just harm the quality of the background. And if you add a huge image it would slow down slow computers and browsers.