I am a student and I'm having an issue with one of the video tutorials regarding using a background image. I followed the code exactly as is in the video but it's not producing the same results. It just keeps showing the image tiled throughout the whole web-page. Any help would be appreciated.
<style type="text/css">
body {
background-image:url(goku.jpg);
background-repeat:no-repeat;
background-attachment: 50% 60px;
}
</style>
Your background-attachment value is invalid, and you should add a background-sizesetting. In the snippet below I used cover to cover the whole screen, but you can also use other sizes. But then you should also add background-position
EDIT after comment: Well then just change to background-position: 50% 50%;. The image - if you don't use background-size will be displayed at its original size, and with that setting, be centered horizontally and vertically. If you don't like the vertical centering, change the second value to whatever you like, also in pixels, if you want.
html,
body {
margin: 0;
height: 100%;
}
body {
background-image: url(https://placehold.it./240x180/fb4);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 50% 50%;
}
<div>Test</div>
I have a section container that holds a div (.tablet). Both section and Div are responsive
When the view port reaches > 400px, I want to display a background image in my div (.tablet)
HOWEVER, unless I specify a px width and height, the div collapses and disappears. It ignores the background image. It's Almost as if the background image does not exist and the div has no content!
Is it possible to create a resposnive DIV with a flexible background image that does not collapse? I want the background image to fill the DIV and respond with the div size?
i've tried using the following rules with the .tabletonly div
background-size: cover;
background-position: center;
background-attachment: fixed; /* Fixbackground * */
//--------------------------------------------------------------------
HTML
<!DOCTYPE html PUBLIC>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="styles/style1.css"/>
</head>
<body>
<div id="wrapper">
<div id="section">
<div id="tabletonly" class="span_1_of_2">
<div><div>
</div>
</div> // end wrapper
</body>
</html>
CSS code ----------------------------------------
.span_1_of_2 {
width: 45%;
position: relative;
}
img {
max-width: 100%;
}
#media screen and (min-width: 400px) {
#tabletonly div{
background: url("images/shop.jpg" );
background-repeat: no-repeat;
}
}
If you know the aspect ratio of the background image, there's a trick you can use to keep the box from collapsing - use border-box box-sizing, set the height to 0, and give the div a padding-bottom that reflects that ratio.
.image-box {
background: url('http://placehold.it/600x300/eee/ccc');
background-size: cover;
height: 0;
padding-bottom: 50%; /* match this to the aspect ratio of your picture */
}
fiddle
That being said, the other commenter had a point; depending on your use context, maybe this should be an inline image rather than a background one?
Try something like that. If I do understand your question, it will Center the background image and it will keep the ration as well.
background-size:contain;
background-position: center center;
background-repeat:no-repeat;
background-image: url(../images/YourBackgroundImage.png);
Using contain will skink or enlage your image, but will be fully visible. Make sure your background image is good enough for big screen,
The position will center from Top and from Bottom.
Make sure the image does not repeat as that make look bad.
And of course the Image you want to put as background.
I think your tabletonly div has height of 0 because it has no displayable content in it.
Perhaps you may specify min-height (i.e. may use vh, % or px) or populate div with content.
It is difficult to tell as I do not know what you need the div for.
I would like to use an image as background. Unfortunately, when I set the Background-image property to url(myUrl), I get the image which repeats itself in the background in several row and column. I guess it's because the image its naturally small.
So, how to get the image to expends enough so that it does not repeat itself, but rather occupies all the back ground?
Thanks for helping.
you can use two methods;
javascript or css
Jquery has a solution called suppersized;
http://buildinternet.com/2009/02/supersized-full-screen-backgroundslideshow-jquery-plugin/
or with CSS:
html, body {margin:0; padding:0; width:100%; height:100%; overflow:hidden;}
body {font-family:verdana, arial, sans-serif; font-size:76%;}
#background{position:absolute; z-index:1; width:100%; height:100%;}
AND HTML
<body>
<div>
<img id="background" src="image.jpg" alt="" title="" />
</div>
You probably want this:
http://css-tricks.com/how-to-resizeable-background-image/
Looks like the simplest way.
P.S.: You can't do it with pure background-image. You have to do it with different layer.
To prevent an image from repeating itself, and adjust the image size to fit the screen size, the following two CSS instructions will help out:
background-repeat: no-repeat;
background-size: cover;
You can have the property background-size in CSS3 for stretching a background image. But CSS3 isn't widely supported.
If you don't want to repeat the background image then you can use background-repeat: no-repeat.
This is the solution from W3Scools using CSS:
body,
html {
height: 100%;
width: 100%;
margin: 0;
}
.bg {
/* The image used */
background-image: url("https://marketplace.canva.com/BAAuU/MAD4tNBAAuU/1/s2/canva-egg-and-ceramic-rabbit-MAD4tNBAAuU.jpg");
/* Full height */
height: 100%;
width: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="bg"></div>
<p>This example creates a full page background image. Try to resize the browser window to see how it always will cover the full screen (when scrolled to top), and that it scales nicely on all screen sizes.</p>
</body>
</html>
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.
Is it possible to to have:
A patterned body background image for the main page,
Followed by another background image on top of the first one (this time a picture on the
right hand side, on edge of the page)
The content (using semi-trrasparent gif is overlayed across the body background images)
should be scrollable whilst both background images remained fixed.
Ideally css solution without script or hack
Please help as I am loosing my hair and sanity trying to figure how to get this to work.
Many thanks
Del
CSS example for two non-scrolling background images
Some browsers (Safari) allow (CSS3) multiple background images, but since these aren't yet universal, here's my solution.
For a start, you don't need a fixed position div. You can prevent the background image from scrolling by using:
background-attachment: fixed;
Use background-position to put the background top, bottom, center, right, left e.g.
background-position: top right;
And set background-repeat to the setting you want.
The CSS
The CSS below will give you two background images that don't scroll in the page background - set the width of #mydiv to whatever you want (or leave it unset for 100%) and its height to 2000px (just to test the scrolling), and use your image URLs instead of the example:
body {
background-image: url(body_background.gif);
background-attachment: fixed;
}
#mydiv {
position: absolute;
right: 0px; /* or whatever */
background-image: url(div_background.gif);
background-attachment: fixed;
}
The HTML
If you need a complete example, change the background image URLs and use this (obvious) HTML/CSS example as a starting point:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>untitled</title>
<style type="text/css">
body {
background-image: url(body_background.gif);
background-attachment: fixed;
}
#mydiv {
position: absolute;
top: 0px; /* 0 is default for top so remove or make > 0 */
right: 0px; /* or left, whatever you need */
width: 250px; /* or whatever you want */
height: 1500px; /* remove after testing! */
background-image: url(div_background.gif);
background-attachment: fixed;
}
</style>
</head>
<body>
<div id="mydiv">
the div
</div>
</body>
</html>
This probably isn't the most "correct" solution, but you can use a separate background-image for the HTML and body tags. IE
html {
background-image: url('images/bg_repeat.gif');
background-position: top center;
}
body {
background-image: url('images/splatter_top.png');
background-position: top center;
background-repeat: no-repeat;
margin: 0;
padding: 0;
text-align: center;
}
You may do this using a mixture of background images and absolutely positioned divs/images:
the body gets the patterned background
the picture on the side is an image (or a dive with the image as background) that uses fixed positioning (i.e. uses the position:fixed css rule)
the content would be inside a div with the semi transparent gif as background.
I think that it would abtain what you need, everythign is doable in CSS except perhaps the fixed positioning for some versions of IE (namely IE6 and below) as position:fixed is available in IE from version 7 onwards only in "standards-compliant mode" (but this article may help: position:fixed for Internet Explorer)