I'm doing HTML and CSS for a site, and I've come across a very weird bug / behaviour that I can't pin down.
Take a look at http://www.atelierhsl.nl/antwerp/. There's a white line through the logo at the top. If I display:none the navigation at the bottom of the page, it disappears. But when I increase the bottom padding of the text column (.entry-content) it reappears again. This happens in Webkit, Mozilla and IE, so I know I must be doing something wrong. I just can't figure out what. Anybody?
This is caused by an anti-aliased line on the top your body's background images (just 1 pixel of light gray). The simple answer is to crop it using an image editor.
You may want to align the image to the top:
background: url("/wp-content/themes/transfer/images/bg.jpg") no-repeat scroll center top #1D1D88
The main problem is that the background image isn't as big as the the area it should cover.
Kobi's answer is correct, but if you don't mind a design suggestion: Rather than putting a black background image at no-repeat top for the body, separate body content into a container and a footer. For the content background use a smaller background image and tile it, or set the background color to black, since it appears you have no gradient. The footer div can then have a white background (inherited from the body, or just assigned directly).
You page is logically divided into main content and a footer, so the HTML should express that.
There is two solutions:
Just changed the body padding top from 60 to 40 or
changed the background position from center center to center top
I think, you should cut a 1px line from your background and to repeat-y it. There will be no bug, and you will decrease the image weight.
Related
I'm trying to get a similar background effect that's on this website:
By looking at it, the background of the website is black, but has a horizontally stretched background image that remains at the top of the page. When the page is scrolled down, the image stays at the top but blends into the background color.
I tried making an image like the one in the example and used background-size:cover but when I scroll down, the image stays static and just the contents scroll. If that makes any sense at all!!
By looking at the example, could somebody kindly explain what CSS is needed to achieve this? And also, what should the image size be (in PS), to allow it to stretch in larger browsers without losing quality?
I tried looking at the website's CSS file to see what was happening, but it's all on one line and confusing to work out.
I would add a link to the site to show how it scrolls, but apparently I'm not allowed, so a screenshot will have to do.
Many thanks in advance.
It looks like that background uses the css:
background:#000000 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.
To see this effect, using chrome, change the css to:
background:#00FF00 url(<img>) no-repeat scroll center top;
and you will see what is going on.
I've come across a strange problem and have no idea how to fix it. See the example:
http://jsfiddle.net/9wqsr/1/
I have 3 divs and a video element. The video is position:fixed at the top of the page so the 3 divs scroll over it. The first has a solid colour background, the second has no background so the video is revealed when it scrolls over. The third has a background image that is fixed in it's position.
Here's the problem: when the 3rd div with the background image reaches the video, the "fixed" background image suddenly jumps.
This happens in the latest versions of Chrome and Safari but not Firefox.
Any idea what's going on and how to solve?
Try the background image without the "fixed".
background: yellow url(http://jsfiddle.net/img/top-bg.png) 10px 0 repeat;
Try a background with z-index:-1;
I have a small problem on a website with a background element in CSS that doesn't go below a certain point on page. This is the link where you can see what I'm talking about, in the footer: http://www.stuffforyourdog.com/collegeadvisors/admissions.html
On other pages everything is fine, but on this one I can't figure out why the background image doesn't go all the way down, like it's supposed to.
Your background image's height is too small, if you set
.tail-top2 {
background: url(images/bg2.png) bottom repeat-x;
}
instead of top aligned, you can see that the page is too large for your image. You need to set your background image height to greater than or equal to your largest page height.
I currently have a DIV containing my fixed navigation bar in hopes to have a background image spanning across the screen behind the nav bar while the screen scrolls. However, the background isn't showing up. I tried this tip, but it didn't seem to work.
Here's my site:
http://www.whiterabbitstudio.us/
and this is the background thati's supposed to line up behind the navigation ribbon:
http://www.whiterabbitstudio.us/1images/head_bkg.png
Does anyone have any ideas? Thanks!!
It's hard to tell what you're actually trying to do, but at the moment you specified the head_bkg.png to be the background image of the <div class="header">...</div> element which has a height of 0px, thus not showing any background.
To show the background properly, I'd say you should add it to the navigation div and rework the layout of that part quite some bit, e.g. no negative margin-left, make the width 100%, center the content and add a background-size: 100%;
Besides, if you want to have the background continuous, you need to crop the image to avoid the transparent parts above and below.
I have an image that I want to use as a background-image for my footer. Its sort of a gradient image, so the will be white, and the image will fade from its color, to white. It's not really a repeatable image though.
If I want it to always span the entire width of the page, is this possible without a background-repeat? Or, because of different monitor sizes, will this be impossible?
The background image I want should only be in the footer of the page. Like a sticky-footer, it should always stick to the bottom and the content will push it down as needed. It's about 400px in height.
It could still be a background (positioned bottom-center) but it can;t take up the whole height, just the width. And it need to be able to be pushed down (not fixed)
If you're comfortable using CSS3 you can use
background: #fff url(image.jpg) center center fixed no-repeat;
background-size:cover;
to have the image cover the screen. You'll want to be careful that it is at least a decent resolution though.