I was wondering if it's possible to affect the positioning of the body; I have a 500 x 500 pixel image I have positioned in the center of the page, set not to repeat. I was wondering if it's possible to skew the positioning somehow so that it appears 20 pixels down from the center, as I have a larger header that overlays the background.
Any ideas?
Thanks.
If you are not particular about offsetting exactly 20px you can use a percentage to offset the y coordinate of the background. Here is an example:
background-position:50% 55%;
Here is a link for more info: http://www.sitepoint.com/blogs/2007/07/05/css-using-percentages-in-background-image/
Make your background image 40px taller at the top. That will shunt the image down 20px.
You could try hacking around with divs and margins but making the image taller has the same effect without causing hair-loss.
Investigate the use of background-position rule in CSS. It takes 2 values, separated by a space, like so:
background-position: left center;
or
background-position: 50px 100px;
They are in X Y order.
Related
I am having an issue getting my background image in my header to look right.
Right now, it is set to:
.hero {
background: url(http://wordstream-prod.s3.amazonaws.com/landing_pages/assets/img/e682443e-b4c0-483f-823e-8170fd4b71b2) no-repeat center center;
background-size: cover;
background-position: center;
}
Ive tried many variations of css to get it to work but cant figure it out. I would like the section to show the full image and keep showing it (not cut it off) as the browser shrinks. As of now, it is cutting on the top and bottom of the image until I shrink down and then it shows the whole thing. When I shrink further, it cuts off the sides.
When I switched the bg size to contain, I was left with a bunch of space around the image on small devices. Any help is appreciated.
Link: http://solatube.solabrite.com/premier-dealer
To do that, the aspect ratio of .hero needs to match that of the image. You can do this by applying a padding to the element with the percentage amount that represents the image aspect ratio. You can get that percentage by dividing the image height by it's width (500/1280 = 39.0625%).
Add this CSS
.hero {
height: 0;
padding-top: 39.0625%;
}
If you usebackground-size: cover, then the image will be scaled until it covers the whole available space.
Maybe try it with background-size: contain, then the image will be scaled until it covers either the x or y dimension of the available space.
BUT: If your image has the same aspect ratio as the area it is trying to cover, neither of this should be a problem though.
The div in which I have a background image is of unknown size. It can be 16px high, it can be 1600px, and anything in between. There's a background-image in there that's roughly 440px wide and 250px high.
When the div is higher than 250px, the background image doesn't scale. That's desired behaviour. So far so good.
If the div gets under 250px in height, the background-image is clipped. That's unwanted: I want it to scale to the div's smaller height.
How do I use css (or, if not possible, js) to have a background-image scale down when it doesn't fit its div, but never scale up when the div is bigger than itself? Essentially, I want to use background-size: contain;, but with a max set to the image's height.
I tried all kinds of cover and contains, but none have the desired effect.
This question does not help either, for I cannot set a max-height on the div. It contains content added by the site's editor. If that's a lot, all of it must show.
Here's a fiddle: http://jsfiddle.net/Bakabaka/2zetkrg0/
Is simply inserting an img inside the element you wanted to give a background to an option?
You can use max-width:100%; max-height:100%; on the image, so it will not exceed the container dimensions, but will still retain its aspect ratio and won't grow larger than its original size. Next, you could position the image absolutely and give it z-index:-1 so it'll be behind all the content and won't be affected by it. Finally, just give the image top:50%; left:50%; transform:translate(50%,50%); if you want it centered within its container.
Here's a demo: https://jsfiddle.net/ilpo/9dnqd6bc/1/
You could even set min-width and min-height, if you wanted to have a minimum size for the background.
Try this, hope it'll work :)
container{
background-image: url("/assets/pic.jpg");
background-size: cover;
background-repeat: no-repeat;
max-height:250px;
}
I am somewhat new to CSS and I have a problem that I can't seem to solve. I would like to have a series of divs on my page (stacked one on top of the other) and each of them should contain some text, and one or more images.
In particular, I would like the text to be left aligned, and vertically aligned in the middle, and the images should be right aligned, and the height of the div should be based upon the height of the images (which can be variable).
Basically each of the divs should look like so:
So far I have been able to get one or more of the requirements listed above, but never all of them at the same time. Is this actually possible with pure CSS, or should I just quit wasting my time and use a table?
Hi i have a solution for you chek this link http://jsfiddle.net/8mQc4/15/.
It's based use some properties like:
float and vertical-align.
This code allows flexible height and width of img, and also his container center vertically de text.Just try with more large texts or images.
Oh man I got a fun solution for you that may work but none the less is a solid idea!
If you set the image as the background you can avoid floating or positioning.
.section {
background: url(http://jpowell43.mydevryportfolio.com/flatDesign/images/tab-2.svg) no-repeat rgba(255, 255, 0, 0.4);
background-position: center right;
background-size: contain;
width: 100%;
}
The only thing that I may find to be a problem is the image size is based on the content inside of the div.
JSFIDDLE
This will allow the image to have a fixed size but! it does run into the problem of relying on the text for size over the image. :/
background-size: 80px 60px;
Fixed size
With the use of min-height: whatever; You can still achieve the desired result but not 100% the best.
min-height
I have a png of a simple rounded rectangle I made in Photoshop. I want the entire rectangle to show, however there is a little cropping on the top right, bottom right and bottom left corners of the image that make it square. The top left corner is the only one of the 4 that maintains that rounded edge.
I saved the image in photoshop and gave a little bit of extra room on all 4 sides - saving it as 870 * 335 pixels. My CSS looks like this:
#main {
margin: 8% auto 0 auto;
width: 870px;
height: 335px;
background: url(images/form.png) 125px 87px no-repeat;
position: relative;
}
The extra space I gave it in photoshop should show the whole rectangle correct? Or am I missing something critical? Thanks!
This part doesn't make sense to me:
background: ... 125px 87px ...;
You are forcing the image to a background position that will not allow the entire thing to show, if it is the same width as its container.
Try this:
background: url(images/form.png) 0 0 no-repeat;
There is nothing wrong with using background positioning on your bg image if you're correctly using sprites. However, are you trying to move the actual container (#main) left 125px and down 87px? Using background positioning that way would not achieve what you're trying to do.
If that's the case, try using padding instead. If not, let us know. Can you provide a link to your work? Firebug is a must-have if you don't have it.
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.