How can i center align background images in a td or a li which have different widths (from 25px to 30px). I tried everything but they won't align.
This is what i'm using:
.cIcons-26 {
float: left;
position:relative;
height:26px;
background:url("../img/sprites/icons/png") top left no-repeat;
}
.theIcon { background-position: -93px -1px; }
you should start by using the ../img/sprites/icons.png, not the
"../img/sprites/icons/png"
I don't understand :
widths (from 25px to 30px)
you whant to align both to have the image on the same place, or just the image centered for both?
If you use background-position: center; orbackground-position: 50% 50%; it should be centered. How it looks depends on de width and height of the outside content.
Related
I want to create a header with a fixed background. So I defined the following properties:
header {
margin: 0;
padding: 0;
width: 100%;
height: 300px;
display: block;
background-image: url('...');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-attachment: fixed;
}
Now I have the following problem. Currently, the background is centered according to the Screen Width and Height. Since the header is at the top, the actual background of the header is just the top of the image. In addition, the header image section changes every time I change the screen height, which is not my goal.
I want the image to be centered within the header (center of the image is at the center of the header, but only if I have not scrolled down). In addition, the header image section should only change if I change the header width, height or screen width but not if the screen height is changed.
You can rely on vh unit combined with some calc(). The center is initally 50vh and you want it to be 150px from the top so we need a translation of 50vh - 150px. You should also get rid of cover if you want the image to not change when the screen height change but it may not render like you want.
I replaced 300px with 100px for the demo.
.header {
height:100px;
border:1px solid;
background:
url(https://picsum.photos/id/1014/1200/800) 50% calc(50% - (50vh - 50px)) fixed;
}
.not-fixed {
background-attachment:initial;
background-position:center;
margin-top:20px;
}
body {
min-height:200vh;
margin:0;
}
<div class="header">
</div>
<div class="header not-fixed">
</div>
With the use of cover
.header {
height:100px;
border:1px solid;
background:
url(https://picsum.photos/id/1014/1200/800) 50% calc(50% - (50vh - 50px))/cover fixed;
}
.not-fixed {
background-attachment:initial;
background-position:center;
margin-top:20px;
}
body {
min-height:200vh;
margin:0;
}
<div class="header">
</div>
<div class="header not-fixed">
</div>
You can clearly see how the first image is centred exactly like the second one without fixed
To get more details about the caluclation check this: Using percentage values with background-position on a linear gradient (the section Combining pixel and percentage values)
Try to wrap the img (outside the header div) and header div and play with position relative/absolute to superimpose header on top of the image.
Having done that, you can use z-index to push image backwards
I am using CSS3 background-position to position a background image 3% from the right edge of the container. However it appears in a different position compared to if i have an equivalent container that is 97% wide with the background image right aligned. You can see what i mean at http://jsfiddle.net/deshg/9qveqdcu/2/, the logo in the black row is further to the right than the one in the green row but surely they should be in the same horizontal position?
If anyone could shed some light on why this is happening it would be massively appreciated.
For reference, code is below.
Thanks all!
#container {
width: 100%;
background-color: #ffcc00;
}
#d1 {
background-color: #cccc00;
background-image: url('http://jsfiddle.net/img/logo.png');
background-position: right 3% center;
background-repeat: no-repeat;
width: 100%;
}
#d2 {
background-color: #000000;
color: #ffffff;
background-image: url('http://jsfiddle.net/img/logo.png');
background-position: right center;
background-repeat: no-repeat;
width: 97%;
margin-right: 3%;
}
<div id="container">
<div id="d1">
abvc
</div>
<div id="d2">
def
</div>
</div>
The background image itself is being offset 3% of it's own width
From the docs:
Percentages refer to the size of the background positioning area minus
size of background image; size refers to the width for horizontal
offsets and to the height for vertical offsets
Here's an illustration when using 25% 25% (from CSS Tricks):
Background position is not working as you thinking.
It's different than if you, say, had an and positioned it at left: 50%; in that scenario, the left edge of the image would be at the halfway point. If you want to center it, you'll need to pull it back to the left (negative translate or negative margin)
For better understanding refer Link And Link
For what you trying to achieve you have to set
background-position: 96% 0px, center center;
Fiddle
I need to align an image just to the left of some text in an h1. So imagine it's something like:
[logo image] Company
So it isn't really a "background"--it's more of a foreground image.
This works if the h1 is left-aligned, using padding to offset the text from the image:
h1 {
background: url("logo.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
line-height: 70px;
padding-left: 80px;
}
However, I also want to center the text. I can do that as follows, but the image is still left-aligned:
h1 {
background: url("logo.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
line-height: 70px;
padding-left: 80px;
text-align: center;
}
In other words, the text is in the center of the screen, but the image is still on the left margin.
How can I keep the image centered, but just to the left of the text? I don't want to get too tricky with absolute pixel values, or a fixed-width h1, as this all needs to be relative and responsive.
I can't center the background image, as it needs an offset for the h1 text, which needs to scale.
Should I just slap an img tag in there and be done with this?
Another option would be to make the whole thing an image, but I want the text to scale--it's actually more of a caption than a logo.
[Note: I googled a bunch but most of the links deal with the "centered h1 over a large background image" scenario, which this isn't. Thanks!]
UPDATED
h1 {
background: no-repeat scroll 0 0 rgba(0, 0, 0, 0);
line-height: 70px;
text-align: center;
}
h1:before {
content: url("logo.png");
float: left;
}
DEMO: http://jsfiddle.net/4HQ8T/3/
I learned something new about the content CSS here, thanks!
Here's my approach:
h1 {
text-align: center;
}
h1::before {
content: url("http://placekitten.com/200/80");
display: inline-block;
vertical-align: middle;
height: 80px;
width: 200px;
margin-left: -200px;
}
Since you know the image dimensions, you can play with negative margin-left. As you can see, the text alignment is NOT affected by the image. Is that what you wanted to achieve?
Here's the jsFiddle demo
Since you know how big everything is you could try it with background-position porperty and then give % value to x.
h1 {
background: url("logo.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
line-height: 70px;
padding-left: 80px;
text-align: center;
background-position:20% (e.g.);
}
But to be honest, i would recommend using an image tag. You can give that image some responsiveness like done in bootstrap Bootstrap
there are several options already, and this one comes with an "IF" but i'm adding it here for variety.
If you can specify the width of the H1 tag then you can use padding and margin:auto to achieve this.
h1#elementID {
background-image: url("img.png");
background-repeat: no-repeat;
margin: auto;
width: 165px;
padding-left: 45px;
}
adjusting the width / padding to fit your text image. It may improve scaling if you use something besides px as your sizing mechanism.
I have a div with these properties
#content {
background-image: url('img/cbg.png');
background-position: center top;
background-repeat: repeat-y;
width: 960px;
margin: auto;
padding-bottom:50px;
margin-bottom: 20px;
}
The background only shows up for 70px (I think) and then stops, then the rest of the stuff inside the div just goes on down the page like normal. If I set display:inline-block, it works correctly but uncenters my div.
If you have elements in the container which are floating, it's possible that the floats aren't properly being cleared. If this is your problem there are a bunch of work-arounds - they're called "clearfixs".
One of my favorite write-ups was here. The css they used in this example was here.
div.container {
border: 1px solid #000000;
overflow: hidden;
width: 100%;
}
div.left {
width: 45%;
float: left;
}
div.right {
width: 45%;
float: right;
}
Well, you're doing repeat-y which means it'll only repeat vertically. If the background image is 70px, that would support the issue. Either use repeat-x or just repeat.
It wouldn't expand any longer because you have set your #content width to 960px in your browser window.
In the case of your image expanding only up to 70px, it is probably because that's the actual height of the image you've used. but mistakenly used repeat-y (repeat vertically).
Here's a simple concept in background-repeat:
If you want to repeat the image vertically, create an image that is horizontally wide.
If you want to repeat the image horizontally, create an image that is vertically tall.
This is something I've seen done by Grooveshark, which removes the need to use multiple images for expandable buttons and such.
Basically, an image like this
is used to produce buttons of any width smaller than the image itself. I assume this is done by somehow trimming out the middle, but I'm not sure how. I've looked over the CSS properties for it's usage here but can't seem to find out what's done aside from a 15px padding on either side.
Does anyone know how to replicate the same effect?
Edit: Just for clarity, I'm talking about cutting out the middle of a single button (I do realize I've given a picture of a sprite for 4 button styles, so it might be confusing when I say "cutting out the middle portion of an image").
What you're talking about is known as the sliding doors technique. By applying the background image to a container element to show the left edge, you can then apply the same image to another element that only shows the right edge.
For example:
.menu li {
background: url(button-sprite.png) 0 0 no-repeat;
padding-left: 10px;
}
.menu li a {
background: url(button-sprite.png) 100% 0 no-repeat;
display: block;
}
The list item shows the left edge of the image. The padding allows the left edge to show when another element is laid on top.
The anchor element shows the right edge of the image, and it is cropped to the required width of the text content.
CSS allows to move background image to any position.
In order to display part of the background you need to define CSS like the following:
.button {
background: transparent url(sprite.png) left top no-repeat;
display: block;
height: 40px;
width: 160px;
}
.button:hover {
background-position: left bottom;
}
.button:focus {
background-position: left center;
/* or
background-position: left -50%;
background-position: left -40px;
*/
}
#Pixelatron; i know you accept the answer but check this example may be that's help you & easy solution as well http://jsfiddle.net/sandeep/CQmJz/
css:
a{
text-decoration:none;
display:inline-block;
background:url(http://i.stack.imgur.com/gYknG.png) no-repeat 0 0;
position:relative;
padding:8px 0 8px 10px;
height:17px;
}
a:after{
content:"";
display:block;
background:url(http://i.stack.imgur.com/gYknG.png) no-repeat -490px 0;
position:absolute;
height:33px;
width:10px;
top:0;
right:-10px;
}
a:hover{
background-position:0 -34px;
}
a:hover:after{
background-position:-490px -34px;
}
I know of no way to manipulate images like that in CSS,
I think you'll find what they do is have the top image and bottom image always top and bottom, and just fill the rest with a middle image.
This can also be applied to each side, i'll add the CSS3 code, the CSS2 code should be easy to determine.
This would look like (CSS3):
.button_horizontal {
background: url(topimage) top left no-repeat,
url(bottomimage) bottom left no-repeat,
url(middleimage) top left repeat-y;
}
.button_vertical {
background: url(left.png) top left no-repeat,
url(right.png) top right no-repeat,
url(middle.png) top left repeat-x;
}
This would look like (CSS2):
.top {
background: url(top.png) top left no-repeat;
width:100%;
height:10px;
}
.middle {
background: url(bottom.png) bottom left no-repeat;
width:100%;
height:180px;
}
.button{
background: url(middle.png) top left repeat-y;
width:500px;
height:200px;
}
<div class="button">
<div class="top"> </div>
<div class="middle"><p>stuff goes in here :D</p></div>
</div>
That is called border-image.