I want to have a background image at the center of a div (the width is fixed, but the height is content dependent, so I wouldn't know the height.)
The image is the logo of a university that logs into the system. So Its width and height are also different based on the university.
How can I place the logo at the center of the div as a watermark without having two divs? Is it possible?
Thanks
K
CSS
#test {
background-image: url(path/to/image.jpg);
background-size: 50% auto;
background-position: center center;
background-repeat: no-repeat;
}
This should put an image centered in it's parent element at a width that will be whatever percent you set. The image will be a background image. I believe IE8 and under will not display as you want. You will need to alter the image as I don't think you can adjust the opacity of a background image via CSS. So make the image semi-opaque.
Here is a fiddle: http://jsfiddle.net/MWvCA/
The other option is to add an absolute positioned img to the div, center it, and adjust the opacity via CSS, but if I were you I would just adjust the image.
Related
I want to place an image as a background, I've also apply the
background-size:cover
for no-scroll. The problem is when i view the page at different resolutions the whole picture (full width) showed up instead of the center portion (blue bordered area), is there any possible way that I can set the image as background with no scrolling and image will remain center aligned.
this image may describe more specifically what I'm trying to ask. I just want to fix this image at any resolution but the blue bordered area must be remain center aligned,
You can combine background-position: center center with background-size: cover.
use:
overflow: hidden;
max-width: 1200px; // change the width
and add to the background :
no-repeat 50% 0;
I have a header image located at ink.talentosoft.com take a look if you can.
The header image is exactly 388 px in height. I want the background of this div to be fully displayed. Currently the set up for the div is as follows:
background: url(http://ink.talentosoft.com/wp-content/uploads/2013/05/header.png) no-repeat 100% center;
Because the contents of this div is smaller than the background, the rest of the image is cut off.
How may I extend the full height of this image?
background-size: 100%;//did not work
Obviously you could do height:388px; for your div.
You should use
background-size: auto 388px;
on my homepage I display images in a 100px tall DIV.
The images are all over 100px+ so I use a div with the CSS property of overflow:hidden
to easily trim off the extra pixels.
But the images don't look so good.
Is there a way for me the center them vertically?
This would make the "trim off" be the same for top and bottom.
http://billetagent.eweb703.discountasp.net/Arrangementer.aspx
thanks!
You could put the image as a background-image on the <a> element with background-position: 50% 50% (centered vertical and horizontal).
<a ... style="background: url() no-repeat 50% 50%;"></a>
(Provided that the images are at least 100px tall. Otherwise they will not align to top top.) (Oh, you've already stated this. Great.)
On the now empty <a> element you can furthermore add display: block; height: 100px to have a clickable area of the same size as the (visible) image.
Is it possible that I can create a margin/padding between the background image and container that holds the image? In other words, I need to move the background image sprite_global_v3.png 20px to the right of the left border of #nav-primary.
Here the position "0 -470px" are used to pick the right picture from sprite. And I don't know how to apply a padding/margin of 20px in order to achieve what I expected.
#nav-primary {
background:url("http://static02.linkedin.com/scds/common/u/img/sprite/sprite_global_v3.png") no-repeat scroll 0 -470px transparent;
}
<div id="nav-primary">
<span>Hello World</span>
</div>
Based on http://www.w3schools.com/css/css_background.asp
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}
If I understood correctly, the background-position is used to control the alignment of the background image. Now I need to control alignment and choose the right picture from a sprite. I don't know whether or not I can mix it together.
Thank you
No, there is no concept of padding/margin for background images.
Options:
1) Positioning the background (as already stated). The key is that the container would have to have fixed dimensions.
2) Nest a container inside a parent container. Parent gets the padding, child gets the background image.
Given that you are trying to do this with a sprite, both are likely options since a sprite has to have a fixed sized container anyways. For option 1, you'd need to make sure your sprite images have enough white space between each other in the file.
No, you can't mix them together.
You can place an image at an offset from the corner:
background-image: url('img_tree.png');
background-repeat: no-repeat;
background-position: 20px 20px;
But you can't combine this with the sprite techinque. This technique uses the fact that the element is smaller than the background image to clip the image, but you can't clip the background image 20 pixels into the element.
You can specify the exact position of the background to the pixel.
If you wanted a 10-pixel gap on the left-hand side, for example:
#nav-primary {
background:url("http://static02.linkedin.com/scds/common/u/img/sprite/sprite_global_v3.png") no-repeat scroll transparent;
background-position:10px 0px;
}
That being said, it looks like you already specified it to be set at (0, -470). Does that not work?
The background-position property allows for percentages and values, e.g. "20px 0", which I think is what you're looking for.
Say I have an image that has a width of 2000px. The snazzy design part of my image starts at about 600px in and is 900px wide or so. What I want to do is to use this image as the background on a website and have the snazzy design centered and when you stretch the browser window, reveal the entire image still keeping the snazzy design centered. How can I do this? Also, putting the snazzy part in it's own layer above the background is not an option.
Thanks
You can center the background image using the CSS background-position attribute:
background-position: top center;
To add to Guffa's answer, you can also use percentage and pixel values to position your background image:
/* Centered vertically, 200px down from the top of the page */
background-position: 50% 200px;
/* 30px from the left edge, -10px from the top (shifted up beyond the top) */
background-position: 30px -10px;