I have encountered a few problems with CSS radial gradients.
My very simple prototype can be seen here http://payment.hvan.lt/pt/.
In Chrome/Safari/Firefox background gradient is shown correctly, however, as page does not have content to fill the whole screen, background just stops and a half of the screen is white. If I use repeat, then the circle repeats too and I get what I don't want to.
In Opera the gradient background is not shown at all.
What I want to do is that we could see that white circle at the middle top of the screen that would turn to #e6e6e6 background to every direction and would fill all the page, no matter how much content there is.
Set height of body and html tags to 100% and the body background will fill the whole page. (works in Chrome, haven't tried another browsers)
Related
I have currently set my page background to a tileable image and my header to the same image. To get the two to line up I set background-position-x to a value that worked. This is all good until you view it in a different size window. Now they are no longer lined up.
Is there a way to basically make my header, transparent. I know you can set it to rgba(0,0,0,0) which is, transparent however it shows white instead of the background image that is set on the body.
Can I do this or is there an easier way to position the header background to line up with the body background regardless of screen size.
A dirty mock-up can be found here: http://jsfiddle.net/spedwards/L7jjU/
To actually notice a difference, expand the result window or view in fullscreen here http://jsfiddle.net/spedwards/L7jjU/embedded/result,css,html/
If you open my page at http://goo.gl/68s0t (Please don't replace the link here as I don't want google to link this page to my site.) in a non-maximized window and maximize it after it loaded, you see the gradient start over again in the lower part. In opera it is one gradient but in other browsers it repeats vertically.
How can I make it not repeat, ie make the gradient adapt to current browser height?
Sometimes, I see blue squares in the lower right and left corner, what causes them?
To answer (2), the blue squares are caused by the background being applied to both the body and the html elements. Since the body is given a small margin (from the browser, by default), it extends downwards a few pixels beyond the html. They both have the same height, the body is just offset by 8px vertically.
The margin on the left and right causes these small boxes.
To fix this, remove the background from the html, only apply it to the body, and change the margin to padding, if you want the space there.
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 have a weird issue with a graphic with rounded corners.
I have a HTML page with the body set to transparent (style="filter:alpha(opacity=100);opacity:100;background-color:transparent;") and within this body is a div with a PNG image with rounded corners, with transparency on the edges so that it transitions correctly with the background.
This HTML page is contained within an iFrame on top of another HTML page, so I want the transparent image contained within the iFrame to show through and thus the rounded image to transition correctly with the background (which is an image) on the page that is calling the iFrame (hence the body within the iFrame has a transparent background).
This actually works fine, except for the transparency on the rounded corners. For some reason there's a very fine but noticeable jagged black edging around the rounded corner, as if a black matte was put on it.
I have also tried it with transparent GIFs, but got jagged white edgings instead.
Has anyone ever tried to do something like this before, and got it to work? If so, I'd love to hear how.
EDIT
Here's a link to the result: image
The image with the leaves is the background image (Flash) of the calling HTML. The search box is contained an an iFrame with a transparent background.
This happens on IE7. Firefox seems ok, oddly enough.
You have set Transparency on the body tag to 100... This means its not transparent, for it to be fully transparent you would have to set it to 0. But doing this will result in all elements contained in the body tag to be transparent as well.
I think something similar is happening, the search box is inheriting the opacity attribute which you set.
If you remove the opacity settings what happens?
Also check this website out, http://www.domedia.org/oveklykken/css-transparency.php
I'm setting up a design that uses some gradients, and of course that causes issues. What I want is for my one background image with the vertical gradient to be the main background, but then if the content extends and pushes the div out, I want a different sliver image to repeat on the bottom. Is it possible to do something like this?
The closest you can get is using a background color with your background image. Then set the image to non repeating. Then the color will be the background for the parts of the div where the backgound image is not.