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.
Related
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
I have a page with a large background image. The menu and main content portions are 900px and centered. Rather than just fill the menu background with a color, I'd like to simply blur the background image. I'd also like the blurred part to move appropriately when the page is resized so I can't just blur a section of the background. How is the best way to achieve this? I tried putting a semi-transparent .png as the background to my menu div but that didn't work, I didn't see any effect. Does anyone know how to do this? Thanks.
The site that inspired the question is this one: http://www.bluespooncoffee.com
http://jsfiddle.net/MAbpx/
background: rgba(255,255,255,0.5);
This makes the background of something semi transparent because the last value is the alpha (transparency value). Adjust as needed.
For clarification look at the following images.
The first one is what I intend to achieve. It's a text input element with two background images, one on each side.
The second image is the sprite image containing the icons I need.
Now my question is, is it possible to clip a background image to only display a portion of the image? Furthermore is it possible to use it with multiple backgrounds?
1st image:
2nd image:
You're going to have to use two separate icon images to get this to work as you expect at the moment.
With CSS sprites, the background is clipped by the size of the element, there is an experimental CSS3 property called background-clip but it doesn't work the way you want (it will clip to the borders, padding or content of the box, not a specific dimension.)
So create two icons, use one on each side of the element with background-position.
As you can see here, with a spritesheet it will display the entire background image instead of the two icons you want. There is as yet no way to clip BG images in the way that you want. (one day, hopefully!)
You will need to use separate icons OR you will need to have 2 additional elements (for showing the icons) overlaid on top of the input box. The latter will let you use the sprite itself.
Set to your element (let's say div) yor big backgound picture and then adjust with background-position. Your image will be croped by your element size (ex. div).
in your case it will be around:
background-position: -87 -35;
and div size:
width: 28px; height: 30px
with CSS3 you can use multiple background images for an element. to show a specific part from the image you need to set its background-position property.
for example:
background-image: url(sprites.png), url(sprites.png);
background-position: center bottom, left top;
you can also define background-postion in pixels like:
background-position: -5px 10px, -35px 10px;
for more information check this link
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.
Here is what I want to make, somehow:
1- A gradient background from top and down. There should be 2 colors, lets call them color1 and color2.
2- I want the gradient to be about one page, so it starts on top with color1, and then ends about one page down with color2.
3- Then I want color2 to continue all the way down for whatever size the page is.
Is this possible with css maybe?
Thanks
You can create an image that is a couple pixels wide and whatever vertical length you want for your "page size".
In CSS, there's a way to control the repeating of an image. So, you could do a repeat-x, to get the image to repeat left to right. Then, just set the background color of your site to whatever the second color is, so that if your content extends further, the user will only see Color2.
e.g. CSS
body {
background-color: #b5b5b5; /*gray*/
background-image: url(./images/body_bg_gray_1380px.gif); /*path to wherever your bg img is...*/
background-repeat: repeat-x;
}
Use short-hand notation:
body {background:url(images/body_bg_gray_1380px.gif) repeat-x #b5b5b5}