I can't manage to load a background image. Here is what I've done:
First try:
html {
background: url(../images/bg1.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Issue: Chrome finds the image (=Path is valid) but displays the "broken" icon in the dev tools
Second try:
html {
background: url(../images/bg2.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Issue: Path is valid, chrome dev tools shows the image (= no "broken" icon) but the image is not visible on the actual website. Just a blank background.
Third try:
html {
background-image: url(../images/bg2.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Issue: I changed background: to background-image. The image doesn't even load now (= does not show up in chrome dev tools).
Note: bg1 and bg2 seem to be valid, I can view them in the standard windows photo viewer app.
I am quite confused, there is no other css file that overwrites the rules, it's just a page with some text on it. Where is the problem?
That's because you say html{...} but you want that the Body display the wallpaper.
Try that here:
body{
background: url(../images/bg2.jpg) no-repeat center center fixed;
-moz-background-size: cover;
background-size: cover;
}
Now your website should display the image over the all size
A bit of Quick research here.
There is no shorthand for background-image there is for background. but the first element needs to be the background-color.
the second is the url
the thrid background-repeat
the fourth is the attachment
for your case this will be
background: #FFF url('../images/bg1.jpg') no-repeat center fixed;
This is my CSS code
.body_background {
background-image: url(body_background.gif);
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
}
This is my HTML code and it works fine.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="PreventQuestionLeak.css">
</head>
<body class="body_background">
</body>
</html>
I had some CSS that worked fine on a Mac in Safari.
But was broken in Chrome and Firefox Developer edition.
Safari Version
Correct Rendering:
Firefox Edition
Broken Rendering
Chrome Version
Chrome Rendering
For me I found the issue was CSS interpreter was broken if the url was placed in the background property.
I took the url out of background and used background-image: url() instead and it worked across all 3 browsers afterwards.
This MDN link provided the inspiration.
Before (broken)
card-1 {
background: linear-gradient(rgba(0,0,0, .6),rgba(0,0,0, .5)), url(images/pricing-card-bg.jpeg) center no-repeat /cover;
box-shadow: 7px 18px 50px #555;
}
After (fixed)
card-1 {
background-image:linear-gradient(rgba(0,0,0, .6),rgba(0,0,0, .5)), url(images/pricing-card-bg.jpeg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
box-shadow: 7px 18px 50px #555;
}
Footnote:
I later found this on W3Schools:
background: bg-color bg-image position/bg-size bg-repeat bg-origin
bg-clip bg-attachment initial|inherit;
So for me the correct shorthand should have been:
background: linear-gradient(rgba(0,0,0, .6),rgba(0,0,0, .5)), url(images/pricing-card-bg.jpeg) center /cover no-repeat;
The no-repeat and /cover were the wrong way around. It's just Safari is more forgiving.
The background image gets under the"bookmark bar" of the chrome browser, due to which the top portion of the image is not seen. Is there a way, we can ensure the image fits exactly to the screen of the browser display ?
My CSS code:
body {
background: url("http://localhost/img/BackgroundImage.png") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Thank you for the suggestion squeamish ossifrage and Vibhor Dube.
I increased the background image size to 1600 X 703. It fits in perfect..
I have a question about fixed background issues on Mac.
Background is appearing choppy on Safari Mac, client reported this, I am on Windows 7, and it looks good in every browser.
Does anyone have a solution for this?
Here is my website
http://www.barrusinjurylawyers.com/
and the background code :
body {
margin:0 auto;
background: url('http://www.barrusinjurylawyers.com/wp-content/uploads/2015/04/SA-Color-Mesh-1680x1050-72dpi1.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I've noticed a bug on a site I am building. When you zoom in on a mobile phone, then rotate the screen orientation and then zoom out the background shrinks and only returns to the original size when the screen is rotated again. Any idea where I am going wrong?
Here is the CSS I am using:
html {
background: url(images/scroll.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height: 100%;
}
Cheers
Simply removing fixed prior to using cover resolved this problem.
background: url(images/scroll.jpg) no-repeat center center;
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.