I have a section on my website that uses a CSS background image. The website is here. You can see where I have the fixed background image in the "Contact" section. Here is the current CSS for the image:
#hs-contact-section {
color: #FFF;
background-image: url(../images/Chapel-interior.jpg);
background-size: cover;
background-attachment: fixed;
overflow: hidden;
}
Interestingly, if I use a browser inspection tool to simulate a mobile-sized window, the image is zoomed correctly.
But, if I access the webpage on an actual mobile device, it looks like this:
Is there something wrong with my CSS? I've tried searching online but haven't found any solutions that have worked.
It is more than likely because you are using a parallax effect which "does not always work on mobile devices."
refer to the note on w3schools
http://www.w3schools.com/howto/howto_css_parallax.asp
edit: if you want to swap our the image or disable the effect you can create a rule in your CSS
//768px is generally the max mobile pixel width
#media screen and (max-width: 768px) {
#yourId {
element: attribute;
}
}
Related
I have a slider in my bootstrap website, a link to the website is here
The slider image is working fine in desktop devices, but in mobile it's not fitting into screen, I did the following css:
#media only screen and (max-width: 600px)
.n2-ss-slider [data-mode=fill] .n2-ss-slide-background-image {
background-size: 400px !important;
}
This css was working fine yesterday, now it's not working, can anyone please tell me how to make the slider image fit into screen in mobile view, thanks in advance
Best I can tell, this is the CSS responsible for making the images cover (i.e. cover the whole panel, which makes the height of the image match the height of the panel, pushing the left and right edges off screen).
.n2-ss-slider .n2-ss-slide-background-image img {
object-fit: cover;
}
If you add this CSS, you should be able to override it:
.n2-ss-slider .n2-ss-slide-background-image img {
object-fit: fill;
}
I've been working on my portfolio site (check it out at www.imkev.in) and I'm having some trouble with the mobile version. I've got media queries in my CSS that should switch to a lower filesize and differently cropped image at any screen width below 530pxs. There are other elements of the page (My multi column layout switching to a single column layout) that should similarly switch to a different page layout at lower screen widths and they do, so I know my basic media query is working.
However, the background images elements do not. They stay on the larger file and don't scale the image down to fit the browser window. Again, I'm only have this problem on actual mobile devices.
When I reduce the browser window size on my desktop to below 530px it will switch over to the alternate images and the mobile device emulators I've been able to find online (Chrome developer tools and other browser based ones) all seem to work like they're supposed to.
Here's the CSS I'm using:
.portfolio-background {
background: url(/assets/images/background1-small.jpg) fixed;
background-size: cover;
#media (min-width: 530px) {
.portfolio-background {
background: url(/assets/images/background1.jpg) fixed;
background-size: 100% 100%;
}
}
I've also tried tweaking the background-size to be "cover" on the smaller media query with the same result. I also have this at the top of my html file which should set the width of the browser window to be the width of the device being used:
<meta name="viewport" content="width=device-width, initial-scale=1">
Any suggestions?
EDIT: I'm using a complier and I originally gave the code before my compiler did it's magic. I've adjusted the post to show the actual code output. Still trying to solve the problem
The background images are swapping correctly on your site, I think the issue is that are you not seeing the result you want because of the size and format of your mobile background, and your CSS rules.
The code on your site is slightly differt than what you posted, so I'll use that as an example.
First, try something like this for your mobile background:
body {
background: url(/assets/images/background1-small.jpg) fixed;
background-size: 100% auto;
background-repeat: no-repeat;
}
I think you'll find that it's close to what you're after, but that it doesn't extend low enough at some viewports. The solution to this second point is to prepare another background image which is taller.
Update
It seems like there has to be a better way to cover all the potential
screen sizes than having a different background image for all of them.
How do you get a responsive background image for mobile?
Background on mobile can be tricky because the format of the elements can change radically from their format on desktop.
try preparing your mobile backround image so that its proportions are similar to the proportions on the element you want to cover on mobile
sometimes you can us a background color in addition to your background image.
if you can live with some of your background image not showing, then the use of background-position can help a lot. eg, if the center of interest is in the middle of your image, then css like the following will center your background image in the middle on your element
element {
background: url(/assets/images/background1-small.jpg) fixed;
background-size: initial;
background-repeat: no-repeat;
background-position: 50% 50%;
}
Good luck!
Consider the following link: https://www.emailonacid.com/blog/article/email-development/emailology_media_queries_demystified_min-width_and_max-width
You are using the wrong media query. Instead change min to max. What this means then is that the maximum width is the one specified. So every decide whose width is less than or equal to 530px will use the styles you have specified.
This has to be:
.portfolio-background {
background: url(/assets/images/background1-small.jpg) fixed;
background-size: cover;
}
#media (min-width: 530px) {
.portfolio-background {
background: url(/assets/images/background1.jpg) fixed;
background-size: 100% 100%;
}
}
i.e. first the regular rules, then the media query, inside that the same selectors with the rules containing those parameters which differ from the regular rules.
background-size: cover;
Should be:
background-size: 100% 100%;
I’m trying to create a site using Wordpress. I created a theme and most of my pages are created using page templates because I wanted to stay away from the blog look.
Everything looked great until I viewed the site on my ipad in portrait mode. I have a huge white space at the bottom of every page. I used Chrome Canary’s developer’s tool but could not find the element that’s causing the whit space.
I’ve been searching forums for days and tried solutions that have helped others with the problem. No luck so far.
I tried using media queries like:
#media only screen and (min-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) and (-webkit-min-device-pixel-ratio: 1) {
Html,body{
Overflow:hidden;
}
Still have the huge white space at the bottom of every page when I’m in portrait mode on my ipad.
Please help me find the fix for this problem. Here’s a link to my site: http://www.davidsdrift.com/
Thanks for any help.
Remove the two background-size properties from body and add background-size: cover;.
Add this selector
html {
min-height: 100%;
}
Your background should now cover the entire screen regardless of resolution. You may also wish to add background-position: center center; too.
Example
html {
min-height: 100%
}
body {
background: url(images/homePage.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
If your site design has a static height, then any browser that is taller than that height (most mobile browsers, since they're in portrait orientation) will just stop at that point, and not put anything else below. The browser just defaults to "nothing" (i.e. white space) after that.
You could set a simple background color, so that it's not just defaulting to white below your designed area (body {background-color: #CCCCCC;}), or try something fancier than that.
Or, (gulp) you could totally re-jigger the site to not use a static rectangular design.
It depends if you want to put image to fill 100% your height just add
background-size: 100% 100%;
Else if you want to fill content use percentage not pixels for full height
To add to Joe's answer: The reason why you are seeing white space on the ipad in portrait mode is because of the aspect ratio and orientation of your background image.
There are countless fixes for this, however they all depend on what you would like to do with that extra white space. You could enlarge your background to cover the whole space, repeat the background, use CSS3 properties to create a mirror effect, etc.
Assuming you just want the background to take up the whole space when in portrait mode use this:
#media (orientation:portrait){
html{ min-height:100% }
body {
background:url(images/homePage.jpg);
background-repeat:no-repeat;
background-size:cover;
background-position:center center
}
}
I have a background image assigned via background: url(""); to the body element. Now, its a really huge image and I want to focus the view exactly on the middle.
To understand what I want to do, imagine the following: Open an image on a touch-screen device like an iPhone or any Android phone. Now, pinch to zoom in to the center of the image, and imagine that each zoom-level is a different viewport of another device.
I want a specific part of my image to always be in the center. So far, I have tried tried to use background-{size,attachment,position} but couldn't get it right at all.
My current example is at http://dev.dragonsinn.tk - and the CSS is here: http://dev.dragonsinn.tk/themes/dragonsinn/css/main.ws.php
The current image is 1920x1080, so on most screens it will center almost correctly. But my local one is 1024x786 - which looks horrible so far...
What is the needed CSS, to even make an undersized image center? I can use media queries to make it bigger later. For now, I just want to really center it.
The following centres your image and scales it for different viewports.
See this link for more info on the background-size css property.
Also see http://caniuse.com/#feat=background-img-opts for browser support.
body {
background: url("/cdn/theme/images/bg.jpg");
background-color: black;
color: white;
height: 100%;
width: 100%;
background-repeat: no-repeat;
background-position: 0 0;
background-size: cover;
}
I have a rendering error in this website which I haven't seen anywhere else. The website renders in all modern browsers and validates fine although I can't figure out why is it not displaying the full background image (see screenshots below). I am using Yahoo CSS Reset and the background image is declared in the body like this:
background: url("back.jpg") #033049;
You can also visit the website: http://xaviesteve.com/
Let me know if I should provide any more details.
Any help/hint is appreciated, thank you.
EDIT
I have found very few people reporting this issue around the Internet:
Another SO question: White space showing up on right side of page when background image should extend full length of page Suggested applying overflow-x:hidden but it crops the website.
In an iPad forum: http://www.ipadforums.net/ipad-development/9954-mobile-safari-doenst-show-background-image-when-page-slided-left.html No replies
SOLUTION
I've been investigating and trying different ways to solve this and found that adding the background image to the <html> tag fixed the problem. Hope this saves some time to other devs.
Before
body {background:url('images/back.jpg');}
After
html, body {background:url('images/back.jpg');}
Moving the styling to the html element works fine, but there are other ways of fixing this.
What's going on here is initially the body element is sized according to the viewport. If the viewport is only X pixels wide, your body will only be X pixels wide, even if the contained content is wider. To fix this, give your body (or whatever you're attaching the background stylings to) a non-percentage based width or a min-width to fit your content.
You actually get the same issue on desktop browsers by narrowing the browser window and scrolling to right. The problem is more noticeable on the iPhone/iPad because by default, Mobile Safari will set the viewport to 980px, and then zoom out until all your content fits on screen.
An alternate solution, which I wouldn't recommend because it only works for Mobile Safari is setting the viewport width yourself using:
<meta name = "viewport" content = "width = 1080">
More info at Apple's Developer Docs.
Just ran into this problem and fixed it by setting all content that uses width:100%; to also have min-width set larger than the width of your content divs.
FOr example:
.content_bg{width:100%; min-width:1080px;}
I also fixed it on mobile devices using media queries:
for iPhone and iPad:
/*ipad portrait*/
#media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
body{width:1080px;}
}
/*ipad landscape*/
#media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
body{width:1080px;}
}
/* iPhone [portrait + landscape] */
#media only screen and (max-device-width: 480px) {
body{width:1080px;}
}
None of those solutions solved my problem, but I found out a rather simple one.
Just set the background-size of your bg container equivalent to the image dimensions, like this:
body {
background-image: url(bg.jpg); /* image dimensions: 1920 x 3840 */
background-size: 1920px 3840px;
}
Although it may seem a bit redundant and not nearly as good as making your site responsive, it works fine.
Set background-size to 100% and background-position to top-left. It will works fine as follows:
background-color: #336699;
background-image: url('whatever.jpg');
background-repeat: no-repeat;
background-position: top left;
background-attachment: fixed;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;`enter code here`
I know this is already answered some time ago, but none of the fixes I could find worked for me, but I managed my own solution which should work for most people I imagine.
Here's my code:
html {
background: url("../images/blahblah.jpg") repeat-y;
min-width: 100%;
background-size: contain;
}
Hopefully it helps someone!