I have this CSS to show a water mark inside a div:
background-image: url("../Images/Watermark02.png") !important;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
the behavior is shown in the below image, can somebody help me and tell me what is missing to get it to work on Chrome just like FF?
You can fix this by removing background-attachment: fixed. The "fixed" value is relative to the screen, not the you have the background image inside of. Granted it's possible this is due to something else, but I will need to see the rest of your CSS/HTML.
background-attachment: fixed; /* Remove this */
I've set up a jsfiddle for you here: http://jsfiddle.net/HkBh4/
Related
On this page, http://www.espn.com/espn/feature/story/_/id/12748163/floyd-mayweather-prepares-2-fight-seal-legacy, if you scroll a while you will get to an image (a fixed background ) which does not respond to your scrolling action for a second or so... I call this temporarily stick parallax effect but this is my way of referring to this difficult to describe effect.
Does anyone know what it is that makes this temporarily freezing the image like that? I think it is a fantastic effect.
None of the parallax tutorial sites I checked do this kind of a demo.
This effect is achieved quite easily:
If you inspect the picture elements, you will find that this is just a fixed background-image:
#section-1 .section-photo-break.chapter01 {
background-attachment: fixed;
background-position: center 44px;
background-repeat: repeat-y;
background-size: cover;
border-bottom: 0;
}
However, this effect doesn't work on i(e)OS this way^^
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/
Here's the CSS. I tried the shorthand that is commented and the long form and none work in IE. I'm even using the latest version of IE. For some reason the image won't display. I tried with multiple images, even just jpgs.
main{
/* background: url(../images/mosaic-min.png) repeat fixed center center;*/
background-image: url(../images/mosaic-min.png);
background-repeat: repeat;
background-attachment: fixed;
background-position: center center;
}
I know there is a bug if you don't have a space by the url and the next declaration in the shorthand, but there is a space there. Not even the long form works, though. It is a very large area to cover with the image. Maybe IE automatically prevents this?
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 am having a great deal of difficulty with getting rid of the white space at the bottom when I apply a CSS3 gradient and the content has insufficient height for a scrollbar.
Such as here: http://womancareolympia.webs.com/
I have tried playing with setting both html and body heights to 100% or auto. I am able to make the gradient go to the bottom this way, but then when content requires a scrollbar, the content flows past the gradient.
Thanks for the help!
Add min-height: 100% to body.
Remove all instances of padding-top from body (or otherwise set it to 0).
Set top: 129px on #fw-container.
Set margin-bottom: 110px on #fw-container.
Add overflow: hidden to #fw-foottext.
(tested in Chrome+Firefox only)
I do think you should redesign your CSS to not use stuff like top: 100px and margin-top: -50px all over the place. There's just no reason for it.
I had the same problem. This can be resolved by adding the following properties to the body element (where the linear gradient has been defined)
body {
background-image: linear-gradient(
to right bottom,
var(--clr-primary-100) 0%, // Random colors
var(--clr-primary-900) 100%
); // Linear gradient
background-size: cover; // Add these properties to your body tag
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
}
I hope this helps. Let me know if you face any problems.