HTML page has a background image. Nav menu on left expands on hover to reveal elements. Menu has transparent background.
When the menu grows it clips the background image and moves it down the page behind the menu.
Reduced it to this: http://jsfiddle.net/GgXXh/
Is the background clipping expected behaviour that I don't understand, or is this a browser bug (Firefox 9)?
It seems to requires that the body be set overflow-y: scroll and the menu float: left to trigger.
Really looks like FF bug. Reproduces with FF 7 also.
Reproduces also without overflow-y: scroll on body.
On Chrome works well.
Changing background-position to top center fixes the clipping and moving down on the background:
http://jsfiddle.net/GgXXh/8/
Related
I'm working to edit the background at the bottom of my webpage and noticed a white border around the background that does not mirror the top portion of the webpage.
I've attempted the usual solution of including top: 0; and right: 0; I've also included background-size: cover, but that has not fixed the issue either.
Here is my CodePen so you can view the HTML and CSS. Note, I'm writing my CSS in SASS, so its a bit long.
I expect the lower background (which transitions from the dark purple to the dark pink) to stretch all the way to the edges, a la the upper background (dark pink to blue), but it instead has a weird white border around it.
The problem is that your body got 8px margin.
It's easy to notice with inspection (Ctrl+Shift+C on Chrome dev tools).
Reset it:
body {
margin: 0
}
I have a background image which seems to be static on my website and when I scroll down it keeps scrolling with the page... I want the top to stay static and then when I scroll down for the rest of the page to appear as #FFFFFF...
html, body{background:#ffffff url(images/background-repx.png) repeat-x;height:100%;min-height:100%;}
Any ideas how to do this, I'm not familiar with CSS backgrounds.
Thanks in advance
- Hyflex
Try
background:#000000 url(<img>) no-repeat scroll center top;
To see this effect, using chrome, change the css to:
background:#FFFFFF url(<img>) no-repeat scroll center top;
Which sets a background colour AND image, places the image statically at the top, so that after scrolling down, the background colour is only visible.
I want to make a panel with background image, which can be resized vertically. So the simple idea is to split actual image in three parts: header, body-repeat-part, footer. It looks something like this
<tr><td><div class='header'></div></td></tr>
<tr><td><div class='body'>whatever goes here</div></td></tr>
<tr><td><div class='footer'></div></td></tr>
.header {background:url(header.png); width:110px; height:20px;}
.footer {background:url(footer.png); width:110px; height:40px;}
.body {background:url(body-repeat.png); repeat-y; width:110px;}
So I slice my image which is 100x100 into three parts - header.png - 100x20, footer.png - 100x40, and body-repeat.png - 100x1
Everything works fine in Ie9 and firefox. And even chrome works fine with 100% zoom. However when I change zoom in Chrome the picture becomes jagged i.e. you could see it's "glued" from 3 parts. Apparently chrome scales differently these images.
So my question is - could this be fixed somehow? Or is there any way to make resizable panel with background image?
Many thanks for the replies.
You can try to force no paddings, borders and margins on that tables and divs, and then try to add the CSS3 background size property!
.header {
background-image:url(header.png);
background-size:110px 20px;
}
More about CSS Background size properties: http://www.w3schools.com/cssref/css3_pr_background-size.asp
It is better too try to avoid tables when making a layout structure :)
EDIT:
You can try too to add the
background-size: cover;
property on the full page background so the background image will fit 100% of the width and height of the given area.
A great and very complete tutorial about background-size: http://www.css3.info/preview/background-size/
Here is an example of how I am currently implementing this functionality:
EXAMPLE
The content div can change in height dynamically when items are added or removed so I need the gradient to move with it. This works great in desktop browsers... However when you view it on an iPad and scroll down (moving the entire body up) it looks strange because of the position:fixed on the gradient div. Note that this is only a problem when the content div is smaller than the viewport. If the content div is larger than the viewport it pushes the gradient out of view and works great.
Is there any way to prevent the iPad from moving the body around like that or is there a better way to implement this functionality without using position: fixed?
Thanks!
Can you explain a bit more what looks wrong on the iPad, I don't have one with me. Also, I removed the position: fixed; and the functionality didn't change on chrome. position static and relative work the same for me.
I abandoned the gradient div and instead set a min-height on the content div with a background image of the gradient with the following properties:
#content {
min-height: 200px;
background-color: white;
background-image: url(../Images/content-background.png);
background-position: center bottom;
background-repeat: repeat-x;
}
I have been struggling with this for the past hour and I was wondering if any of you had any thoughts on this..
A client needs a nice big background image on the site. I cannot used this image as a background for the body or any div because I don't want it to be cropped horizontally. If the browser's width is smaller, the background should scale down.
So I just use an img tag with absolute positioning and z-index.
However(and this is where it gets tricky), the image is quite tall, and I don't want scroll bars on the side after the useful content.
Overflow=hidden on the body is useless because I do need scrollbars if the content is too much, but smaller that the image.
overflow=hidden on a div which has height,min-height and max-height set and contains the image just doesn't seem to work. I have no idea why.
And min-height, max-height and height is not working for the body tag either.
Any helpful ideas? I think this is doable by javascript, but I don't want to run a script every time the window is resized. I would prefer a html/css solution
PS: I have all browsers(opera, safari, ie8, firefox, chrome) open right now, and this is not just a browser issue.
I can't build a test case right now, but an absolutely fixedly positioned div with position: fixed; width: 100%; height: 100%; overflow: hidden and the image inside with width: 100% might do the trick. It will scale the image to the window's width, but won't create horizontal scroll bars.
The rest of the page may need a z-index to be displayed above the div.
Note that the body will have to have min-height: 100% for this to work.
position: fixed won't work in IE < 7.