background: #f0f0f0 url(/tile.gif) repeat -70% 0;
What is the -70% doing?
It's moving the background image right by 70% relative to it's current position.
This is useful for placing a tricky background image in the right position, or to achieve a certain effect.
Related
I'm trying to use multiple background images on a single div with a top portion, a middle repeating portion, and a bottom portion. The issue is that the repating portion repeats throughout the whole div.
Does anyone know of a technique to restrict a repeating background image to a particular portion of a div? If that is not feasible, do you know if it's possible to push the background_middle_repeating.png background images behind the top and bottom background images?
CSS
div {
background:
url(../images/background_top.png) no-repeat 50% 0%,
url(../images/background_middle_repeating.png) repeat-y 50% 100px,
url(../images/background_bottom.png) no-repeat 50% 100%;
}
Thanks.
Background layers are created in the order they are specified, top-down; with this in mind, to push the middle layer behind the top and bottom layers, declare it last:
div {
background:
url(../images/background_top.png) no-repeat 50% 0%,
url(../images/background_bottom.png) no-repeat 50% 100%,
url(../images/background_middle_repeating.png) repeat-y 50% 100px;
}
Note however that if portions of your top and bottom images are transparent, this will cause the middle image to show through those transparent portions. In such a case you will need to find a different way to restrict the area of the middle background image through some other means. Depending on your layout, this could be as simple as filling in those transparent areas using an image editor, or this could require the use of pseudo-elements or assigning the top and bottom images to different elements altogether.
I have a division that I gave a black background color. The body of the HTML is yellow. What I want is the first black div to fade out.
I wanted to do this using a background-image. The background image is a png file that is black as well, but has a transparency from 0% on the left and gradually goes to 100% on the right.
If I also add this background-image to my division, it remains black.
I understand why this happens, because the image is transparent, and behind that image is still the black color. I get that. Is there a way to do it though? Is there a way to disregard a background-color where a background-image is positioned?
I rather don't create extra html elements if it ain't necessary.
You should use the linear-gradient CSS function for your div.
background: linear-gradient(to right, black, white)
I have a div with stuff in it on a page with a background gradient.
Now towards the right, I would like to fade that div out to the background:
I have tried using background gradients, but those are behind the text. Basically what I would need was a foreground property which I could fill with another gradient.
How can I achieve this without needing to use canvas and JavaScript?
I suggest creating a transparent .png image and applying it as a background on top of the div with text by creating a class with absolute positioning.
.transparent {background: url("xxxxxx.png") repeat-y 0 0 transparent; position:absolute; top:0; right:0; z-index:1;}
Hope this helps.
A transparent (rgba) gradient in a separate DIV positioned absolutely on top of the original div should do the trick.
Caveat: Absolute positioning may not be feasible, depeding on your layout.
I use a table to show several images. I need to show the left half an image in the first td-element and the right half of it in the second td-element. This is because some of the images have double width as others. I thought i use a div and set this image as background image for the first two td-elements using a child-div. Now i am fiddling around to make it work using css.
Any suggestions?
Update: Working example: http://jsfiddle.net/BkAcu/2/
Use background-position: <horizontal> <vertical> where <horizontal> and <vertical> are background offsets, in conjunction with background-repeat: no-repeat.
Set the background-position to a negative value, to move the bg to the left.
See also: https://developer.mozilla.org/en/CSS/background-position
Example (assume your TDs to have a width of 100px, and the image to be 200px);
#td1, #td2 {
background: url("200.png") no-repeat;
}
#td2 {
background-position: -100px;
}
I'd like to have separate background images on the top and bottom of my site but can't quite seem to nail it. I would like the images to stay at the absolute top and bottom of the page.Below is a shot of the site mockup, and a shot of the backgrounds on their own with dimensions.
The mockup doesn't show it, but there will be text links and copyright info at the bottom. You can find my failed attempt at coding at www[dot]dev[dot]arbitersoflight[dot]net
Mockup
img683[dot]imageshack[dot]us/img683/4502/mocky[dot]jpg
Backgrounds
img233[dot]imageshack[dot]us/img233/1293/94210454[dot]jpg
Note: The backgrounds are 1200x400 each.
EDIT: At this point I can get the two images to show up without fail, the problem is getting the bottom image to stick to the absolute bottom of the browser window. It seems that it is currently at a fixed position. Below is my CSS and HTML..
UPDATE (Solved): I finally solved this by reworking my code based on this guide: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/ Thanks for all of the suggestions everybody.
You could use the second image as the body background, set a color too, and the first image as the container's background. Or vice-versa, but remember to align the background, and if you switch, mind the container's height.
The body and html background (like the suggestions from zzzzBov and nemophrost) don't work in my Firefox...
body {
background: #DDD url('2.png') no-repeat center bottom;
}
.container {
background: url('1.png') no-repeat center top;
}
Another thing you can do is set a background image on the body and on html.
body {
background: url(...);
}
html {
background: url(...);
}
You can see jqueryui.com for an example of this.
What you can do:
The menu is a div with an own background to fit the upper area.
Then apply the background with the bottom part to the body or content/page container that you are using.
It sounds like you want:
html
{
background: url(...) no-repeat top; /* see the background-position property */
}
body
{
background: url(...) no-repeat bottom;
}
you may want to switch one or both to use repeat-x, and make sure you set a suitable background color to match the color on the images.