I am stuck at something.
I need to create a single page website with full width background image, but the image gets cut at each sides when open in the website.
The website is live at here
Currently I am using backstretch. But I have tried with with 100% and custom CSS then effect is either same or worse. Even used cover as background-size.
Is there any way to fix this so that the image should open correctly at mobile?
Use the CSS background-image property instead of an actual img
body{
background:url(bg.jpg) no-repeat;
background-size:cover !important;
}
You'll also find it a lot easier to manipulate your other page elements with a background instead of img
HTML element ( root ) must have atleast min-height:100%
so Markup
<html style="min-height:100%; padding:0; margin:0;">
<body style="margin:0; padding:0; height:100%;"> </body>
</html>
oh and yea, once tested, extract those inline styles to a stylesheet
Hope that helps.
Edit
heres the best you can do
css:
body {
/*background-attachment: scroll;*/
/*background-clip: border-box;*/
background-color: rgba(0, 0, 0, 0);
background-image: url("bg.jpg");
/*background-origin: padding-box;*/
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
font-family: 'PetitaBold';
}
I am doing it with the help of js.
function updateSize() {
var width = $(window).width();
var height = $(window).height();
$('.image-con').css('width', width);
$('.image-con').css('height', height);
};
$(document).ready(updateSize);
$(window).resize(updateSize);
And CSS
.image-con {
background-image: url(bg.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
}
Related
I have an image which i need to stretch whole body so i don't know what is best way to do this
html{
/*background image properties*/
}
or
body{
/*background image properties*/
}
body{
background-image:url('../images/background.jpg');
background-attachment:fixed;
background-repeat: no-repeat;
background-size: cover;
}
This would be the best way, you could apply it to the HTML, it really depends on what you prefer...
background-image:url('../images/background.jpg');
Assuming your css file is in a different map, you do ../ to go to the map in which your css folder is placed, then you go into the images file and select the image.
background-attachment:fixed;
When setting a background-image I personally like to use this, it makes it so that when a user scrolls, the background-image maintains it's current position.
background-repeat: no-repeat;
When using this setting, it makes it so that the image won't repeat, in case it is too small or just won't cover the whole background.
background-size: cover;
When you apply this you will set the background-size to cover, combined with no-repeat and attachment: fixed it makes for a good way to style your background image
As per the CSS 2.1 Specs here: http://www.w3.org/TR/CSS2/colors.html#background
For HTML documents, however, we recommend that authors specify the
background for the BODY element rather than the HTML element. For
documents whose root element is an HTML "HTML" element or an XHTML
"html" element that has computed values of 'transparent' for
'background-color' and 'none' for 'background-image', user agents must
instead use the computed value of the background properties from that
element's first HTML "BODY" element or XHTML "body" element child when
painting backgrounds for the canvas, and must not paint a background
for that child element....
Hence, it is recommended to use a background on body (rather than on html).
If you want a background-image to stretch the whole container (i.e. body), then you could use the style:
background-size: 100% 100%;
If you want to preserve the aspect ratio, then you could use cover to make it cover the full container, or use contain to keep it within the container boundary. When you use contain, then depending on the aspect ratio of the background image, you could end up with white-space below or after the image ends (letterbox).
background-image: url('...');
background-size: cover;
background-repeat: no-repeat;
...
.
body{
/*background image properties*/
}
this would be the best way, since body is the immediate parent of all elements which are visible on the webpage.
http://jsfiddle.net/hxyz2evq/
You can use background-size:contain; to cover all the area with background image
body{
width:500px;
height:500px;
background:url(http://upload.wikimedia.org/wikipedia/commons/1/1a/Bachalpseeflowers.jpg);
background-cover;
background-repeat:no-repeat;
}
Note: Also there is a case I think of:
<html>
<head>
some free data
</head>
<body>
</body>
</html>
here the some free data will get displayed inside the webpage, i.e inside body, so we wouldnt care about giving the background property to html tag,
just using body{//background properties } is fine
Edit:
Though this is not the question for what property should be used here. There can be various things like:
background-size:cover;
OR
background-contain;
OR
background-100% 100%;
The best property which suits your question would be background-100% 100%;
body{
background-image:url('../images/background.jpg');
background-attachment:fixed;
background-repeat: no-repeat;
background-size: cover;
}
Semantically, I would use in body.
body{
background-image: url(path.jpg);/*wearing a cloth in body instead of heart*/
}
Seems to be applied in whole body semantically.
You should target the body tag and apply the background-size property to it.
Like so
body{
background-size: 100%;
}
You can use
body{
background: url("http://upload.wikimedia.org/wikipedia/commons/1/1a/Bachalpseeflowers.jpg") no-repeat scroll 0 0 #fff;
}
Try this code :
<!DOCTYPE HTML>
<html>
<head>
<title>Background to fit screen</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Imagetoolbar" content="no">
<style type="text/css">
/* pushes the page to the full capacity of the viewing area */
html {height:100%;}
body {height:100%; margin:0; padding:0;}
/* prepares the background image to full capacity of the viewing area */
#bg {position:fixed; top:0; left:0; width:100%; height:100%;}
/* places the content ontop of the background image */
#content {position:relative; z-index:1;}
</style>
</head>
<body>
<div id="bg"><img src="yourimage.jpg" width="100%" height="100%" alt=""></div>
<div id="content"><p>Enter a ton of text or whatever here.</p></div>
</body>
</html>
Example : Check this
The CSS3 background-size:cover property handles full screen background images, including responsivity, quite well. The below works well for me on all desktop and mobile devices I've tested.
body {
background-image: url(/assets/img/yourimage.jpg);
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height:100%;
width:100%;
}
background:no-repeat url(' ') #154454 bottom center ;
background-size:contain;
body {
background-image: url(/_assets/img/zoom-17536689-3.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.bk
{
background: url('../assets/imgs/img.jpg') no-repeat center center fixed;
}
put it between the body tags, sample code below
Set two background images for the element:
body {
background-image: url("img_tree.gif"), url("paper.gif");
background-color: #cccccc;
}
The full manual can be read here CSS background-image Property
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 would like to know how I can scale a picture or a background based on the width of the browser. Basically, I want to make it as responsive as possible and making sure that it adapts well to all browsers including Safari.
Here's an example of what I'm talking about.
Link: http://responsive.gs/. Resize the width of the browser to see the background scale.
I want to make my picture/background scale exactly as shown in that link above.
Would appreciate some help on this.
Thank you.
Use background-size:cover, as they did:
body {
background: url("http://responsive.gs/images/bg-phoenix.jpg") no-repeat;
background-position: center top;
background-size: cover;
}
EXAMPLE HERE
I'd also suggest taking a look at this recent SO answer of mine, which demonstrates how to get the height of the rendered background image, and scale the background accordingly:
Getting the height of a background image resized using "background-size: contain"
JS:
var img = new Image();
img.src = $('body').css('background-image').replace(/url\(|\)$/ig, "");
$(window).on("resize", function () {
$('body').height($('body').width() * img.height / img.width);
}).resize();
We can try background-size: 100% 100%; to fix it.
body {
background: url("http://responsive.gs/images/bg-phoenix.jpg") no-repeat;
background-position: center top;
background-size: 100% 100%;
}
Using the code from the example you can use it in a page like so:
<head>
<style>
body
{
background: url("http://www.responsive.gs/images/bg-phoenix.jpg") no-repeat;
background-position: center top;
-webkit-background-size: cover;
background-size: cover;
background-attachment: fixed;
}
</style>
</head>
<body>
</body>
I am trying to create an full width image above my nav bar, but I cant even get the image to show on screen. Here is my simple HTML:
<html>
<body>
<div class="wrapper" />
</body>
</html>
And the css:
.wrapper {
background-image: url(../assets/bridge.jpg);
background-repeat: no-repeat;
background-size: 100%;
width: 100%;
height: 100%;
}
I see the jpg made it to my browser and can click on it in my resources, so there is no problem with the path. The screen is still blank and showing nothing. Any help would be awesome.
This is because height:100% is functionally useless, and your div resultingly has no height.
If you give the div a fixed height, the image should appear as expected.
Alternatively if you want the background image to apply to the background of the page, you can apply it to the <html> element and avoid the whole wrapper, 100% debacle.
html {
background-image: url(../assets/bridge.jpg);
background-repeat: no-repeat;
background-size: 100%;
}
http://jsfiddle.net/dolours/JcxLm/2/ Give a specific height, Height 100% is meaningless
.wrapper {
background-image: url(../assets/bridge.jpg);
background-repeat: no-repeat;
background-size: 100%;
width: 100%;
height: 50px;
}
try this <div class="wrapper"></div>
It is possible that the image isn't showing because there is no content within the div and therefore it's size is 0. Try setting the width and height to a set size, something like 200px to test out this theory. Also I would change your code to:
<div class="wrapper"> </div>
you can use css for body tag, the css of body will be like this:
body{
background: url(../assets/bridge.jpg) center top no-repeat;
}
i think it will work for you, if you want just background image.
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.