I have the following CSS for a div that spends 100% of the viewport.
.content
{
background-image: url('../images/content_bg.png');
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
color: white;
}
On desktop this works fine. Even when I scaled down the desktop window to mobile sized it stills looks as I want it to.
However, both on android and iPhone the background is scaled to entire size of the div, which greatly distorts it.
I want it to stay proportionate, but have the content scroll over it.
I also tried removing background-size: cover. This makes it look how I want it to, but it doesn't cover the div obviously, so I have a bunch of content that has spilled out.
I'm running a newer android and iPhone with the most recent updates, which I believe supports the fixed backgrounds, so I'm at a loss as to what is wrong. When I remove fixed the desktop version looks exactly like it does on mobile. So it appears for some reason that is the issue that fixed isn't being applied to mobile.
Related
I'm creating a website, using chrome to debug. I am creating a scrolling page with full height images as background images for my divisions, using "background-size: cover;" and "background-attachment: fixed;".
On chrome's (mobile) debug viewer on my pc, even though there is more scrolling text then could fit over the image, the image stays the same size, and the content just scrolls over an image that is not zoomed in or distorted.
After uploading to s3 and viewing on my mobile device, the background-image for the div with a lot of content zooms the photo in (assuming it does this to continue coverage), to a point which it does not look good.
So far I have tried changing the background-attachment of the content wrapper to fixed, and then scroll just to see if it would work; it did not. The only thing that has allowed the background image to NOT zoom in, was to change the background-size from cover, to 100% 80%;. This kept the original zoom, but obviously did not cover all of the text, causing there to be a gap between one full size image div, and the next.
` .second-page{
background-image: linear-gradient(rgba(77, 77, 77, 0.5), rgba(77, 77, 77, 0.5)), url(images/background6_port.jpg);
background-repeat: no-repeat;
min-height: 100vh;
min-width: 100vw;
background-size: cover;
position: relative;
background-attachment: fixed;
}
.content{
margin-right: 15%;
margin-left: 15%;
}`
Expected Results: background-image covers 100% of viewport on mobile, allowing text and other content to scroll over it without zooming in
Actual Results: background-image zooms in to cover all of content area, causing pixelation and bad visual experience.
As most times I post to this site, as soon as I post my question I come up with the answer. For anyone in a similar situation I fixed this by adding
max-height: 100vh;
overflow-y: scroll;
Hope this helps someone else!
I have the following website:
www.thewhozoo.com
When viewed from a screen with a width of more than 1240px, it displays the images side by side. With a screen below 1240px (e.g. mobile phone), it displays the images beneath each other. This is achieved using:
#media only screen and (max-width: 1240px) {
This all works fine.
My problem however is with the background image:
.top-container {
float: left;
width: 100%;
background: linear-gradient( rgba(0,0,0,0.1), rgba(0, 0, 0, 0.1) ),url('../images/background1.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
When the browser is wide enough (e.g. 930px here), it displays:
But with a narrower browser (e.g. 480px here) or a mobile device, it displays:
As you can see, in the image, the background work "WORK" gets chopped off in the second screen.
Question
Is it possible in css, to set a minimum width, so that the word "WORK" will always be visible, no matter the size of the browser?
This will give smaller browsers the effect as if they are viewing the page from further away (zoomed out).
Thank you.
The background-size: cover setting makes sure the whole element is always filled by the background images. In your case, the mobile version displays the complete height of the image and centers it horizontally, this way cutting something off at the left and right. If you would display it smaller (which would be necessary to see the whole word "work"), the height would shrink too, and the image wouldn't fill the window anymore.
You can try background-size: contain instead, which will always display the whole image, but will leave empty space on either top and bottom or left and right, depending on the orientation. But combined with a background color, this might be something you can live with.
Try background-size: 100% 100%, or background-size: 100%
Hope this helps!
What you can do is make two copies of the background image, when the browser is resized to the minimum width you can use javascript(jquery) to swap the background image from large to small version.
Or you can style the background like:
background-image:url('../images/bg.png');
background-repeat:no-repeat;
background-size:contain;
background-position:center;
I am making a website, for my client.
Now, the website has background-image, on it's landing page, that looks very nic in all pc browsers, but there is one problem...
If you are not using google chrome, on all tablets and phones, it will make the background-image look very zoomed, and weird.
There is code(for css background-image, it should be responsive, but it is not in many browsers):
body {
height: 100%;
font-family: 'Open Sans';
font-weight:100;
color:#666666;
line-height: 1.7em;
/* Location of the image */
background-image: url(1.jpg);
/* Background image is centered vertically and horizontally at all times */
background-position: center center;
/* Background image doesn't tile */
background-repeat: no-repeat;
/* Background image is fixed in the viewport so that it doesn't move when
the content's height is greater than the image's height */
background-attachment: fixed;
/* This is what makes the background image rescale based
on the container's size */
background-size: cover;
/* Set a background color that will be displayed
while the background image is loading */
background-color: #464646;
}
Link to the website
Unfortunately background-attachment: fixed and background-size: cover don't work well together.
See this question and its highest voted answer. (Just in case the question might not be there in the future, here is the answer)
Unfortunately this is simply an artifact of how fixed positioning
works in CSS and there is no way around it in pure CSS - you have to
use Javascript.
The reason this happens is due to the combination of
background-attachment: fixed and background-size: cover. When you
specify background-attachment: fixed it essentially causes the
background-image to behave as if it were a position: fixed image,
meaning that it's taken out of the page flow and positioning context
and becomes relative to the viewport rather than the element it's the
background image of.
So whenever you use these properties together, the cover value is
being calculated relative to the size of the viewport irrespective of
the size of the element itself, which is why it works as expected when
the element is the same size as the viewport but is cropped in
unexpected ways when the element is smaller than the viewport.
To get around this you basically need to use background-attachment:
scroll and bind an event listener to the scroll event in JS that
manually updates the background-position relative to how far the
window has been scrolled in order to simulate fixed positioning but
still calculate background-size: cover relative to the container
element rather than the viewport.
Because phones are usually held in the palm with their greatest length going vertically (unlike desktop computers where they are mostly horizontal in length) the use of background-size: cover; might be exposing your image as a low-resolution image.
If the image is having to be scaled up to 'cover' your browser window, it may be having to pixelate the image, especially if the device has a very high pixel-density.
This image demonstrates the issue:
The solution to this problem would be to improve the resolution of your image.
Note that the issue would be most prominent if your desired background image was landscape in nature. If it was portrait, you may find the extremities of this problem to be reversed.
So I've seen other people posting about similar problems and I've tried their solutions but none of them have worked.
On desktop, the header background image works perfectly. Even when I resize the window to that of a mobile size, it works. But when I load it on an actual mobile device, the background image doesn't show up. I've discovered that if I remove the background-position: center center;, the background image does show up on mobile, but it's distorted.
So, my question is: how can I make the background image show up on mobile without it looking distorted.
My CSS for the header container in question is:
header {
width: 100%;
height: 100%;
background-size: cover;
background-position: center center;
background-attachment: fixed;
background-image: url(../img/header-background.jpg);
position: relative;
}
You can see it in action at: http://coledavidson103.github.io/davidsoncreative/.
Again, the problem only presents itself on a mobile device. It doesn't even happen when I use Inspector to emulate a mobile device.
Thanks in advance!
EDIT:
Here is a screenshot of the problem when I include background-position: center center. You'll notice that the image doesn't show up.
Here is a screenshot of the problem with background-position is not included. You'll notice the image is distorted.
change background-size: cover to background-size:100% 100%.
The best example of what I need would be the picture behind the search bar on http://shutterstock.com. Try to unzoom (ctrl and - on Chrome) ; the rest of the website will size down; the image itself will remain the same size, it will only be cropped as its height decreases.
Basically, I need the background image to be responsive and full width on an otherwise unresponsive and 960px theme.
It's giving me a bad headache so far; I can't figure out how to do it.
Any ideas?
I think you're looking for background-size. FYI, this doesn't work in IE8 and below I believe.
.your-class {
background:url('images/yourimage.jpg');
background-size:cover;
}
body {
background-image: url(blah.jpg);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
'cover' will make the background image rescale based on the container's size
'fix' will make the background image positton stay fixed when u scroll down