html - CSS: background image only shows on first occurring div on page -
I have a problem that stumped me. I have simplified it on the relevant (only) CSS style:
# section 1, # section 2 {width: 16.6667%; Height: 100%; Swim left; Background-image: url (../xyz-test / 1alt.gif); Repeat Background: No Repetition; Background-attachment: fixed; Background-position: top left; }
and the related test is HTML:
& lt; Div id = "segment1" & gt; Segment A & lt; / Div & gt; & Lt; Div id = "segment2" & gt; Segment two & lt; / Div & gt;
So you think you take two identical divis sides along with the same background image - by the time it was provided, the background image was only for the first time. is. The problem appears on the rendering, not the code. If I first put HTML for Segment 2, then there is a background image and not another. Other CSS seems fine, just the background image fails. The background image path is fine.
It looks like a problem within CSS with defining many background images, but I can not find any other problems mentioned on the web. Both Chrome and FF were checked into a fugitive half -The colon or the equality is denied, because the two have been defined together, have you missed anything?
remove background-attachment: fixed
with CSS to solve your problem needed.
Demo:
# section 1, # section 2 {width: 16.6667%; Height: 100%; Swim left; Background-image: url (http://www-mtl.mit.edu/img/bg_01.gif); Repeat Background: No Repetition; Background-position: top left; }
Explanation: If the background image is specified, the background-attached CSS property determines whether the image's position is fixed within the viewport, or its block With scrolling scrolling.
Reference:
Comments
Post a Comment