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!
Related
I have a problem with IOS devices. I think the cause is Safari browser, who's not showing my background image properly. It work on any other phone except the IOS devices.
I am trying to keep Position fixed, for the image to stick and scroll down when the user scrolling but the image instead of scrolling it is just zoomed to the maximum and cant see nothing beside small chunk of the img.
The code I am using for the image -
#media screen and (min-width: 375px) and (max-width: 812px)
and (-webkit-device-pixel-ratio : 3){
html, body{
width:100%;
overflow-x:hidden;
background-size: cover;
background-attachment:fixed;
background-image: url(./phone.jpeg);
}
Thank you guys really hope we can figure it out together !
I'm working on recreating my website and I would like to have images that appear on the size that categorize the sections. I would like these images to be responsive based on the height of the container. For example, if the container is 600px tall I want the image to be 600px tall regardless of the width. Right now I'm using background-size: contain; which works in desktop mode, but after a certain width, the image starts to get shorter in favor of staying the width of the container.
It works fine in desktop mode:
In mobile I get this:
When I want this:
I hope that makes sense. Also bear in mind that this isn't a finished concept so it looks pretty bad as it is even when I "hack" it to work in mobile
You can use media-queries:
#media only screen and (max-width: 600px) {
img {
background-size:cover;
}
}
You can read more about media- queries:https://www.w3schools.com/css/css_rwd_mediaqueries.asp
You can read more about background-size:https://www.w3schools.com/cssref/css3_pr_background-size.asp
One important thing when asking for help is doing your best to explain your problem as best as you can. Things like putting part of the code you have for example could really improve how fast you'd be answered and have your problem solved.
With that said, I'd recommend changing your css to something like the following:
.hero {
width: 100vw;
height: 100vh;
background-image: url(../images/hero.jpg);
background-size: cover;
background-position: center, center;
}
The background-size: cover along with background-position: center will make sure that it displays in the way you want in mobile. Not necessarily exactly that part of the image though, maybe you'll have to work on an image editor.
The width: 100vw and height: 100vh that I used in this example, are the size of the container in which the image is the background, that is also relevant when it comes to how the picture is displayed. vw is viewport width, vh is viewport height. This unit is good for working with responsive displays, as it takes in consideration the screen to determine the size of whatever styling you put it in.
Since this is already working in desktop in the way you want, I'd suggest using a media query so you'd only change the way it's displayed in mobile, for example.
It would be something like
#media only screen and (max-width: 480px) {
.hero {
width: 100vw;
height: 100vh;
background-image: url(../images/hero.jpg);
background-size: cover;
background-position: center, center;
}
}
As suggested in another answer, take a look into media queries to choose which one is appropriate for what you're trying to achieve. You can use many media queries, such as one for mobile, one for tablets and one for desktop.
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;
}
}
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 problem creating a responsive image (the cloud) using CSS. I want that cloud to be fixed.
This is my HTML:
<div class="r-img" style="background:url(./img/cloud.png); width:587px; height:330px;">
</div>
This is my css:
.r-img img{
top:30px;
right:5px;
overlow:hidden;
display: block;
}
I want the page to look like this:
http://imgur.com/NAsDsNy
When I use a lower resolution or CTRL + Scroll I see this:
http://imgur.com/OHSAvrE
I just want the image to stay fixed when someone use ctrl + scroll or when someone access the page with a lower resolution than mine. My resolution is 1920 x 1080.
You can try to use background-size with some percent value (e.g. background-size: 30%).
DEMO
Percent value here is a key: when using it sets background size relative to the background positioning area. When browser window zoomed this area changes accordingly. So visual effect is that image size is the same no matter what zoom level is.
Place the image inside a container whose dimensions are defined and then place inside the image and maximize it`s size to 100%.
img { position:absolute; max-width: 100%;}
That way, the image size will always change, but the changes will respect the dimensions and proportions of the container (parent). This is called image resizing under the scope of RESPONSIVE DESIGN.
To assign dimensions to the image container, use fluid grid dimensions, like:
.2_cols {width: 153px;}
or if want a 100% width:
.12_cols {width: 920px;}
Other method is to use a background image:
body.cloud {
background: url(/img/ban_home.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: absolute; z-index: -1;
}
Everything is funnier with #media (into your css):
#media (max-width: 767px) {
// Your css (of the image) when you are on mobile
}
#media (min-width: 768px) and (max-width: 991px) {
// Your css (of the image) when you are on tablets
}
#media (min-width: 992px) and (max-width:1199px) {
// Your css (of the image) when you are on medium screen
}
#media (min-width: 1200px) {
// Your css (of the image) when you are on large screen
}
This could help you to handle your image better.
Just configure your size wherever you want:
.r-img {
width:587px;
height:330px;
...
}
Check out http://www.w3schools.com/cssref/css3_pr_background-size.asp for sizing a background image. Zooming into the page will make everything bigger, but people on smaller screens will see the image as the exact same size as you unless you use percentages on your widths and heights.
To test different resolutions instead of zooming in and out, just change the browser window to different widths and heights. Firefox and IE11 now have responsive tools to change the browser window to the different resolutions of screens which you can use to test your websites.