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/
Related
This question was originally asked over at Wordpress Development but as it concerns a more generic CSS issue I was asked to post it here instead. That thread, and initial explanation, can be seen here.
I have a background-size: cover image set as the header of single posts which used to fill the screen, with content beginning immediately below. For some reason, it no longer does this. The background image itself is scaling to fit the screen, but the content below it (the text of the post) is beginning immediately after the overlaid text.
You can see what I mean in this fiddle.
If I set #hero-header to position:absolute; min-height: 100%; min-width:100%; then the image does fill the screen when you load the page. The problem then is that the content below it runs over the top, rather than beginning just off screen.
Can anyone suggest a solution?
To clarify what I mean by 'fill the screen', following a response below:
The div that contains the background image should fill the entire screen when you load it. At the moment the background image is scaling to fit the screen, but #hero-header is not forcing the content below it off the page – it is falling after the text element, .hero-text, within it instead.
This has fixed the problem:
Background image moved to html and #hero-header set to height: 100vh.
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.
Here's my dilemma, I've got a background image that has a bar on it. I fit the background image by using
body {
background-image: url("foo");
background-size: 100%;
}
I also have some html that I want to be inside that bar. The problem is, when the user resizes the browser window, the image adjusts to fit it (which is what I want it to do) but the html stays in the same spot, so it gets put outside the bar. Is there a way I can make my html resizable like the image so that it appears that the html is glued to the image? Can somebody give me a css clip for this?
The biggest problem with using images to guide your layouts is exemplified by this issue. Unfortunately, Harrison, you there is no solution that will enable you to do what you want across browsers or browser sizes without changing the image. If you can, please post a screenshot of what it is supposed to look like so that we can help you modify your background to improve its compatibility
In the meantime, I suggest that you remove the bar from the image and continue to use the image as your background. Then use a div with display: block; and use the bar as its background.
If you want the bar to be resizable, set its height and width to percentage amounts of the container height and width. Of course, when the window is reduced in size to a large extent, the HTML would spill out, there's no remedy for that.
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)