I'm trying to build a tab menu system using a background image for the tab button.
The tab button image is 200px high and 40px wide. Since I want these tabs to be variable in height I wondered if the image being used could have 3 different positions inside the tab button to give it the rounded appearance of the top and bottom with the centre being of flexible height.
Here is my attempt. Its not producing the results I wanted. How should this work:
background-image:url(tabs-large.png);
background-position:0 0, 0 20px, 0 180px;
background-size:100% 20px, 100% 100%, 100% 20px;
Currently, you only have one background-image. This creates only one layer, so only your 0 0 position and 100% 20px size are being used and the rest are being ignored.
If tabs-large.png represents your entire tab image, you'll need to slice it into three parts: the top edge, the bottom edge and the middle part for example, then specify each part in its own image. You also need to ensure that the top and bottom edges don't repeat while the middle part does.
Here's what the code would look like:
background-image: url(tabs-large-top.png), url(tabs-large-middle.png), url(tabs-large-bottom.png);
background-position: 0 0, 0 20px, 0 180px;
background-repeat: no-repeat, repeat-y, no-repeat;
background-size: 100% 20px, 100% 100%, 100% 20px;
This way, each image corresponds to one position and one size, in the same order.
Related
What I tried:
#page-text {
background-image:
url(./images/paper-top.png),
url(./images/paper-bottom.png),
url(./images/paper-mid-2.png);
background-repeat: no-repeat, no-repeat, repeat-y;
background-position: 0 0, 0 100%, top 10px;
background-size: 100% auto;
}
Unfortunately the repeating part repeats all over #page-text and since paper-top is partly transparent, paper-mid-2 is visible in those transparent parts. For illustration notice the top corners of the paper (or see the live version)
You are probably better off dividing #page-text into three vertical sections. A nice way to do that without extra HTML is to use :before and :after on #page-text, holding the top and bottom background images and placed above and below #page-text respectively. That way, you can let the middle background image repeat as much as needed without interfering with the top and bottom background images. You also then don't need CSS3, thus providing a more backward-compatible solution.
I've got following setup
background-image: url(image1.png) , url(image2.png);
Idea is that image1.png repeats everywhere whereas image2.png should only start 200px from pages top and only repeat-x. I know you can position background like:
background-position: top left, left bot etc...
But how do I position it 200px from top of the page? and make it repeat-x?
You'll want to use the shorthand for background:
{background: url(image1.png) repeat, url(image2.png) 0 200px repeat-x;}
http://www.css3.info/preview/multiple-backgrounds/
I'm asking exactly what the title says...
#submenu-outer{
height:40px;
background: #F0EFE2 url(/template/img/main/intro12.png) 0px -240px repeat-x;
width:100%;
}
That code makes no sense; Any suggestions?
I want to repeat the first column of this line.
Every other line (of 40px) is null there (0px -240px)
If you use repeat-x as background position it will repeat the whole width of the image file. So if you have transparent pixels in your sprite after 40px, it's actually normal that you get some transparent background every 40px or so.
You could either make your repeating pattern take the whole sprite width, or put it in a seperate file.
I have an image with the dimensions 36px (height) and 32px (width). I'm accessing the first and last 5 pixels with
background-position: 0 0;
background-position: -26px 0px;
These are put into two different divs with a width of 5px. Altogether I have three divs (left, middle, right)
I now want to use the middle part of the image to repeat itself with a width of 280px. However, I only want to access the image region in between 6px - 26px.
IMAGE:
5px 22px 5px
=== =========== ===
What I want css to do:
DIV
5px 280px 5px
=== ============================================ ===
Note: The 280px are only the region of 22px repeated along x in the image above!
You'll have to change the layout of your sprite to something like the following:
-----------------------
-Left Part Right Part-
- Middle Part -
-----------------------
This way, you would change the y co-ordinate for the middle part of the background-image and it should repeat succesfully.
This is because you cannot repeat a specific part of a background-image. The width/height would have to be fixed in this case, as once you repeat a part, you would see the other parts of the sprite.
Could someone explain to me what this portion of code means?
repeat scroll 0 0 #F6F6F6;
I have googled a lot and only found syntax to this part
-moz-linear-gradient(center top , #FFFFFF, #EFEFEF)
My code:
background: -moz-linear-gradient(center top , #FFFFFF, #EFEFEF) repeat scroll 0 0 #F6F6F6;
Thanks!
These are actually part of the background CSS property, not -moz-linear-gradient. Have a look at that link, it should explain.
Basically:
repeat: The background repeats!
scroll: When the page scrolls, the background scrolls too
0 0: Says, "start the background from this point in the image".
All the extra stuff is probably unneccessary - they seem to be the same as the defaults.
background: <image> <repetition> [scroll] <pos-x> <pos-y> <color>;
image can be both an image url() or in some browsers, a gradient object.
repetition can be no-repeat, repeat-x, repeat-y or repeat (both) and means how to repeat the image if it doesn't fill the background.
if scroll is set, the background will stay fixed on the screen and not follow the text when you scroll.
pos-x and pos-y determines the offset of the background.
color means the color that used if the image value was invalid.
Those are additional options to the background: css shorthand.
The repeat repeats the image (although, -moz-linear-gradient doesn't support repeating).
scroll (as opposed to fixed) allows the background to "scroll"
0 0 are x and y coords for the placement of the top left corner of the image.
#F6F6F6 is a background color