The background image I have setup works fine in web browser, it stays static, but on mobile the background is constantly changing depending on the height of content?
When the content is short on mobile the background isnt zoomed in but basically shows the left Third of the photo. When the content is long paragraph it is a much more zoomed portion of the first third of the photo.
I am currently using the current css
background-image: url("/images/midgame.jpg");
background-size: cover;
background-attachment: fixed;
overflow-x: hidden;
If you do not want the background image to zoom in or out, remove the background-size: cover
Also try background-position: center top
Set explicit dimensions so that the background image appears when there is little or no content. Set height:100%. Might have to set width as well.
EDIT:
Remove background-attachment:fixed
Add min-height:500px or whatever number you wish.
Related
I'm trying to show the full background image as a landing page, then the content appears when the user scrolls down, however the bottom of the background image is usually cut off (depending on browser resolution).
I'm trying:
background-attachment: fixed;
background-size: cover;
Here is a codepen that demonstrates the issues:
https://codepen.io/suez/full/wulBv/
You can see that the bottom of the first image with Iron Man is cut off. Here is the full image (https://i.imgur.com/PbV1Grl.jpg).
Is there a way to show the full height of an image? Even if you need to scroll down more to see it?
use css:
background-size: 100% 100%;
You can add background-position: bottom
https://codepen.io/anon/pen/XMMVYo
It won't show the full height in most cases, but it will show the bottom of the image.
Or you use background-size: contain and (in this particular situation) combine it with a white background color
EDIT: White won't work, I didn't look close enough. Here's approximately what I mean, but it's not really satisfying, since there isn't just one color at the border of the image:
https://codepen.io/anon/pen/zZZpMX
You can use background-size with 100% height and width.
Remove
background-size:cover;
Replace with:
background-size:100% 100%;
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.
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
I'am busy with my website, and now I have a issue.
When i scroll down to my contact page, my browser starts to lagg, because i have a background image with the property scroll, and size cover.
So i googled a bit and the result was that the property cover causes the laggs.
How can i fix this? I need my background size covered because i have my website responsive
My code:
background-attachment: scroll, fixed;
background-color: #666;
background-image: url("../images/black.png"), url("../images/bg-footer.jpg");
background-position: center, center center;
background-size: cover, cover;
Can i ask why you need to use background-attachment: scroll at all?
You have set the background image to cover the full width of its container, which means it's not going to change position on scroll anyway.
You are forcing the browser to recalculate the image size whenever you scroll the mouse, causing the lag.
You could also try using other properties like contain or 100% width to fix your image.
This is my tumblr blog:
thestorywithnoending.tumblr.com
the code for the blog is a theme I got here:
http://themes.pouretrebelle.com/lycoris/?download
(just scroll down a bit, the whole code is there)
I want the background image to just be ONE image...
I know I'm not being descriptive enough, so to fruther explain: I want it to be like this:
http://chloescheffe.com/
you see how on that website the background image is.... everything basically. And when you change the size of the webpage, the background image changes accordingly?
how can I do that on my tumblr blog?
THANKS :)
with css. set the height and width of your bg image to 100%. sorry, i'd give you the code but this keyboard doesn't have all the characters of a larger one.
use the background-size css property w3schools.com/cssref/css3_pr_background-size.asp
You can do this two ways using background-size. One will stretch the image and one will fill the width properly, but cut off the bottom.
For stretch, add this to your body CSS:
body {
background-repeat: no-repeat;
background-size: 100% 100%;
}
For width-fill (this looks better with your current blog), add this to your body CSS:
body {
background-repeat: no-repeat;
background-size: cover;
}