I have viewed several answers on SO related to this question and have used that to write my css code as such (I was using short-hand before):
#intro {
background-image: url(http://www.trbimg.com/img-5a98709c/turbine/ct-met-illinois-legislature-marijuana-20180301);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
This works fine on my computer and in developer tools on Chrome when I resize the window or change the view to, say, iPhone X.
When I use my actual iPhone to go to the site, only a gray background displays, no image at all. I've tried in both Chrome and Safari.
Does anyone have some insight as to why that might be?
What I have tried:
Viewed similar questions on SO which helped me re-write my CSS without using the shorthand background
Stored the image on my server and shrunk it so it had a width of 1000px (half of its original width)
I plan on actually storing the image on my server in the future but I figured if anyone has the time to help me out a link to the large image online would be best.
Edit:
I have put together a CodePen for the #intro element.
Related
Good afternoon,
I'm new to webdesign.
I've added a background-image to my webpage.
I used the below CSS to achieve this:
body {
background-position: center center;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
max-width: 100%;
height: 100%;
background-image: url(link.jpg);
}
It is fine on desktop and tablet devices. However on mobile phones, not everything is showing.
I have a specific image for mobile devices, but I don't want to use it, because there is too much quality loss of pixels.
I want to use the same image, but it is not scaling down correctly.
I already tried adding a media query for mobile, with adding background-size: contain. Then the image is scaling down in the widht, but not the whole background is coverd. So that doesn't help either.
What can I do to fix this?
Thank you.
That's normal behaviour when using a landscape image on a portrait screen. The only thing you can do is, what you already tried. Add some media-queries for different screen resolutions, which adjust you image the way you thing it looks the best.
One idea for your case:
If you add a header and a footer to your website, it should be possible to show the background image exactly like you wish.
if you are ok with stretching image then you can use,
background-size: 100% 100%;
I came upon a problem while designing a jumbotron for a website.
It's outside the container. Created a background for it, set background-size to cover, worked great.
When I opened the front page on a wider screen, the jumbotron became larger and there were gaps since the background image was too wide.
I then tried background-size: 100% 100%, thinking the image would stretch. No changes. Thought I perhaps had a margin/padding issue. No changes again.
Is this a problem with the image or the jumbotron? I'm not sure how to solve this. No matter what image I pick, it behaves very differently on different devices.
Behaving differently on different devices is not a bug, it's a feature. Having said that, try this...
background-image: url(INSERT_URL_HERE);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-attachment: fixed;
If you want the image to stretch to fit the full element (even if it means losing proportion), you need to set background-attachment to fixed and the background-size to 100%. Like:
.jumbotron {
background-image: url(image.url);
background-size: 100% 100%;
background-attachment: fixed;
}
Working example:
https://jsfiddle.net/4w9u7m1a/2/
The background image shows perfectly on PC and simulator (tablet and phone), but it won't show on actual phone/tablet.
code
div#photo_break {
#include viewport-unit(height, 28vw);
background-image: url('<img>');
background-repeat: no-repeat;
background-size: 100% auto;
-webkit-background-size: 100% auto;
-moz-background-size: 100% auto;
-o-background-size: 100% auto;
background-position: center top;
background-attachment: fixed;
z-index: 99999;
}
website
As you can see in this picture, in Chromes simulatorthe picture is shown.
The size of the image is not really large, or is it?
Nice site. :D Let's try to solve your issue.
Make sure you do not have that CSS code inside any media query, since it might block that content.
You might also try to add a new media query with the same CSS you have just for mobile, like this #media (min-width: 481px) { }.
Clean your mobile browser's cache before loading the site again.
Your background image is 12,000 pixels wide. It takes a long time to load to, I would suggest making the background of a parent div black inside the header, then putting an image in of just the person as the background of the element within that container if that makes sense. Save your mobile users data!
mobileand tablet browsersdo not support background-attachment: fixed.
changing this, solved the problem
I've got the following code running on an element that spans 100% of the browser:
#section_white {
background-attachment:fixed;
background-image:url(image_url_here.jpg);
background-position:100% 100%;
background-repeat:no-repeat no-repeat;
background-size:cover;
}
What I need to do is to have the image span the entire width of the browser, while remaining fixed (thereby allowing the content to scroll on top of it).
It seems to work on all the browsers except Safari - any ideas what I'm missing?
I've tried setting the element height and min-height to 100%, with no joy.
A link to a demo page can be seen here: http://oscarsarc.tinygiantstudios.co.za/adopt/adopt-nationwide/
Turns out Safari for Windows is no longer supported (how did I miss this?!) and the one I'm using is far too old to be useful. Using OSX / Safari, things look peachy (according to Benjamin)
So this will help since background-size is partially supported in your version of safari you should use prefix just as below
html {
background: url(image_url_here.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Try this and let me know any issues.
SOURCE LINK
CHECK BROWSER SUPPORT
I'm trying to implement a background image that auto resizes depeding on the size of the screen using css3. I've encountered a problem with Chrome that makes scrolling the website vertically really laggy. This doesn't happen on opera, firefox, or IE. Am I missing a declaration in my css code or is Chrome the culprit?
body {
background: #000 url(../images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
padding: 0;
margin: 0 }
I might be a bit late, but I was having a similar problem myself, found the question answered here:
My fixed background made scrolling the site very slow, what can I do to improve it?
It seems the background-size property is what was causing the issue. Of course removing that raises other issues with certain browsers, but maybe using this Jquery plugin might solve that issue, haven't tested it myself though:
http://srobbin.com/jquery-plugins/backstretch/
Probably its all up to rendering in mac os. Mac os using opengl instead of Direct3d in windows. Try to disable\enable hardware acceleration in chrome and check how it works