I have seen many sites using background image for their page but then i see the following code
background: url(...) no-repeat scroll center top transparent;
I couldn't understand the different property used after the url. I need to understand those properties.
i will explain property after image url
1- background repeat : you can disable repeat it with "no-repeat" option so it show once but if its small you have to put background color to fill the rest white spaces .. also you can repeat it horizontal only with "repeat-x" and vertical with "repeat-y"
2-scroll/fixed : it means your background image is scrolling with content till its end .. or you can use option "fixed" to sticky background and only scroll content/elements !
3-background-position : this option to position background in page .. first attribute for horizontal position you can set option "right" or "center" or "left" and next attribute is vertical position and you can use "top" or "center" or "bottom"
4- background color -> use transparent or specify color to fill the page behind background image so if the image is small and you set it to no-repeat the color will fill the rest spaces on web page !!
hope this make you understand :) and sorry for my english
Related
I currently have a background image but want to insert a blank white page on top of it using either html5 or css3. In addition, I would like the page to be able to be adjusted in terms of dimensions.
From the question description you have provided, I can understand that you need a White Box isnide a Box with an Image as background.
There are many ways to do it, Simple is to create a Div inside Div. Parent Div will have style of background image and child Div will have background color as white and position relative.
I want the background to be displayed from the line drawn on the screenshot:
http://img29.imageshack.us/img29/4707/wjm7.png
I tried to use
background : ('path/to/image') 0 650px repeat-y
But it the light part of the image moves and it looks ugly. All I want is simply to background look on the site like on the screenshot, but without the dark part in the bottom. Thats why I want it to repeat from the red line.
Now the css is this way:
background : url('path/to/image') top center
You can set px values instead of top
background : url('path/to/image') -430px center;
Repeating the background like this will not be possible. You'll just have to crop your image and use repeat
I'll suggest to use two backgrounds. I.e. set the repeatable part as a background of the body and the other part as a background of your main container.
I have a very tall image that I'm using as a background for the body tag. However, the page may be longer than this image, so after a while I see the background color since I use no-repeat (the background is not a pattern).
Is there a way to keep the background scrollable, and then when I reach the end of the image, keep it "stuck" to the bottom, although the page keeps scrolling?
you need to use an extra fixed layer with the bottom of the picture setted to transparent, and then listen to the scroll event to detect when you reach the bottom of the original background, set the fixed layer visible and voila, you have it! If you need help in any of these, please provide a snippet of your code so I can implement in it for you.
I am currently creating a one page website, however I am having an issue, I need the scroll text underneath the fixed element however you can see the text that should be dissapearing under the fixed position element, as the element as a back-ground, which is a transparent png, is there any way I can hide text as it scrolls underneath the fixed position element.
Here is a fiddle of what I have, so far
JS FIDDLE
Ideally I am wanting it so that when text moves behind the box with red borders it is not visisble, without the need for a background color.
I have visited your website and stolen some images to better understand what you are trying to accomplish.. Assuming i'm correct in the assumption you do not want a solid background on the header because it would mess with your pages background....
you can use multiple backgrounds...
see your demo
You will need something in #banner that will hide the text. From the css it looks like there is supposed to be a background image in that block, but it is not showing up.
The header is transparent as set in your css reset, so a color or image will be necessary if you want the text to be hidden. Otherwise, it's like moving the text behind a piece of glass...you will still see the text unless you have something to actually cover it.
I suspect if there was a working background image on the header, it would block the text where it wasn't transparent. When I add a background-color it achieves that effect.
I have a a background image on my html with css page, from blue at the top, to white at the bottom.
However, the image 400x800 and the page is much longer, so it repeats.
The page length varies all the time.
Is it possible to solve this so the background stretches to the page length somehow? or maye make it not repeat and make the background white with the image on top?
If yes, how please?
The easiest is to set the image to not repeat and then set the background color the same as one end of the gradient:
body {
background: white url('yourImage') repeat-x top left;
}
Getting a gradient to stretch to fit the window is doable, but is more work and would require some javascript.
I know that there are jQuery / Javascript methods of accomplishing this:
Resizable Backgrounds with jQuery
Stretch background image - jQuery - Demo
but besides resorting to solutions like those - you could:
Select a pattern for your background that repeats (textures etc.)
Create a very long background image that could handle most navigation that your page
would deal with.
Another alternative is to make your gradient the same at both ends with the maximum colour difference at the 50% mark.