I'm trying to add a fixed background to ONLY this section of my web-page.
When someone scroll down to another section, I'll add background color, not image.
I dont know how to explain this, so I made a demo on my website:
demo
image explanation
I already tried this:
.cd-fixed-bg {
min-height: 100%;
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center center;
}
.cd-fixed-bg.cd-bg-1 {
background-image: url(" IMAGE URL IS HERE ");
}
My html code (without this css above this):
That didn't work execly on way I wanted, so I uploaded demo with that too:
demo
PS. Ignore russian phone images, I was just testing something.
I tried some other css tricks but nothing worked correctly.
Thanks.
Since the question is answered correctly, demo was removed. Thanks!
Here it's work fine: http://csgotale.com/stackoverflow-demo/index-with-my-try.html
but, add to your html,body and h1 margin: 0; padding: 0;
If you wanna make Parallax Effect, i do it here: http://codepen.io/powro01/details/pEBBgR/
I guess you won't be able to achieve this effect using only CSS; you will need some amount of JS code.
They're not quite what you're looking for I'd recommend looking at these to see if they help:
https://github.com/razorfish/Parallax-JS
https://github.com/cyntss/Parallax-img-scroll
Related
I want to do like that: https://youtu.be/shgvBWJ-lTw?t=175
But when I do like that, it would not be responsive. How can i do that responsive in html, css, bootstrap?
I tried many things.
Umm, there is not images from your code or website so i cant see what is actually happening and why your image is not responsive. Make section with .container-fluid So section will have 100% width and responsive, then edit your box with image in css like this:
exapmle:
.box is element where you want to apply your fixed background image.
.box{
background-image: url('image.jpg');
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
width: 100%;
}
I'm not sure if this is going to help you but try it, if this doesn't help try to find another solution or next time send image with your code or website. :D
I'm trying to add a background image to my Dash/Plotly dashboard. I have done this by modifying the css using the following:
body {
height:100%;
background-image: url("/assets/rink.jpg");
background-size: cover;
background-position: center top;
position: fixed;}
This displays the image - it looks great - but it wipes out everything else on the dashboard. How do I push the image to the background (I want to send it to the back)?
Thanks
I figured it out. I had referred to the css in the html.Div([],style='body'). I removed the style='body' and now it's truely in the background and looks great!
This is a simple question about CSS, but I am not sure I know how to ask it correctly. Basically, I have an image that I wanted repeated both x and y. But even though this image is repeated, is it possible to style it as if the image was positioned absolutely?
Take this image here: https://samraines.herokuapp.com/assets/paper-d5baa328bec5b7c9fe4cf98bba88452e.png, and look at it here: https://samraines.herokuapp.com/shows . This is what I was wanting to use this style on, but was unsure if I could accomplish and "absolute" style due to the image's size.
Clarifying once more, I want the image to repeat, but appear as if it was fixed.
Thanks for your help.
Try this css:
.element {
background-image: url(...);
background-position: 0 0;
background-repeat: repeat;
background-size: auto;
background-attachment: fixed; // if you do not want to scroll image with site
}
like here http://codepen.io/Chovanec/pen/dkFDp
I am new to html/css and I do not understand why my background image is not showing up. This is part of a simple test CSS sheet and HTML code for a simple site. I am trying to add a background-image and I have done this once and it worked and I do not know why it does not work now.
body{
background: url (rio.jpg);
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
This is part of my css sheet. THe url works, I have used it for another trial site before. And my html is just a regular html document with a body etc..
CSS is picky about functions.
You can't have a space after 'url' and the parenthesis.
Correct:
background: url(path/to/image.jpg);
Incorrect:
background: url (path/to/image.jpg);
Here's a fiddle demonstrating:
http://jsfiddle.net/tJmmn/
You can try doing the following:
background-image: url(http://www.example.com/images/bck.png); // absolute path
background-image: url(rio.jpg); // relative path
If you are stating that the path is just rio.jpg, the image should be in the same directory as the stylesheet/where you are declaring the background.
If the image is in an image directory, you may need to go up a level as follows:
background-image: url(../images/rio.jpg);
Depends where the image file is located. You can refer to following for further information: https://developer.mozilla.org/en-US/docs/Web/CSS/background-image
Hope this helps!
Haha I had the same problem, make sure you have the right ".png" or ".jpg"!
After all my searching, the problem was I had a file called "bg.png", but I was typing in "bg.jpg"
Had the same issue. I used "background" and instead of "background-image".
Secondly, make sure that the element that has the background e.g a div tag is not empty, else the background image won't show
This problem occurs if you are trying to give the height of the background image in %. If you give that in px it should work and if you still want to give the height in % i.e. 100%(generally) than add this in css:
body{
margin: 0;
padding: 0;
positive: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
This should work as well.
I have a small problem on my site about background-size:cover
I have been testing it in Firefox all along, but when i load the page in Google Chrome, i get 1px white all to the left. When i use background-position:-1px the white edge left goes away (but then i get it to the right). Is there any way to fix this, and still keep the cover?
I applied this to my body: background:url("images/baggrund.jpg") no-repeat center center fixed; background-size: cover
I can not link to the site at the moment, but hope i described it clear enough.
Thanks in advance
Edit: added a screenshot, top comes from firefox, bottom from Chrome.
Try this:
background: background:url("images/baggrund.jpg") no-repeat 49% center fixed;
background-size: cover;
In chrome, when you use "background-size: cover", if the xpos of background-image is no less than 50%, you will meet that problem.
So, the xpos is set to 49% (or 49.9% to reduce the error) instead of "center" will fix that problem.
My English is not good, i hope you know what i mean.
That did not work for me, because i used background cover, but i just added a chrome specific line to set my background-size to 101%, that seems to fix it (for the eye).
Thanks for the input.
101% might work fine but you could also try this fine-grained solution:
background-size: calc(100% + 1px);
Alternative :
Another solution would be to reduce or increase the background image's width by 1px in an image editing program if it wouldn't matter.
Otherwise, this should do it (as #estrar pointed out) : How do I fix 1px margin on Google Chrome?
Changed background-size: cover; to background-size: 100%;. Worked for me!
You could apply the background property to the body tag, which would cause it to cover the whole page.
You could also try applying the following style to the body and html tags:
html,body{
padding:0;
margin:0;
}
So I tried all of the solutions out there and could not get that last px to work. Tried all sorts of big and small image dimensions too.
My problem was that I was using svg. I bit the bullet and switched to png.
/* background: url("/static/images/orgchart-background.svg") no-repeat; */
background: url("/static/images/orgchart-background.png") no-repeat;
background-size: 100% 100%;