What the difference between background: no-repeat center center;
and background-size: cover; ?
Both achieve basically the same effect as a background image on my website. No difference as far as I can tell in results.
background: no-repeat centre centre;
is saying place a background image in the element, but only show one instance of it (no-repeat), try looking at thebackground-repeat property to see other options.
The CSS then says place the image in the vertical centre, and horizontal centre of the element. This is related to the background-position property.
It might be worth you trying to reducing the image size to something small 10px x 10px to see the effect of no-repeat, vs repeat-x, repeat-y and repeat.
background-size: declares how big you want the background image to be (this allows dynamic resizing of the image much like height and width in the html img tag), this is a property introduced in CSS3.
By default this is the background-image's default/native resolution. By using the be cover value you are saying scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area
I have put links on each of the properties so you can see the possible values for each. I recommend you look at all of the background-* attributes on w3schools. Look on the left hand side and they are all listed ;)
Alternatively if you're new to CSS, I would recommend this free course by Udacity which has plenty of video tutorials and guides you through HTML & CSS web development.
Related
Okay so I'm a very beginner on CSS and I don't know if the title of this question goes as what I want to know. I've this on the website that I'm making:
This square box contains the featured image of a product. Now the image is a rectangle and I want to show it in a square. It's okay if the dress cuts off but the face of the girl needs to be shown.So my question is there any way I can move this image center point to top-left? Please feel free to ask me if I've not made the point clear of you need additional information. This is the name of the div this image is placed in:
.attachment-post-thumbnail
{
/*what to write here*/
}
Based on the comments here is the code of this section:
I suppose the image is defined as a background-image for its container .attachment-post-thumbnail.
Most likely the background-image's size is set to cover at the moment, and the position to "center center" (i.e. horizontally and vertically).
So you can still use background-size: cover, but add background-position: center top; to your .attachment-post-thumbnail rule, which should align the top of the image to the top of its container. If that doesn't work, you can try to add !important (i.e. .attachment-post-thumbnail { background-position: center top !important; }) to enforce it.
I'm having a little problem with one of my background images in a div element. I'm using the following CSS:
.myBox
{
background-image:url('....');
background-repeat:no-repeat;
background-size:cover;
}
My background image is a picture with some people on it. Now, if I increase the width of my browser window, at a specific point, some of the people are cutted off (due to the automatic resize of the image with 'background-size:cover').
My question is: Is there any option (or jQuery plugin), to set a specific part on the background image that will be always visible on all window sizes and also fill the whole element?
There are a variety of solutions you could try; however, you might want to start with something simple like applying a background-position.
https://developer.mozilla.org/en-US/docs/Web/CSS/background-position
Using the background image of the group of people as an example, you might set background-position: top so that their heads never get cut off. You can also set the vertical and horizontal position in pixel or percent units.
try boostrap3 img-responsive class
.img-responsive Makes an image responsive (will scale nicely to the
parent element)
http://www.w3schools.com/bootstrap/bootstrap_ref_css_images.asp
Before asking this, I've been googling and trying various things myself....I know this can be accomplished, even though I haven't found a solution anywhwere.
This is the site...
http://spiralout.org
Notice the background image on the body is centrally aligned with the center of the logo (at 1440 wide), yet it's fixed when you scroll. That's great.
How do I make this responsive?
Right now, I'm using background-position at the various breakpoints, but it's not a real solution...for example. It's aligned right now at 1440, but go down to 1280 (the lowest width while keeping 4 columns) or further and you can see what I'm talking about. How do I get the background image to "follow" the logo div?
I've tried using percentages for background-position, but the logo is a different width, and inside the container so it's percentage from the left side of the screen will always vary proportionately to the background image.
I've tried using it as a background-image on the logo div but I don't seem to understand why it doesn't overflow to the top or left. Even if this solution worked, I don't get to keep the fixed position.
Any help is greatly appreciated.
I don't care if the cost/benefit of doing this is ridiculous, or if the solution has to be jQuery, etc. I just want to know how to accomplish it for my own sake :)
If I understood correctly, this is only what it takes me to do it:
body
{
background-image: url('whatever image');
background-repeat: no-repeat;
background-attachment: fixed;
}
For clarification look at the following images.
The first one is what I intend to achieve. It's a text input element with two background images, one on each side.
The second image is the sprite image containing the icons I need.
Now my question is, is it possible to clip a background image to only display a portion of the image? Furthermore is it possible to use it with multiple backgrounds?
1st image:
2nd image:
You're going to have to use two separate icon images to get this to work as you expect at the moment.
With CSS sprites, the background is clipped by the size of the element, there is an experimental CSS3 property called background-clip but it doesn't work the way you want (it will clip to the borders, padding or content of the box, not a specific dimension.)
So create two icons, use one on each side of the element with background-position.
As you can see here, with a spritesheet it will display the entire background image instead of the two icons you want. There is as yet no way to clip BG images in the way that you want. (one day, hopefully!)
You will need to use separate icons OR you will need to have 2 additional elements (for showing the icons) overlaid on top of the input box. The latter will let you use the sprite itself.
Set to your element (let's say div) yor big backgound picture and then adjust with background-position. Your image will be croped by your element size (ex. div).
in your case it will be around:
background-position: -87 -35;
and div size:
width: 28px; height: 30px
with CSS3 you can use multiple background images for an element. to show a specific part from the image you need to set its background-position property.
for example:
background-image: url(sprites.png), url(sprites.png);
background-position: center bottom, left top;
you can also define background-postion in pixels like:
background-position: -5px 10px, -35px 10px;
for more information check this link
I have a div with background image which contains 3 colors of the same icon
I shift the icon (background-position: top/center/bottom) according to what page is user viewing:
All works fine utill I zoom the page (ctrl + mousewheel) - than the background image seems to shift one pixel up or something, so i can see one-pixel line of the other icon at the bottom of my wrapper div:
Screens are from IE but it looks even more broken on iPad...
Any thoughts about what is causing this and how to fix it?
You can prevent any of the other images inside the sprite from showing by using diagonal sprites, or simply leaving some space between each image.
I shift the icon (background-position: top/center/bottom)
Use should use explicit px offsets instead. I suspect that will be slightly more robust when it comes to zooming.
There's nothing you can really do to prevent things sometimes being "1px off" when you zoom.
For example, if you have a 42px high element, and you zoom to 125%, then you have a 52.5px high element. The browser must round that number one way or the other.
Since those images are bitmaps, they always gonna look bad wen you zoom them.
You can do tree things:
Use a library like raphael JS and inlude your icons as vectors: http://raphaeljs.com/
Wrap your icons into spans for example and using a PX size and not EM's.
Leave more speace between your sprites
Try to make better resolution image and try it again.
It's better practice (and ultimately gives you much better control) to use pixel positioning rather than top/center/bottom when implementing CSS sprites, that way the image you want to show can be slightly larger (or with a little spacing) and therefore support that visual overflow you're seeing when you zoom. Your other images/states won't be affected by the neighbouring image/state because you're setting their position with a pixel-specific location rather than top/center/bottom e.g. (from article link below)
#panel-a {
background: transparent url(sprite.jpg) 0 -200px no-repeat;
}
#panel-b {
background: transparent url(sprite.jpg) -96px -200px no-repeat;
}
#panel-c {
background: transparent url(sprite.jpg) -172px -200px no-repeat;
}
#panel-d {
background: transparent url(sprite.jpg) -283px -200px no-repeat;
}
Not to mention that pixel positioning allows you to add additional states to your image without affecting other existing states if you add them onto the bottom of your image, for example. Of course that changes when you start adding images horizontally.
Here's a good reference: http://www.alistapart.com/articles/sprites