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;
}
Related
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.
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;
Has anyone found a solution for making a background image cover the entire div section on iOS? Code words perfectly on android. I am looking for a CSS solution
background: url('../img/slide/contact_background.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
-ms-background-size:cover;
background-size: cover;
Try removing "fixed" since it's probably causing the problem with iOS:
background: url('../img/slide/contact_background.jpg') no-repeat center center;
This should work on both Android and iOS browsers.
There is some more info here (and brief testing shows that it's not better in the iOS8): How to replicate background-attachment fixed on iOS
I have a problem with a background image I have when trying to stretch across the entire window. external CSS below:
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("mybackground.jpg"); -webkit-background-size: cover; background-repeat: no-repeat; background-size: 70%;}
#font-face /* support for browsers & IE v10 onwards*/
{
font-family:homefont; src: url("font3.ttf");
}
#main
{
position:absolute;
left:450px;
top:30px;
font-family: homefont;
font-size:150px;
line-height:70%;
}
This is what I have (see white space to the right of the image on the browser window):
Can anyone advise me on how to stretch the image across the entire window?
I have tried the suggestions as advised in the comments, however - the image appears to be cut from my knees downward :(. Are there any other suggestions?
Here is an axcellecnt article about your problem on css-tricks
Awesome, Easy, Progressive CSS3 Way:
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 try this
background-size: 100%;
or
background-size:cover
Here you go:
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+ (Opera 9.5 supported background-size but not the keywords)
Firefox 3.6+ (Firefox 4 supports non-vendor prefixed version)
top center;background-size-110%;background-repeat- no-repeat
Please increase the size as you like.
Scale the background image to be as large as possible
You need to use the background-size property with the value cover like below
body {
background-image: url("mybackground.jpg");
background-repeat: no-repeat;
background-size: cover;
}
Source
In Chrome if you scroll down so the header is half way crossing your browser and you you click the Watch Video button which opens up the modal which is normal but upon closing it if you scroll up I get this strange interference with the background image and also the button, like the background image is cut off and the button adds crazy background with a border on it?
Has anyone experienced this before and know of a fix, only in chrome
Website: http://goo.gl/s3kLML
Screenshot example:
http://imgur.com/OUZ6d3s
Thanks
Sounds like a background-attachment: fixed + background-size: cover bug, just remove "fixed" in your background property, it will works.
.jumbotron {
background: url(../images/bg_blur2.jpg) #e8df06 center no-repeat;
-webkit-background-size: cover;
-o-background-size: cover;
-moz-background-size: cover;
background-size: cover;
padding: 0;
}
Or if you want your background to be fixed in all other browser and just fix this bug in Chrome, you can try :
#media screen and (-webkit-min-device-pixel-ratio:0) {
.jumbotron {
background: url(../images/bg_blur2.jpg) #e8df06 center no-repeat;
-webkit-background-size: cover;
-o-background-size: cover;
-moz-background-size: cover;
background-size: cover;
padding: 0;
}
}