Is there a way to let the repeating background 'start' fixed at the bottom of the div and overflow on the top? (the other way round than default)
Small example to show what I'm trying to accomplish. The red lines on the image below are the (horizontal) borders between several divs. The middle div is used as a transition between the upper and lower one, with a single non-repeating image. The background of the lower div consists of a repeating darker image with a paper hole, resulting in the paper border seen below.
Now the upper div (with sizable content) should have a repeating background image starting at the bottom and repeating upwards. This for maintaining the correct distance ratio between the holes instead of ending up with a smaller distance or even a partial hole in the 'paper border'.
Preferably it should be compatible with method 4 of equal height columns, but I don't see a problem there.
Just make sure you set background-position: right bottom; to the top div, and the background image should start from the bottom and "overflow" out the top.
Example in shorthand:
.my-div {
background:#fff url(my-bg.png) right bottom repeat;
}
Some reference in case you'd like to explore this further:
http://reference.sitepoint.com/css/background-position
Related
I don't have an idea even where to start. Like on the attached image I want to make a centered div (yellow rectangle) and two img elements that, regardless of the resolution (black rectangle), are pointing to the specific area of this div (red arrows).
You can use position: relative for the specific element (that you want to point at),
put the arrows (their html code) inside of the elemnt (that you want to point at) and then you can use position: absolute; with top, left, right, bottom properties to position the arrows relatively to the center point.
I'm working on a simple design here, but i have a little issue.
Please have a look at the final design example here: http://ronnieaarebrot.com/demo/cms/
On the menu to the left and right, you can see a small border going from the top to the bottom (following the height of the center content).
How can i do this? i was planning on having a background-image with the small border on both sides, but how should i "calculate" the height of the center content? or make the two borders follow the height of the center div. This is a bit hard to explain.. but check the image and here is an html example of how far I've come. http://ronnieaarebrot.com/demo/cms_html/
Any good solutions?
The easiest way would be to contain the centre content in a div element and use the border CSS property to apply it. You can then adjust padding and margins to butt the centre and side elements against one another. Given the model, it seems like some padding on the centre element combined with almost no margins on the sides would do the trick.
If you put overflow:hidden on the #page_wrap element that it will extent to the height of its contents (the left, center and right parts).
So you can put the backgorund image (1px height repeated vertically) on that element and be sure that it will extend all the way down..
jsfiddle link: http://jsfiddle.net/djDWF/84/
The problem is, the inner container (text-padding) margin/width for the text/images is affecting the center background image. The repeated image that touches the footer does not extend to full height, and cuts off so the center and footer images do not match up (it is kind of hard to tell, but if you add or remove text in my jfiddle example you can see the center image change where it meets the footer.).
This is for a school project, and though I did not need to actually do this type of image background, I got this far so might as well continue. I don't want to use javaScript if possible because that is not part of the course yet.
I tried removing the text wrapper and styling each p tag individually but the same effect occurs.
I also tried mathematical combinations using line-height and margins. If I set the line-height to equal the right and bottom margins, and the left margin to equal the height of the footer then the effect works, but because my footer image is so large this is not a workable solution.
Mathematically I tried to keep the same ratios with the footer height but this did not work either (or else I did this wrong. I tried dividing each by the same amount.)
Is there any way to do this using only CSS and and not having to resort to tables?
So in short the problem is: You can see a line showing up at the footer separation because the repeated centre background isn't fully showing it's last repeat as the container isn't big enough.
The solution: If it doesn't need to be variable and you know how much content you will be putting in you can just set a height: Live example - http://jsfiddle.net/djDWF/85.
div#background-center{
background:url(http://i.imgur.com/gsNFa.png) repeat-y;
float:left;
width:700px;
height: 1604px; /* add this */
}
Obviously, pick whatever height is right to fit your final text.
With your current images there is no way to do this automatically without using JavaScript.
We suppose that we have the following image (is a single file with 4 radio buttons, seems same but it is for example, the icons could be different):
I saw, a time ago, how to get an image by specifing background-position in CSS style. How to do that ?
Means, how to get the icon from lower-right side in CSS instead splitting that file in four icons separately ?
Sorry if this question is obsolete but I'm beginner in CSS.
Have a look at the background-position attribute.
MDN has an article about it, including examples.
There are also a number of articles available about image-sprites with CSS.
Let's say your image is 100px by 100px and each button takes up 50px by 50px (including some possible whitespace).
Positioning for background images starts in the upper left-hand corner. So 0, 0.
Your CSS might look something like this:
background-image: url( ../images/button-sprite.png);
background-position: 0, 0; // top left
background-position: -50px, 0; // top right
background-position: 0, -50px; // bottom left
background-position: -50px, -50px; // bottom right
Not that the above shouldn't be used all together. You would use a separate background-position for each button.
Sometimes the positioning can seem counter intuitive since you'll usually be using negative values to get to the part of the image you need.
I tend to remind myself that if I were to add padding to an element it would push it down. Basically the same goes for background positioning. If we used 50px (positive) we would be "pushing the image down" instead of pulling it up to where we need it. Make sense?
you can adjust the sprite images in css through background-position in top,left, bottom,right.
In css background position:-
background-position:top,left refers with positive values like:-if need sprite image from top,left so you can give positive values to adjust the image like:-
background-position: 5, 10; // top left
so this mentioned above position will adjust the top & left background position.
And if you need bottom right background position so you can use the method
background-position: 0, -50px; // bottom left
background-position: -50px, -50px; // bottom right
so this mentioned above position will adjust the bottom & right background position.
So you are using Image Sprites.
With CSS, we can show just the part of the image we need.
#navlist{position:relative;}
#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#navlist li, #navlist a{height:44px;display:block;}
#home{left:0px;width:46px;}
#home{background:url('img_navsprites.gif') 0 0;}
#prev{left:63px;width:43px;}
#prev{background:url('img_navsprites.gif') -47px 0;}
#next{left:129px;width:43px;}
#next{background:url('img_navsprites.gif') -91px 0;}
Jangid's response is not quite correct.
With CSS, we can show just the part of the image we need.
This is not true; no CSS currently allows "clipping" of an area from a sprite image. All that is possible is to set the positioning as per the standard (left, top, right, bottom or offset).
You must make sure that if your graphics are going to be used as the background to a FLUID element (i.e. with an automatic height/width) that your images are spaced out well enough. If you do not space them out enough, then you may well see more than one image in the background, not just the part you want.
For example, your sprite contains 36 images, all 32px square, spaced neatly on a grid of 40px.
If the element to which you apply the background image is wider and/or taller than 40px, you will see part of other images as the background, which is obviously not satisfactory.
Hope this helps.
So, I have a layout where I have a repeating transparent shadow element set to the background of my parent container element. Set atop this, and supposedly hovering over the topmost edge of this background, is supposed to be an image with a frame and drop shadow.
However, because the image frame continues the parent element, the background image also continues upward. This is visible as the vertical lines above the top edge of the frame's drop shadow. See screenshot below:
This happens regardless if I use a transparent image or CSS3's box-shadow property. Setting negative margins doesn't work to bring it out of the parent element, nor does setting positioning as relative or absolute.
Normally I'd try to "fake" the transparency effect by setting a solid image at the top edge of the image frame, but there's a repeating stucco pattern set as the body background, which means there'd be a visible, unnatural-looking edge. (Insert cursing re: repeating patterns here.)
Any suggestions how I could prevent a parent element's background from showing through a child element, or offsetting the image frame somehow?
Many thanks!
I figured it out.
I was modifying the WordPress TwentyEleven theme, which has #primary and #secondary divs as floats atop the main content div. In order to make the background extend all the way to the bottom of the content div (I.e., past the two floats), I had overflow: set to auto.
Since I don't need to float anything (It's one column with no sidebar now), I removed both floats and removed the overflow declaration I had. Tah-dah, totally works now.
If someone else finds him/herself in this issue, have a look at my jsFiddle, which I used to figure it out. Thanks to Paker for the suggestion.