I have 5 stars on a line, and 2 kind of pictures empty and filled. I need to crop by css filled one, under empty, so that it looks like percent of fillness. But looks like I have problems with standart crop approach. Can you suggest ideas?
I’d use two nested containers and do it somehow like this:
#outer {
background: url('empty.png') top left repeat-x #666666;
position: relative;
height: 16px; /* set this to the height of the image */
width: 80px; /* set this to a multiple of the image’s width */
}
#inner {
background: url('filled.png') top left repeat-x #999900;
position: absolute;
top: 0;
left: 0;
height: 16px; /* same as above */
}
Set the width property on the inner container via inline CSS as needed:
style='width: 32px;'
style='width: 64px;'
(It doesn’t necessarily have to be a multiple of one image’s width.)
Bonus: If your images don’t use transparency, the fallback background colors of the CSS will make up for percentage bars if the images fail to load.
Related
I'm having some trouble getting a specific look that I am after.
I have the basic Wordpress Twenty-Fifteen theme applied and I'm trying to get a 200px wide red bar to appear down the right hand side of the screen.
The bar is made of a 200x1px image that is repeated.
The problem is:
A.) If I set this as a "Background-image" then the repeat works, but
I cannot get the image on top.
B.) If I set the image as an IMG
inside of a DIV, then I can get the image on top, but not to repeat.
Can anyone help me combine these 2 into one result, repeated image-y and image on top?
You can see my site here: http://u64.ca/
Try this, add it to your css.
This will affect everything the comes directly inside the #main tag.
#main > * {
margin-right: 200px;
}
Or you could apply a border right to the .site-content and lose the background iamge.
.site-content {
border-right: 189px solid #db0f12;
}
I'd use a pseudo-element something like:
main {
position:relative;
}
main:after {
content: "";
width: 189px;
position: absolute;
top: 0;
right: 0;
height: 100%;
background-color: #DB0F12;
}
I'm having a problem displaying a small image using CSS. I'm trying to show an icon sized picture (the picture has a few pixel border so it isn't edge to edge) but the image itself isn't centered when it's displayed and part of it is being hidden by the right and bottom shadows of the surrounding box. I like the look of the shadows but I think the image is so small, the shadows of the box can't be ignored in the sizing. Here's my CSS. Any ideas?
.delete_button {
background: url('trash_can.png');
background-repeat: no-repeat;
width: 20px;
height: 24px;
display: inline;
}
Try this, adjusting the background-position values until your image is positioned correctly:
.delete_button {
background: url('trash_can.png');
background-repeat: no-repeat;
width: 20px;
height: 24px;
display: inline;
background-position : -3px -4px;
}
Expanding on this a little further, you might want to try to add all your small images into one icon image in a matrix style. Then you can select just the image you want using the width, height and background-position. This will allow all your icons to be loaded at once as a single file, reducing internet traffic. When a "new" icon is needed, it will already be cached and immediately be available.
background-image: url("icons.png");
background-position: 30px 40px; /* Use these values to select your small image contained in your large image */
background-repeat : repeat;
width : 20px; /* or however large your icon is */
height : 24px; /* or however large your icon is */
This is similar to Google Chrome tabs style taken from Soda Theme (Sublime Text 2):
You see how it has 3 parts to it: rising edge, 2-3px flat middle, falling edge.
Q: How would I, in CSS, "repeat" the middle part and stretch the tab to fit the size of the string?
Image Dimensions: 42 x 28.
If it helps here is the snippet from the .sublime-theme file:
// Tab element
{
"class": "tab_control",
"content_margin": [12, 3, 12, 3],
"max_margin_trim": 0,
"hit_test_level": 0.0,
"layer0.texture": "Theme - Soda/Soda Dark/tab-inactive.png",
"layer0.inner_margin": [5, 5],
"layer0.opacity": 1.0
},
There are more than a few different ways to accomplish this affect, and it really depends on your preference. As you properly postulated, you need to think of this as 3 different parts. As such, the easiest way would be to split it up into 3 different images.
The solution also depends on what your HTML markup looks like. For example, if you only have:
<a class="tab" href="#">My Tab</a>
Then you have only one element you can style to make this works (which makes it much harder).
However, if you have a wrapping element around the tab:
<li class="tab">My Tab</li>
You can then use the LI element to help achieve the desired result.
Single Element
In my first example, you only had the single "anchor" element to work with. Examining your image you want to use for the tab, I can see that it has some beveling, and isn't a simple flat color, or a flat color with a simple border. That means we can't achieve that effect with straight CSS, so we will need CSS to tile the image.
You have two options.
Option 1
Split the image into two images, a left and right side, by dividing it right down the middle. Next, in your image editing application, extend your canvas out to the right by, let's say, 200 pixels (or whatever you think the max width of a tab will ever be). Finally, select the farthest right edge (this should be the middle of the tab) and stretch it horizontally all the way to the right border.
What you should end up with is the sloped left side, then an ~200pixel "middle area".
Now you have two images we will call tab-left-side.png and tab-right-side.png. With these two images, you can achieve the tab affect with the following CSS:
.tab {
background: url(tab-left-side.png) no-repeat 0 0;
overflow: hidden;
padding-left: 10px; /* width of the left edge of the tab, before the middle section begins. If you want more horizontal tabbing, add it to this value */
}
.tab:after {
content: ' ';
overflow: hidden;
width: 10px; /* width of the right edge of the tab */
background: url(tab-right-side.png) no-repeat 0 0;
}
Option 2
This option requires splitting your image into three images. You will have tab-left-side.png, tab-middle.png, and tab-right-side.png. As you can guess, you should split the image up into these appropriately.
Now, you can use the CSS:
.tab {
background: url(../images/tab-middle.png) repeat-x 0 0;
overflow: hidden;
color: white;
float: left;
margin: 0 10px; /* must be same as side widths */
}
.tab:after {
content: '.';
overflow: hidden;
text-indent: -999px;
float: right;
width: 17px; /* width of the right edge of the tab */
background: url(../images/tab-right-side.png) no-repeat 0 0;
}
.tab:before {
content: '.';
text-indent: -999px;
overflow: hidden;
float: left;
background: url(../images/tab-left-side.png) no-repeat 0 0;
width: 17px; /* width of the left edge of the tab */
}
Double Element
The double element is accomplished exactly the same way as Option 1 of the Single Element example, except that you don't have to use the pseudo-class selectors. If you are writing code that has to support older browsers that don't support pseudo-class selectors (or at least :before and :after) then this is your only option.
Again, you split the two images up into tab-left-side.png and tab-right-side.png.
Then, your CSS:
LI.tab {
background: url(tab-left-side.png) no-repeat 0 0;
overflow: hidden;
padding-left: 10px; /* width of the left edge of the tab, before the middle section begins. If you want more horizontal tabbing, add it to this value */
}
LI.tab A {
content: ' ';
overflow: hidden;
width: 10px; /* width of the right edge of the tab */
background: url(tab-right-side.png) no-repeat 0 0;
}
It's virtually the same CSS as was in the Option 1 example, except we changed the selectors.
Another way to achieve a similar result is to use multiple backgrounds and background sizing:
li.tab a {
/* using inline-block for simplicity you could easily switch to
display block and floats. */
display: inline-block;
overflow: hidden;
color: #fff;
padding: 0px 20px;
/* I'm using 75% sizing on my middle image which means my min and
max calculations work out as follows. This can change depening
on the images you use. */
min-width: 80px;
max-width: 160px;
/* height is obviously dependent on many things, I'm using line-height
to center my text but there are other ways. */
height: 26px;
line-height: 30px;
text-align: center;
/* depending on how your images are designed you may wish to have
the left and right images layered on top of the middle. To do this
just reverse the order of the background images. */
background:
url(middle.png) center bottom / 75% 26px no-repeat,
url(left.png) left bottom no-repeat,
url(right.png) right bottom no-repeat
;
}
This does have some prerequisites however:
This relies on relatively new css abilities, and as such wont work on older browsers.
You have to define a minimum and maximum width that your tabs can be.
You have to use two or three images, this wont work with a spritesheet.
You need a middle image which has to be rectangluar.
I am developing a website and the problem is that when I resize the browser (horizontaly), my HOME link from the menu gets broken. It's harder to explain in words what happens, so check it out here: http://www-user.tu-cottbus.de/~carbusor/Red%20Diamond/html/index.html.
The grey background is an image, having the up-right corner cut. After I cut that area, I made the area transparent. So, it is a trapezoid on transparent background.
My question is: what to do to prevent the trapezoid transforming into a rectangle when resizing?
If you want something like that.
Where the diamond is in between the two tabs then you should give particular width to your li elements(All).not use percentages for that. Like this
.menu > li#home {
display: inline;
float: left;
background: none;
background-image: url(../img/home.png);
width: 273px; /* same as your image size */
}
and also to both of your header images
img#logo {
position: absolute;
top: 10px; /* Change it as it sets in the gap */
left: 250px; /* Change it as it sets in the gap */
width: 140px;
height: 90px;
}
Instead of using an image, create the shape you want right in the file. Try this link:
Using the Area Shape Attribute
I created a <div> first thing in the <body> to draw a top line at the top of the page:
<body>
<div class="bordertop"></div>
.....
</body>
and the style:
body {
font-family: Helvetica, Arial, sans-serif;
-webkit-text-size-adjust: 100%;
margin:0;
}
.bordertop {
background-image: url(../images/top_border.png);
background-repeat: repeat-x;
}
However, the top_border image doesn't appear unless I write some text inside the <div> but I don't want to. How could I fix this?
Since the div is empty, there's no content to push it "open" leaving the div to be 0px tall. Set explicit dimensions on the div and you should see the background image.
.bordertop
{
background-image: url(../images/top_border.png);
background-repeat: repeat-x;
height: 100px;
width: 100%; /* may not be necessary */
}
You might need to set the css width and height of your <div> element to whatever size you want
.bordertop {
background-image: url(../images/top_border.png);
background-repeat: repeat-x;
width: 200px;
height: 100px;
}
Give the div a height:1px. That should work. Otherwise your div is 0px high, meaning you won't see anything.
You could also give it padding-top:1px
Another thing you could do is to set the background-image of the line on the body in your CSS. This is assuming the line is the entire width of the body.
See demo
As the answers above me suggest ^^' it's because it has virtually no size, you need either to put content inside to resize it or to set width/height or padding in css bordertop class, or you can put another empty inside it with set size. I was going to skip this answer since there are already answers but I just wanted to add that width/height is not your only option.
On a side note, oh man, people here posting so fast I sometimes wonder if its a race and what is the prize, there must be some, I guess helping other is itself great prize. :) When I was starting to type this there was no answer yet.
The best way I have found is:
for landscape:
width:100%;
height:0;
padding-top:[ratio]%;
for portrait:
width:[ratio]%;
height:0;
padding-top:100%;
You need to determine which side is longer and accept this dimension as 100%
then calculate [ratio] - percentage of shorter dimension in relation to 100% longer dimension. Then use the one of solutions above.
I had the same problem for quite some time, my solution was giving the style lines of: min-height. This opens the div to the height given if there is no elements inside. The height can get bigger with the more elements inside, but not smaller.
Example code:
.fixed-bg {
/* The background image */
background-image: url("img_tree.gif");
/* Set a specified height, or the minimum height for the background image */
min-height: 500px;
/* Set background image to fixed (don't scroll along with the page) */
background-attachment: fixed;
/* Center the background image */
background-position: center;
/* Set the background image to no repeat */
background-repeat: no-repeat;
/* Scale the background image to be as large as possible */
background-size: cover;
}
code gotten from https://www.w3schools.com/cssref/pr_background-attachment.asp
If it is the only div element in the body use the following style to to make it occupy the full-width.
.bordertop {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image:
url('../images/top_border.png');
}
I couldn't get my background showing in the div even with the width set up. Turns out i had to put "../" in the url section then it showed the picture i was struggling for quite a while.
left {
width: 800px;
height: auto;
min-height: 100%;
position: relative;
background-image: url("../img/loginpic.jpg");
background-size: cover;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
background-color: crimson;
}
Otherwise, you can just open a <p></p> and in styles, remove the default margin length, that's margin: 0; and add height: 0.1px which doesn't consume much space, so it'll work.
Note: it'll work properly until it's not zoomed out more than 50%, so make sure of the use case before you apply it to the body.