How can I have fixed background in a div?
I have a site, and in one of my pages I use a div which looks like an editor. I can have a background in this div and the content above it. I want this background to stay in a fixed position while I am scrolling in the div.
My code is similar to this:
<div id="myEditorArea" style="vertical-align: top; width: 240px; height: 320px; background-image: url('image.png'); background-repeat: no-repeat; background-position: center center; background-attachment:fixed; overflow:scroll; text-align: left;">
bla bla bla
</div>
Th开发者_开发问答e background stays fixed and works ok when I scroll inside the div. The problem is that it is moving when I scroll in the whole page.
Does anyone know what could be the problem?
Thanks in advance
Here is an example of background-attachment: fixed;
http://www.w3schools.com/css/tryit.asp?filename=trycss_background-attachment. That should be what you need.
source : https://codyhouse.co/gem/alternate-fixed-scroll-backgrounds/
html:
<div class="cd-fixed-bg cd-bg-1">
<h1><!-- title goes here --></h1>
</div>
css:
body, html, main {
/* important */
height: 100%;
}
.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("../img/cd-background-1.jpg");
}
精彩评论