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;
}
Related
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 for a website and I wish to resize it so it covers ANY given screen.
Note:
I don't want the scrollbars to appear.
I am trying to resemble something like the following website
http://frontrow-demo.squarespace.com/
The only solution I can think of was re-sizing the height and width but that makes the scroll bars appear. I am guessing its a CSS solution I am struggling to create.
Edit:
This is the code I tried, but its "Zooming" the pic to make it stretch across the screen. I would like it to resize it so the quality and the actual pic would show up.
#bg {
position: fixed;
top: 0;
left: 0;
min-width: 100%;
min-height: 100%;
}
Just use some simple css
#theimg {
position : fixed; /*can also use absolute and the parent element can have relative*/
top : 0;
left : 0;
width : 100%;
height : 100%;
}
here is a demo fiddle
http://jsfiddle.net/rg3eK/
You want to use the CSS background property: http://css-tricks.com/perfect-full-page-background-image/
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;
}
Works in:
Safari 3+
Chrome Whatever+
IE 9+
Opera 10+ (Opera 9.5 supported background-size but not the keywords)
Firefox 3.6+ (Firefox 4 supports non-vendor prefixed version)
Anchor it to the sides and set the size to auto.
img#fullscreen {
height:auto;
width:100%;
left:0;
right:0;
top:0;
position:absolute;
}
Working fiddle.
This won't resize to the bottom (the one on the linked page also doesn't) but also doesn't mess the aspect of the image.
You may want to check photo-resize option.
Or you may try adding this:-
<img src="picture.jpg" width="100%" alt="">
ie, if you set only one dimension of an image, the other will end up being proportional to it.
or this:-
#image{
min-width:100%;
min-height:100%;
height:auto;
width:auto;
left:0;
right:0;
bottom:0;
top:0;}
Use background-size: cover in CSS on the HTML element
html {
background: url(http://i.imgur.com/tENv1w4.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
See this fiddle:
jsFiddle
For a better css.you must use 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;
}
I'm trying to keep my site's content perfectly aligned with the center of its background image, is there a way to do this?
Currently my background is
body {
background: url(http://nickhumphries.com/images/tucson-bgl3b2.jpg) no-repeat center center fixed;
background-color: #fafafa;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
text-align:center;
}
#mainContainer {
margin:0 auto;
}
you don't need text align center in your body since you are using divs over it. and you should probably use #maincontainer as a class .maincontainer so you can reuse it seperately.
And why are you using 100% size and cover at the same time? you can either resize it to cover or keep it at 100% right?
Play with these ideas.
usually if i want to center something, i give it a fixed width and set margins left and right to auto
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
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.