I have a large image I would like as my background, but for some reason it repeats a little bit on my large screen. Is there a way I can just have the image size up or down according to screen size?
EDIT: So I have changed my HTML to look like this:
<body id="wrapper">
<div id="body">
<img src="/images/sky2.jpg" class="stretch" alt="" />
</div>
and my CSS to this:
#body {
width: 100%;
height: 100%;
position: absolute;
left: 0px;
top: 0px;
z-index: 0;
}
.stretch {
width:100%;
height:100%;
}
And the background won't show on preview. I have 3 other div elements that show but only to a white background =/.
move background-repeat: no-repeat; to the #body instead of #body img
You aren't actually showing any of your html here, just some embedded CSS and some (I assume linked?) CSS. You are loading the image as a background-image on the body element in that first bit of css, which is great. Because it's loaded as a background-image in CSS, and not and tag in HTML, your second bit of CSS (with the #body img selector) is not affecting it in any way.
What you actually have, in effect, is this:
#body {
position:fixed;
top:-50%;
left:-50%;
width:200%;
height:200%;
position:relative;
background-image: url(images/sky2.JPG);
}
Which is a very odd bit of code. But the only relevant part to your question is the background-image part. The answer has several parts. In CSS2: no, you cannot adjust the size of a background image. You can set it not to repeat (as others have shown) and you can set it's position:
body {
background-position: center left;
}
In CSS3 you can change the size, and you have several options (you are looking for cover, I think) but it only works for the latest browsers. The property is called background-size, but because it is still experimental, you have to declare it individually for each browser:
/* this is the default */
body {
-moz-background-size: auto;
-webkit-background-size: auto;
-o-background-size: auto;
background-size: auto;
}
/* this will size the image proportionally so that it is contained, but not cropped */
body {
-moz-background-size: contain;
-webkit-background-size: contain;
-o-background-size: contain;
background-size: contain;
}
/* this will size the image proportionally so that it fills all the area */
body {
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/* this will size the image as a percentage of the area */
.example #percent {
-moz-background-size: 50% 50%;
-webkit-background-size: 50% 50%;
-o-background-size: 50% 50%;
background-size: 50% 50%;
}
/* this will size the image to exact specifications */
.example #absolute {
-moz-background-size: 100px 25px;
-webkit-background-size: 100px 25px;
-o-background-size: 100px 25px;
background-size: 100px 25px;
}
#img.source-image {
width: 100%;
position: absolute;
top: 0;
left: 0;
}
Demo page:
http://css-tricks.com/examples/ImageToBackgroundImage/
Source:
http://css-tricks.com/how-to-resizeable-background-image/
I think it's worth to read that page :)
1) The CSS property background-repeat: no-repeat; should be on the body element itself, i.e. on the element you're specifying the background of.
2) In the CSS, you write #body... I guess you want to talk about the body element? Then you should just write body in the CSS. #body would be for an element declared as, say, <div id="body">.
3) Also, I'm unsure about #body img. #body img means “an img element inside the body”. Do you really have an img element inside the body? I mean, is your markup like this?
<body>
...
<img ... >
...
</body>
And do you really want to style that img element?
Anyway, the style that applies to the img element has nothing to do with the body's background.
<style type="text/css">
body {
background-image: url(images/sky2.JPG);
background-repeat: no-repeat;
}
</style>
You need to set it for the same element or class or whatever.
Also you could move the body css into your css.
Ok, I'm sorry there are some other things wrong, like #body {. I don't think you have an element with an id "body".
Not trying to RTFM, but maybe read some tutorials on CSS?
To scale the image, maybe have a look at: Stretch and scale a CSS image in the background - with CSS only
Related
I have this short example:
CODE CSS:
body{
background:url(DECUPATE/TEST/images/ppp.jpg);
bacground-size:contain;
backgoun-repeat:none;
}
I put a picture to understand what they want to do.
http://i61.tinypic.com/10xeeeb.jpg
if you put background size: cover appears to the end but there is the incomplet image.
How can I solve this problem?
Thanks in advance!
You have to use html instead of body ,see the code below :
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: 100% 100% cover;
-moz-background-size: 100% 100% cover;
-o-background-size: 100% 100% cover;
background-size: 100% 100% cover;
/* set the padding and margin to "0" */
margin: 0;
padding: 0;
/* set the position rules */
top: 0;
left: 0;
}
You can use jquery plugin backstretch for this
this will allow background to stretch through out the screen. it also works well with smaller screens.
http://srobbin.com/jquery-plugins/backstretch/
download backstrech js from the url given above and add it in your header tag .
initiate backstretch with following code in script tag
$.backstretch("http://dl.dropbox.com/u/515046/www/garfield-interior.jpg");
Take a look at this example, for the most broad support :
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;
https://css-tricks.com/perfect-full-page-background-image/
Don't think of it as one background. Give your header and footer the background-img and set the header position to background-position:center top and your 'footer' position of background-position:center bottom additionally add the background-size property to 100% or cover. Since both elements have the same width the size property will have the same effect on both.
Add the CSS code background-attachment:fixed;
This will make the background stay the same if you scroll down.
<body> <img src="images/ppp.jpg"> </body>
body{
margin: 0;
padding: 0;
}
body > img{
width:100%;
height: 100%;
/*For IE*/
top: 0;
bottom: 0;
position: absolute;
}
I'm trying to make a "Did you know?" fixed div in the right corner. Unfortunately after 3 hours of testing many solutions still can't find correct one. As you can see on this fiddle:
http://jsfiddle.net/dq8f3d4p/ I can't make the background fit the div.
Both: background-size: cover; and background-size: 100%; seems not to work properly.
In your code, you are overwriting background-size with the shorthand background property :
.dyk{
position: fixed;
z-index:2;
width: 17.26%;
height: 11%;
left: 80%;
top: 80%;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;
background-repeat: no-repeat;
background-image: url(http://i.imgur.com/gxp9iDV.png);
}
Changing it to background-image property will cause the image to stretch to 100% size.
You are probably looking for background-size:contain;, Which is usually the best pick, however, in your case the image proportions and the div's proportions are not the the same so I would recommend using background-size: 100% 100%;.
background: url(http://i.imgur.com/gxp9iDV.png);
background-size: 100% 100%;
background-repeat: no-repeat;
Working jsFiddle
Notes:
background-size is supported by IE9+
Use contain if you don't want your image to get streched.
put the image inside you div and then fix the div to bottom right
<div class="dyk">
<img src="http://i.imgur.com/gxp9iDV.png"></img>
</div>
.dyk{
position: fixed;
z-index:2;
right: 0;
bottom: 0;
}
I tried to make responsive sprites (backgroud Image) using CSS3. Like I have done this but nothing is shown in the div, I think there should be some contents (but I don't want to put any content) so that div get some height, then the background image will be shown.
HTML:
<div class="cbs-news-logo"/>
CSS:
.cbs-news-logo {
background-position: 0 27.272727%;
background-size: 122.439024%;
max-width: 100%;
background-image: url('logos.png');
}
I tried many links, but cannot find a good one.
If i understood you..
.cbs-news-logo{ // Responsive background
background: url('logos.png') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#media screen and (max-width: NNN px) { // if you do not want to show any content until some properties ( note that now is max-with, but it can be other )
.cbs-news-logo{ (...)
}
.cbs-news-logo {
background-image:url('https://www.google.co.in/images/srpr/logo11w.png');
background-repeat:no-repeat;
background-size:contain;
background-position:center;
min-height:125px; // if u want change hear
max-width:800px; // if u want change hear
}
<div class="cbs-news-logo"/>
Here is the simplest solution:
HTML:
<div class="cbs-news-logo"/>
CSS:
.cbs-news-logo {
background-position: 0 27.272727%;
background-size: 122.439024%;
max-width: 100%;
background-image: url('logos.png');
padding-bottom: 16%; // This will give height to the div and make the div responsive so the (background) image behaves as responsive image.
}
If you want to see the demo.
I'm trying to make a GIF fit my whole screen, but so far its just a small square that is on my screen while the rest is white. However, I want it to take up all the space.
Any ideas?
if it's background, use background-size: cover;
body{
background-image: url('http://i.stack.imgur.com/kx8MT.gif');
background-size: cover;
height: 100vh;
padding:0;
margin:0;
}
IMG Method
If you want the image to be a stand alone element, use this CSS:
#selector {
width:100%;
height:100%;
}
With this HTML:
<img src='folder/image.gif' id='selector'/>
Fiddle
Please note that the img tag would have to be inside the body tag ONLY. If it were inside anything else, it may not fill the entire screen based on the other elements properties. This method will also not work if the page is taller than the image. It will leave white space. This is where the background method comes in
Background Image Method
If you want it to be the background image of you page, you can use this CSS:
body {
background-image:url('folder/image.gif');
background-size:100%;
background-repeat: repeat-y;
background-attachment: fixed;
height:100%;
width:100%;
}
Fiddle
Or the shorthand version:
body {
background:url('folder/image.gif') repeat-y 100% 100% fixed;
height:100%;
width:100%;
}
Fiddle
You can set up a background with your GIF file and set the body this way:
body{
background-image:url('http://www.example.com/yourfile.gif');
background-position: center;
background-size: cover;
}
Change background image URL with your GIF. With background-position: center you can put the image to the center and with background-size: cover you set the picture to fit all the screen. You can also set background-size: contain if you want to fit the picture at 100% of the screen but without leaving any part of the picture without showing.
Here's more info about the property:
http://www.w3schools.com/cssref/css3_pr_background-size.asp
Hope it helps :)
if you're happy using it as a background image and CSS3 then background-size: cover; would do the trick
This should do what you're looking for.
CSS:
html, body {
height: 100%;
margin: 0;
}
.gif-container {
background: url("image.gif") center;
background-size: cover;
height: 100%;
}
HTML:
<div class="gif-container"></div>
In your CSS Style tag put this:
body {
background: url('yourgif.gif') no-repeat center center fixed;
background-size: cover;
}
Also make sure that it's parent size is 100%
I'm trying to get a background image of a HTML element (body, div, etc.) to stretch its entire width and height.
Not having much luck. Is it even possible or do I have to do it some other way besides it being a background image?
My current css is:
body {
background-position: left top;
background-image: url(_images/home.jpg);
background-repeat: no-repeat;
}
Edit: I'm not keen on maintaining the CSS in Gabriel's suggestion so I'm changing the layout of the page instead. But that seems like the best answer so I'm marking it as such.
<style>
{ margin: 0; padding: 0; }
html {
background: url('images/yourimage.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
Use the background-size property: http://www.w3.org/TR/css3-background/#the-background-size
In short you can try this....
<div data-role="page" style="background:url('backgrnd.png'); background-repeat: no-repeat; background-size: 100% 100%;" >
Where I have used few css and js...
<link rel="stylesheet" href="css/jquery.mobile-1.0.1.min.css" />
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/jquery.mobile-1.0.1.min.js"></script>
And it is working fine for me.
Not sure that stretching a background image is possible. If you find that it's not possible, or not reliable in all of your target browsers, you could try using a stretched img tag with z-index set lower, and position set to absolute so that other content appears on top of it.
Let us know what you end up doing.
Edit: What I suggested is basically what's in gabriel's link. So try that :)
To expand on #PhiLho answer, you can center a very large image (or any size image) on a page with:
{
background-image: url(_images/home.jpg);
background-repeat:no-repeat;
background-position:center;
}
Or you could use a smaller image with a background color that matches the background of the image (if it is a solid color). This may or may not suit your purposes.
{
background-color: green;
background-image: url(_images/home.jpg);
background-repeat:no-repeat;
background-position:center;
}
If you need to stretch your background image while resizing the screen and you don't need compatibility with older browser versions this will do the work:
body {
background-image: url('../images/image.jpg');
background-repeat: no-repeat;
background-size: cover;
}
If you have a large landscape image, this example here resizes the background in portrait mode, so that it displays on top, leaving blank on the bottom:
html, body {
margin: 0;
padding: 0;
min-height: 100%;
}
body {
background-image: url('myimage.jpg');
background-position-x: center;
background-position-y: bottom;
background-repeat: no-repeat;
background-attachment: scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#media screen and (orientation:portrait) {
body {
background-position-y: top;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
}
}
The following code I use mostly for achieving the asked effect:
body {
background-image: url('../images/bg.jpg');
background-repeat: no-repeat;
background-size: 100%;
}
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 for me
.page-bg {
background: url("res://background");
background-position: center center;
background-repeat: no-repeat;
background-size: 100% 100%;
}
You cannot in pure CSS. Having an image covering the whole page behind all other components is probably your best bet (looks like that's the solution given above). Anyway, chances are it will look awful anyway. I would try either an image big enough to cover most screen resolutions (say up to 1600x1200, above it is scarcer), to limit the width of the page, or just to use an image that tile.
image{
background-size: cover;
background-repeat: no-repeat;
background-position: center;
padding: 0 3em 0 3em;
margin: -1.5em -0.5em -0.5em -1em;
width: absolute;
max-width: 100%;
Simply make a div to be the direct child of body (with the class name bg for example), encompassing all other elements in the body, and add this to the CSS file:
.bg {
background-image: url('_images/home.jpg');//Put your appropriate image URL here
background-size: 100% 100%; //You need to put 100% twice here to stretch width and height
}
Refer to this link: https://www.w3schools.com/css/css_rwd_images.asp
Scroll down to the part that says:
If the background-size property is set to "100% 100%", the background image will stretch to cover the entire content area
There it shows the 'img_flowers.jpg' stretching to the size of the screen or browser regardless of how you resize it.