background:#777777 none repeat scroll 0 0;
the 5 attributes it includes are background-color,background-image,background-repeat,background-attachment and background-position.
But I don't understand what background-attachment and background-position mean?
Can someone give an explanation?
EDIT:are background-repeat,background-attachment and background-position useless if background-image is none?
If you've ever seen a web page where the text on the page scrolls with the scrollbar, but the background remains stationary, that's
background-attachment: fixed;
Background-position defines how you position the image inside of the background of the element. For instance, if you have a small drop shadow image that should only repeat along the bottom edge of your element, you could use:
background-repeat: repeat-x;
background-position: bottom left;
Or if you had an image you only wanted displayed in the bottom, right hand corner of your element:
background-position: bottom right;
background-position also accepts pixel values in the format:
background-position: xpos ypos
for finer grain control.
background-attachment
background-position
W3Schools has a pretty good explanation of these elements:
background-attachment: determines whether the background is fixed or scrolls with the page.
background-position: determines the position of the background in relation to the page (values like top center, bottom right, pixel values, etc.)
The background-attachment property sets whether a background image is fixed or scrolls with the rest of the page.
scroll
The background image scrolls with the rest of the page. This is default
fixed
The background image is fixed
inherit
Specifies that the setting of the background-attachment property should be inherited from the parent element
The background-position property sets the starting position of a background image.
Note: For this to work in Firefox and Opera, the background-attachment property must be set to "fixed".
The background attachment specifies if the background scrolls along with the webpage.
background-attachment: fixed; would fix the background so even if a user scrolls down the webpage for example, the background wouldn't move.
background-attachment: scroll; would make the background scroll with the page.
More info here: http://www.w3schools.com/Css/pr_background-attachment.asp
The background position takes 2 arguments; the x position and the y position. It specifies where the original background image will start to be displayed. The origin is on the top-left of the container.
More info here: http://www.w3schools.com/css/pr_background-position.asp
From W3 background-attachment
The background-attachment property
sets whether a background image is
fixed or scrolls with the rest of the
page.
Lets say you have a background picture, like here (look at the pretty mountains.)
When the background-attachment property is set to "fixed", then when you scroll the page, the background remains, uh, fixed. The contents of the page scroll, but the background picture does not.
Compare to this page. See the background doodling on the sides? When you scroll down, then those drawings also scroll with the page. This is an example of the "scroll" choice - which is what you have in the CSS snippet you posted.
background-position: is used to define the anchor point of the image on the screen like top left or bottom right
background-attachment defines whether the background image will scroll with the contents
Related
My HTML contains several 100% width divs, which have background-image rules applied to them.
Each surrounding canvas div is position relative, while the background-image divs are position absolute.
There is a background-size: cover; applied to each background-image div, but this does not work for some reason.
Please check this page for example:
https://mitteiler-os.de/
The first two "slider" sections with background images applied show white bars to the left and right. These two sections have 1980x1000 px images applied to the background-image CSS, while the rest of the sliders further down have wider images applied to them.
Somehow I do not understand why background-size: cover is not working right here.
Any ideas?
I believe that it does work for me. !?
can't see any white bars on the left or the right.
One Side note, the page doesn't really adapt nice to smaller screens (mobile)
Why is background-size:cover different if background-attachment: scroll or background-attachment: fixed used?
Example:
http://jsfiddle.net/enriqg9/Yn43U/
The difference isn't really in background-size: cover. The difference between background-attachment: scroll and background-attachment: fixed is that
"...scroll means that the background is fixed with regard to the element itself and does not scroll with its contents. (It is effectively attached to the element's border.)
"...fixed means that the background is fixed with regard to the viewport. Even if an element has a scrolling mechanism, a ‘fixed’ background doesn't move with the element."
as MDN says. So you'll see in your fiddle that the background-attachment: fixed background doesn't remain in its containing element <div id="two"> border. It is, instead taking on the fixed point of absolute positioning 0, 0 in the entire body's background.
In essence, background-attachment: fixed is overwriting background-size: cover and not allowing the latter style to take effect.
When you assign background-size:cover to a background-attachment: fixed item its container will be the actual view port the item is sitting in. In your case the cat image is stretched to fit the total width of the fiddle result box. The reason why it is this way might be because since it applies position absolutely to the viewport it also gathers the size required from the viewport.
Can someone explain what "bottom center scroll" means in the below style
background: #f5f5f5 url('/img/bg.jpg') no-repeat bottom center scroll;
It's used here http://startbootstrap.com/templates/grayscale/ to fill the background. If I remove "bottom center scroll" the image will not scale with reduced browser size. I'd love to understand what exactly the value is doing and why it is important to how the image scales
You can find below some info about that..
Position : Specifies the position of the background images.
Repeat :Specifies how to repeat the background images.
Attachment : The background-attachment property sets whether a background image is fixed or scrolls with the rest of the page.
Ref for more details : http://www.w3schools.com/css/css_background.asp
The background bottom centre property specifies the positioning area of the background images.
The background image can be placed within the content-box, padding-box, or border-box area.
I have a large background image that I want to use in a hero element in a site banner.
The bottom of this photo is the crucial part, so I always want it showing. background-position will align a smaller photo to the bottom of a larger element, but when the background photo is larger than the element, it keeps the top of the background-image aligned with the top of the container. I want to keep the bottom of the background-image aligned with the bottom of the container.
An example: here's a background image; I want to make sure the bottom (some mountains) always show up in this jsfiddle.
Remove background-attachment: fixed; from your hero class.
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.