What does this line mean in CSS ?
#ffffff url(https://cloud.githubusercontent.com/assets/1830348/15354890/1442159a-1cf0-11e6-92b1-b861dadf1750.jpg) no-repeat center center / cover
I am trying to figure it out. In W3S it says the following about the structure but I can't seem to see what the '/' and how do other attributes match this structure.
background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;
This line
background: #ffffff url(...) no-repeat center center / cover;
Actually is the shorthand version for:
background-color: #ffffff;
background-image: url(...);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
The / is valid CSS, see the formal syntax on MDN.
Well if you split it up, you'll see that it's reading the following in order:
background-color | background-image | background-repeat | background-position | background-size
According to the documentation - cover is a special value for scaling images:
The cover value specifies that the background image should be sized so that it is as
small as possible while ensuring that both dimensions are greater than
or equal to the corresponding size of the container.
Here's their sample fiddle
It means a white background is covered by this image; https://cloud.githubusercontent.com/assets/1830348/15354890/1442159a-1cf0-11e6-92b1-b861dadf1750.jpg, it is centrally aligned and will stretch to fit the width or height, whichever is largest, whilst mainting its proportions.
Related
Learning css, and I had a question about background-size: cover. Everything is working, but all guidance I look at tells me to also include background-repeat: no-repeat and background-position: center if I want a background image that does not repeat and is centered. Shouldn't background-size: cover be sufficient for centering the image and stopping it from repeating? I'd love to trim unnecessary lines, but before I do, I'm wondering whether someone with more experience can point out a misunderstanding or edge cases the additional rules take care of.
.main {
background-image: url("#");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
While the question looks opinion-based at first sight, and the answer seems to be "it doesn't matter", the reality is it does.
Take this example where you put a 100×100 image as a background in a 300×150 container.
In the absence of any other styles, the background-position is 0% 0% (see W3C) and it looks like this:
div {
width:300px; height:150px;
background-image: url('https://via.placeholder.com/100x100');
background-size:cover;
}
<div></div>
where the image is stretched to 300×300 to fit the div, and the result shows only the top half of the image.
Then, adding background-position:center results in this:
div {
width:300px; height:150px;
background-image: url('https://via.placeholder.com/100x100');
background-size:cover;
background-position:center;
}
<div></div>
where the middle half of the image is shown!
So the answer is: no, using background-size:cover by itself doesn't center the image, and you will need background-position to adjust.
Then there's the matter of background-repeat. As was mentioned in the comments, you can position a background image in such a way that it doesn't cover the container, even if background-size is cover. When you look at this fiddle, you will see two halves of the background image. Then if you add background-repeat:no-repeat to the css, there's only one half, and it will not cover the entire div.
So in that case, the answer is: it depends on your needs.
Hope this helps!
This is my page http://inogroup.it/preload/index.htm
Width of image boxes is responsive
How to set the height to be responsive too? Like 50% of the screen?
If I do this change:
.pattern{
background-size: contain;
margin-bottom:25px;
width:100%;
height:50%;
}
it's not working
Thank you very much!
background-size: needs to come AFTER background: I don't know if this is true of all browsers, but it's certainly a feature of Chrome that can drive you crazy.
This might be a bit late but in some cases it's necessary to add background-attachment: fixed; to get background-size: cover; working.
You need to use background-image property to define background image.
So this won't work
<img class="image" style="background: url(image.jpg);" />
.image { background-size: cover; }
because background is the shorthand code and takes default values for all omitted parameters.
But if you do this
<img class="image" style="background-image: url(image.jpg);" />
.image { background-size: cover; }
This wil solve the problem.
The height of the div can be set using css height property, or (by default) by the height of it's children elements. As the images are being set as background images the div is unable to determine the height it should be from that, and there is no pure css method of adjusting the height of a div to fit the dimensions of a background image. What you can do, is set the background images to be positioned in the centre of the div and have the background size as cover:
.pattern-container .pattern {
background-size: cover;
background-position: 50% 50%;
<!-- other rules here -->
}
Positioning the background images as 50% 50% vertically and horizontally centres it in the containing div regardless of the dimensions of the div. That said, the image itself may crop at the edges if the aspect ratio of the div is less than the aspect ratio of the image (e.g. if the div is 30px wide and 10px high, and the image is 40px wide and 10px high, then the image is going to lose 5px from both sides).
You can use ;
background: url('/path');
background-size: cover;
//in the style sheets
In some cases, there may be empty space in the edges of your image itself (e.g., an icon that is surrounded by 16px of blank white space on each side) making it seem like background-size: cover; is not working when it actually is.
Just a reminder to double-check your source image :)
The image boxes are responsive, but this does not mean that the corresponding images are. For a more fluid and dynamic structure, I recommend using a framework that does the work for you, like Bootstrap.
In the latest version of Bootstrap you could use the following code to make a responsive image (both in width and height):
<img src="images/my_img" class="img-responsive" />
In order for this to work, you will need to download the latest version of Bootstrap from their website (http://getbootstrap.com/) and reference in your code.
I have the following css background:#e0e0e0 url(images/bodybg.gif) top center repeat-y;
What I want to do is span the bodybg.gif to 100% but i'm not sure how to do that without losing the effect of that tag.
Thanks!
Change it to:
background:#e0e0e0 url(images/bodybg.gif) top center repeat-y 100%;
The number(s) or label for background size can be placed after the background repeat value in a compound background style. You may also want to change the background size to cover depending on your needs.
More from MDN
The background CSS property is a shorthand for setting the individual
background values in a single place in the style sheet. background can
be used to set the values for one or more of: background-clip,
background-color, background-image, background-origin,
background-position, background-repeat, background-size, and
background-attachment.
And on background-size
The background-size CSS property specifies the size of the background
images. The size of the image can be fully constrained or only
partially in order to preserve its intrinsic ratio.
[...]
cover: This keyword specifies that the background image should be scaled to be as small as possible while ensuring both its dimensions
are greater than or equal to the corresponding dimensions of the
background positioning area.
You can add background-size:cover; property
background: #e0e0e0 url(images/bodybg.gif) no-repeat center fixed;
-webkit-background-size: cover; /* for Chrome et Safari */
-moz-background-size: cover; /* for Firefox */
-o-background-size: cover; /* for Opera */
background-size: cover;
I used a background image with dimension 1120 X 714 pixels. The length and width ratio should be proportional w/ it's dimension so that the image will not look distorted.
The webpage that will use the background-image have a fixed width of 1024px. In my css, I have below:
body{
background: black url("background.jpg") no-repeat fixed center;
background-size: 1120px 100%;
}
The css above will make the length of the background-image 100%. Depending on the resolution or the browser dimension, the background-image will get distorted.
Width is not a problem here.
What are other approach for this having a fixed dimension of background image?
Should I use background-size: 1120px 714px;?
When you set the background-size: the first value is the width and the second one is the height.
So if you want to make the length of the image 100% then write:
background-size: 100% 714px;
I presume 714px is the height of the image...
You need not specify the background size at all. The code below should be enough.
body{
background: black url("background.jpg") no-repeat center center;
background-attachment: fixed;
}
I am having a great deal of difficulty with getting rid of the white space at the bottom when I apply a CSS3 gradient and the content has insufficient height for a scrollbar.
Such as here: http://womancareolympia.webs.com/
I have tried playing with setting both html and body heights to 100% or auto. I am able to make the gradient go to the bottom this way, but then when content requires a scrollbar, the content flows past the gradient.
Thanks for the help!
Add min-height: 100% to body.
Remove all instances of padding-top from body (or otherwise set it to 0).
Set top: 129px on #fw-container.
Set margin-bottom: 110px on #fw-container.
Add overflow: hidden to #fw-foottext.
(tested in Chrome+Firefox only)
I do think you should redesign your CSS to not use stuff like top: 100px and margin-top: -50px all over the place. There's just no reason for it.
I had the same problem. This can be resolved by adding the following properties to the body element (where the linear gradient has been defined)
body {
background-image: linear-gradient(
to right bottom,
var(--clr-primary-100) 0%, // Random colors
var(--clr-primary-900) 100%
); // Linear gradient
background-size: cover; // Add these properties to your body tag
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
}
I hope this helps. Let me know if you face any problems.