I need to set this background image in my website for chrome and all other browser but in chrome it work perfect but in firefox and other browser doesn't work perfectly. Even for firefox I tried the -moz- tag but doesn't work.
{
position: relative;
background:url(backgrdnd2.jpg);
background-repeat:no-repeat;
-moz-background-size:100% 100%;
background-size:100% 100%;
}
try backgroud-size:cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size:cover;
background-size: cover;
for the rest of the browsers
hope it helps.
The background property is supported in all major browsers. See: http://www.w3schools.com/cssref/css3_pr_background.asp
I'm not sure what element you are applying these styles on, but perhaps that element has no height or width? Try inspecting the element in Chrome or using Firebug in Firefox to determine if your background image is loading, and whether or not the element you are applying the background to is visible.
First, in your css you should put the selector, where do you want to apply the style, for example the body
body {
position: relative;
background:url(http://2.bp.blogspot.com/-m7blv8kfKxs/UiAWmV9uJXI/AAAAAAAAJos/RsYP_YC9FbY/s1600/Background-Textures2.jpg);
background-repeat:no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size:cover;
background-size: cover;
}
check this link for more information about selectors.
http://www.w3schools.com/cssref/css_selectors.asp
I also used #EduadoRobles suggestion, check this
http://jsfiddle.net/agusgambina/A8nmp/
Related
I'm trying to get my background image to stretch across the entire page, but so far i have this:
This is the picture i want stretched across the browser window:
My external CSS contains the code below:
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("mybackground.jpg")}
Can anyone tell me how I can edit the CSS file to fix my problem?
You can use:
background-size: cover;
However please bear in mind which browsers this supports. For example, this won't work in IE8 and below.
Another option would also include:
body{
background-image:url("mybackground.jpg")
background-size:contain;
background-repeat:no-repeat;
}
Use background-size: cover. Note its browser support.
MDN documentation.
Background size will do the trick:
body {
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;
}
Check this out for more info:
http://css-tricks.com/perfect-full-page-background-image/
You need to make this an <img> tag, with a low z-index, with position: fixed and then for the <img> tag, use height: 100%; width: auto or the opposite.
This method is cross-compatible for all browsers.
Have you tried using
background-size: 10px 10px
Change 10 to the width and height of the body
You can also do
background-size: 100%
This is probable one of the most basic questions on this website, hence I expect some quick answers. When I try to set a background image for my website I edit the image in paint and I constantly have to edit the image pixel for pixel in order to make the image cover up every single area of the website. Is there any standards or html codings that can automatically set resize the image to the exact size of the website?
You need to do something like this:
/*************************************************************************************
by forcing `height: 100%` in the html and body tag will make sure there are no white areas in vicinity (this is optional though, use it only if you need it)
*************************************************************************************/
html,
body{
height: 100%;
}
/*************************************************************************************
by using `background-size: cover;`, you will make sure the image will cover everything
*************************************************************************************/
body{
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background-image: url("your_image.jpg");
}
Also, consider using -moz-, and -webit- prefixes to make sure it works in older browser versions of webkit and gecko based browsers.
In your CSS stylesheet you can use the following code
(where images/bg.jpg is the path for your 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, IE 9+, Opera 10+, Firefox 3.6+
Are you familiar with css? Add the background as image:
<img src="yoursource.png" class="yourclass" />
and use this css snippet:
.yourclass {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: -100; /* puts image into the background */
}
I'm assuming you're setting the background image on the body but if not you should be. use background-size: cover; which will stretch the image to fit
I'm just starting on a website and I already encounter a small problem where I can't find a specific solution to.
I wanted to make my website background fit any screen size in width, height does not matter.
This is the link to my image:
../IMAGES/background.jpg
EDIT
I have no idea what's wrong, but for some reason the body doesn't even want to get the background image. It just displays a plain white background.
body
{background-image:url(../IMAGES/background.jpg);}
you can do this with this plugin http://dev.andreaseberhard.de/jquery/superbgimage/
or
background-image:url(../IMAGES/background.jpg);
background-repeat:no-repeat;
background-size:cover;
with no need the prefixes of browsers. it's all ready suporterd in both of browers
Try this ,
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;
For more information , follow this Perfect Full Page Background Image !!
You can try with
.appBackground {
position: relative;
background-image: url(".../img/background.jpg");
background-repeat:no-repeat;
background-size:100% 100vh;
}
works for me :)
Try this, I hope it will help:
position: fixed;
top: 0;
width: 100%;
height: 100%;
background-size: cover;
background-image: url('background.jpg');
body{
background-image: url(".../img/background.jpg");
background-size: 100vw 100vh;
background-repeat: no-repeat;
}
Try this:
background: url(../IMAGES/background.jpg) no-repeat;
background-size: auto auto;
.. I found the above solutions didn't work for me (on current versions of firefox and safari at least).
In my case I'm actually trying to do it with an img tag, not background-image, though it should also work for background-image if you use z-height:
<img src='$url' style='position:absolute; top,left:0px; width,max-height:100%; border:0;' >
This scales the image to be 'fullscreen' (probably breaking the aspect ratio) which was what I wanted to do but had a hard-time finding.
It may also work for background-image though I gave up on trying that kind of solution after cover/contain didn't work for me.
I found contain behaviour didn't seem to match the documentation I could find anywhere - I understood the documentation to say contain should make the largest dimension get contained within the screen (maintained aspect). I found contain always made my image tiny (original image was large).
Contain was with some hacks closer to what I wanted than cover, which seems to be that the aspect is maintained but image is scaled to make the smallest-dimension match the screen - i.e. always make the image as big as it can until one of the dimensions would go offscreen...
I tried a bunch of different things, starting over included, but found height was essentially always ignored and would overflow. (I've been trying to scale a non-widescreen image to be fullscreen on both, broken-aspect is ok for me). Basically, the above is what worked for me, hope it helps someone.
This worked for me:
body {
background-image:url(../IMAGES/background.jpg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
Try this,
.appBg {
background-image: url(".../img/background.jpg");
background-repeat:no-repeat;
-webkit-background-size: 100% auto;
-moz-background-size: 100% auto;
-o-background-size: 100% auto;
background-size: 100% auto ;
}
This one works for me
Background image fix to screens with browser compatibility css
.full-screen {
height: 100%;
width: 100%;
background-image: url(../images/banner.jpg);
background-size: cover;
background-position: center;
//for browser compatibility
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
}
Although there are answers to this your questions but because I was once a victim of this problem and after few search online i was unable to solve it but my fellow hub mate helped me and i feel i should share.
Examples explained below.
Folders: web-projects/project1/imgs-journey.png
background-image:url(../imgs/journey.png);
background-repeat:no-repeat;
background-size:cover;
My major points is the dots there if you noticed my journey.png is located inside an imgs folder of another folder so you're to add the dot according to the numbers folders where your image is stored. In my case my journey.png image is saved in two folders that's why two dot is used, so i think this may be the problem of background images not showing sometimes in our codes. Thanks.
width: 100%;
background-image: url("images/bluedraw.jpg");
background-size: cover;
You can do it like what I did with my website:
background-repeat: no-repeat;
background-size: cover;
background: url("../image/b21.jpg") no-repeat center center fixed;
background-size: 100% 100%;
height: 100%;
position: absolute;
width: 100%;
I'm working on a basic html page and I have this background image bg.jpg.
But the problem is depending on the screen size you have and how many pixels the screen has I'm not able to view the whole background image which is something I want.
How do I make the background fixed so you can see the whole background?
If you mean a full page background image than you can simply do it with CSS3 background-size property
body {
background: url(bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
If you need to attach it, kinda fixed and shouldn't be scrolled, than use
background-attachment: fixed;
/* This is already used in above CSS declaration using CSS Short Hand*/
You can do something like 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;
}
You can read more here: link
Delete your "body background image code" then paste this code:
html
{
background: url(../img/bg.jpg) no-repeat center center fixed #000;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
You can use CSS pseudo selectors.
body:after
{
content: url(your_image)
/* Styling your image here just like a div */
}
Of course those other solutions are OK too, but they only work in latest modern browsers. This pseudo selection solution works in most browsers used today. If you'd like to support even older browsers, like ancient versions of IE, then you can use a div to contain the background image and style it as you'd like.
Is anyone else having this issue? I create websites for a living, and some employ the use of the css property background-size: cover. All of the sudden about 1 week ago, all of the sites with this property no longer display right in Google Chrome. (all other browsers are working fine.) Is anyone else experiencing this? Is it just MY google chrome or did something change? Because the backgrounds were displaying properly until about a week ago, and I did not change anything. They just stopped displaying properly, seemingly out of nowhere....
Best practice: always set background-image first and then background-size.
You only need to use !important :
background-size: cover !important;
I just ran into this problem in Chrome, too.
None of the above answers worked for me. Specifically, I was trying to set the <body> element background to background-size: cover. However, the background image would never extend vertically to fill the page.
After some trial and error, I found that setting the <html> element width and height to 100% fixed the problem in Chrome. (For what it's worth, changing the <body> element's width and height seemed to have no effect.)
In my css, I have the following rules to fix the issue:
html {
width: 100%;
height: 100%;
}
I was having the same problem all of a sudden w/ not only GC but also FF and Opera. i was using a php function to pull random images for my background and this is what i had....
CSS:
.main-slideshow .video img {
cursor:pointer;
width:550px !important;
height:340px !important;
background-repeat: no-repeat;
-moz-background-size:cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover; }
and HTML/PHP:
$result .='<img alt="" style="background:url('.$thumbnail.')" src="/images/play1.png" /> ';
it was working for some days and suddenly background-repeat and background-size stopped working. so this morning i found out that the following changes are working perfectly for GC (v21), FF (v14), Opera (v12) and Safari (v5.1.7)...still no luck w/ IE though :(
CSS:
.main-slideshow .video img {
cursor:pointer;
width:550px !important;
height:340px !important;
-moz-background-size:cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover; }
HTML/PHP:
$result .='<img alt="" style="background-image:url('.$thumbnail.')" style="background-repeat: no-repeat" style="background-size:cover" src="/images/play1.png" />';
may be it's a lousy solution but it's working for me (so far) hope this helps some one :)
The following is a solution to the problem, but it won't be for everybody. I estimate that this solution will help a minority of the people experiencing the author's problem.
The background-size option can stop working in chrome if your container is too small, vertically, compared to your background image.
I was in a situation where I had to position a small portion of a large background image across a div that was 7 pixels tall.
In the Chrome debugger, changing the div height to 9 pixels "snapped" the background-size into place.
My ultimate solution was to restructure my divs so that I would not run into this problem.
To see if this solution will help you, in the Chrome debugger, enlarge your div. If, at some point, the background-size snaps into place, then you know this is the issue.
Old question but has similiar issue and it turned out I needed to add and to the empty div's I was applying background-size: cover to.
You must do CSS hacks for google chrome.
Use body:nth-of-type(1) .elementOrClassName{property:value;}
only for google chrome.
for your case,
nth-of-type(1) .elementOrClassName{background-size:80px 60px;}
Try this
background-size:contain;
For me, following worked for Chrome, IE 8, IE 9:
.itemFullBg{
background:url('image/path/name.png') no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-size:100% 100%;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='image/path/name.png',sizingMethod='scale');
}
You can fix the problem by setting the height of the tag.
For example, if you have a page that has a background image, set the height of the html and body tags in the CSS, like so:
html { height:100%; min-height:100%; } body{ min-height:100%; }
hope this helps
Instead of using:
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
Use:
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;