my Question ist about background-size. I wanne use with multiple values.
My Css Code is like this
background-image: url("../img/redlinie.png"), url("../img/umkleidekabine.png");
background-repeat: repeat-x, no-repeat;
background-size: initial, cover
For the first image redlinie.png i need no sizing at all. I just need sizing for the 2nd PNG. But here the Problem. It seems that it isnt allowed to have inheritor initial to be the first value?
Is there some kind of "trick" that i can set multiple background images with no background-size for the first png, but with contain for the 2nd PNG?
The inherit and initial keywords must appear alone. They cannot be used even in a comma-separated list of values.
There isn't a way to omit a component value and have the browser interpret it as an initial value, since background-size isn't a shorthand property, just a property that accepts multiple comma-separated values. Omitting any trailing values causes the browser to reuse the values that are specified, rather than the initial value.
Since the initial value of background-size is auto, you can simply specify that:
background-size: auto, cover
Related
Are CSS shorthands like background property working with a value-gap? I tried it with background. I wanted to set some background values static and the backgorund image dynamicly.
I did the following:
background: no-repeat contain center;
The background-image should be added later dynamicly. Did i something wrong? The shorthand like i used isn't working. Do i have to use the single attributes (background-repeat, background-size, background-position ...) to realise that?
The problem isn't the missing background-image. The problem is with the background-size and background-position values. Unlike the rest of the longhands, values for those two have a very specific grammar: background-position followed by a / followed by background-size. See the spec.
This is what it should look like:
background: no-repeat center / contain;
You can always set a background-image separately.
Some other shorthands do have mandatory values. For example, font requires a font-size and a font-family. background does not have any mandatory values.
so I have a website at (http://zoid-studios.github.io/) but for some reason the background which should be centred bottom below the title isn't there?
Here's my css:
.top-section
height: 100vh
background-image: url(../images/background.svg)
background-size: 100%
background-position: center bottom
background-repeat: no-repeat
Any help? The background shows when viewed locally.
The filename seems to be Background.svg and not background.svg.
URIs in CSS are mostly case sensitive. Your actual image name is Background.svg (capital B), whereas in the CSS it's background.svg. That's the problem.
All CSS syntax is case-insensitive within the ASCII range (i.e., [a-z] and [A-Z] are equivalent), except for parts that are not under the control of CSS. For example, the case-sensitivity of values of the HTML attributes "id" and "class", of font names, and of URIs lies outside the scope of this specification. Note in particular that element names are case-insensitive in HTML, but case-sensitive in XML. -W3C
Hi I have been stuck for a good amount of time with what I believe is a file path issue. I am creating a simple layout with a background image, the background image loaded as a http url but once I saved the file to my computer and altered the image I cannot get it to load. the file structure is as follows :
new project/css/images/index.html
the code:
header {
height: 450px;
background-image: url('../images/bg_blur.png'), center, center;
background-size: cover
}
I have run into the same issue with my logo image as well.
<div class="logo">
<img src="images/icon.svg">
</div>
As a novice, I have spent over a day trouble shooting this issue double and triple checking my paths, trying different methods. I have read multiple stack overflow answers and still cannot figure this out, I apologize for re-posting but I am at a loss.
Thanks,
Dave
If the file is in the exact same path then make sure that the filename of the images is exactly the same as well.
The background-image property enables you to provide an image for the
background,
it accepts only uri() / none values, you can't specified several values.
Instead try to use background shorthand property like this:
header {
background: url(../images/bg_blur.png) center center;
}
background shorthand property can accepts several values
<’background-color’> || <’background-image’> || <’backgroundrepeat’>
|| <’background-attachment’> || <’background-position’>
Initial value: n/a
the values should be separated by white spaces .
I agree with what Konrud said but also, you're missing a semicolon on the end of the final CSS rule you put, the background-size one.
background-size: cover should be background-size: cover;
I just come across one question in stackoverflow where user want to give an icon in html, but not using
<img src="smiley.gif" alt="Smiley face" width="42" height="42">
but, using class like
<img class="iconClass">
And css class is
.iconClass{
background:url('smiley.gif')!important;
}
I tried this, but this works for me, but wierd thing is that, the image is getting repeated till the width and height specified. Why this is happening, and how to solve it?
The reason why it happens is because background is a composite property which includes background-color, background-image, background-repeat, background-position, background-attachment. It means that when you set background alone without specifying background-repeat you simply overwrite previously defined rule, it just falls back to default value which is repeat. To fix it you should explicitly provide it:
.iconClass{
background-repeat: no-repeat;
}
background repeat is by default set to repeat. You should set:
.iconClass{
background-repeat: no-repeat;
}
or :
.iconClass{
background:url('smiley.gif')!important no-repeat;
}
I am learning design patterns using gradients in CSS3. But stuck up with something which I cannot able to understand how it works.
Actually, I am trying to understand patterns through the blog post of Lea Verou: Link.
Now, there's one pattern i.e., checkbox pattern CheckBox Pattern Demo.
There is a background-position: 0 0, 50px 50px; set in its CSS.
As far as I know we can set top right bottom left inside background position but they are set without comma separation.
So, Can anyone explain me how this exactly background-position works what else we can do with background position as this is something new. I only use to set image from CSS Sprites as of earlier but this is something new.
Thanks in advance !!!
background-position: 0 0, 50px 50px; is setting the value of the position for 2 different backgrounds. If you look at the sample, you will see that background-image actually has 2 sets of the same background.