I'm following a tutorial on front-end development, and I just wrote this ruleset for a header image:
header {
background-image: linear-gradient(#00000070, #00000070), url("../img/hero.jpg");
background-position: center;
background-size: cover;
height: 100vh;
}
PyCharm tells me the background-image and background-position properties can be optimized by transforming them to a shorthand form, but it doesn't provide specific advice on how. As I'm a beginner to CSS, I can't infer the problem, and w3schools.com didn't offer any shorthand. How else can I write this block to shorten it?
As defined by the W3C there should be a slash separating the backgound-size from the background-position and an comma to separate the image from your gradient:
background:
url("../img/hero.jpg") /* image */
center / cover, /* position / size */
linear-gradient(red, green) /* gradient */
;
In one line without comments:
background: url("../img/hero.jpg") center / cover, linear-gradient(red, green);
Try this
header {
background: linear-gradient(#00000070, #00000070), url("../img/hero.jpg"), center, cover}
Related
I want to use a GIF file as a background image on my web page but its not working when I style it in CSS.
CSS
Body{
background-image: url("1554323659436.gif");
background-repeat: no-repeat;
background-size: 50% 50%;
content:white;
width: auto;
}
I have ensured the GIF name is accurate, but the image isn't appearing in the page's background. Can someone help out?
Hope this answer helps. From my experience, gif images or images in general fail to appear when folder structure is not defined properly. Please check a standard format for attaching gif or any image type in html background
body {
background-image: url("[path_to_image]/1554323659436.gif"); /* The image used */
background-color: #cccccc; /* Used if the image is unavailable */
height: 500px; /* You must set a specified height */
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover; /* Resize the background image to cover the entire container */
}
Please note, all of the other attributes can be optional except the first one. Good Luck!
I'm porting a UI-based game from Unity to Cordova. In Unity, I was tinting predominately white images with various colors to reuse assets. The rough CSS equivalent seems to be using the [mostly standard] background-blend-mode property set to multiply and have the image in the background with the desired tint color as the bg color.
.tinted {
background-image: url('theimg.png');
background-size: 100% 100%;
background-color: #0f0;
background-blend-mode: multiply;
}
The problem is that it doesn't preserve the opacity of the image, namely the transparent parts become the tint color. The spec says something about blending from the top down so I thought it might relate to blending with the bg color, but it doesn't work if I layer a solid color (as a gradient) on top of the image either.
.tinted2 {
background-image: url('theimg.png'), linear-gradient(to bottom, #0f0, #0f0);
background-size: 100% 100%;
background-blend-mode: multiply;
}
Reversing the order of the background images or changing the blend mode to normal, multiply or multiply, normal doesn't work either. Any suggestions on how to do this correctly using CSS?
EDIT: As the answer mentions, the alpha aspect can be achieved using the mask property. I used a combination of the two techniques to get what I needed:
.tintedMasked {
background-image: url('theimg.png');
background-size: 100% 100%;
mask-image: url('theimg.png');
mask-size: 100% 100%;
background-color: #0f0;
background-blend-mode: multiply;
}
If I understand correctly what you're trying to do, then background blending is not the way, but masking.
div {
height: 200px;
background-image:linear-gradient(SlateBlue, Tomato);
-webkit-mask: url(https://cdn.pixabay.com/photo/2016/12/28/19/37/denied-1936877_960_720.png) top left no-repeat / contain;
mask: url(https://cdn.pixabay.com/photo/2016/12/28/19/37/denied-1936877_960_720.png) top left no-repeat / contain;
}
}
<div></div>
<h1>No stairway??</h1>
That's assuming your mask images are alpha transparent PNGs. you could also use luminance mask by setting mask-mode: luminance;
I'm working on a webpage, and I want to give it a background color with a gradient. From purple to light color.
However, the css is not working. If someone can let me know what am I missing and why is not working?
The background color is the same one as in this codepen. https://codepen.io/alexboffey/pen/NAkQLE?limit=all&page=2&q=calculator
Here the developer used scss.
here's the css
$purp: #542437;
$gold: #CDB380;
body {
margin: 0 auto;
height: 100vh;
display: flex;
background: linear-gradient(to bottom right, $purp 0%, $gold 100%) 100% no-repeat;
}
If you put the hex in instead of the $purp and $gold it works. Can it be an issue with sass not compiling properly?
body {
margin: 0 auto;
height: 100vh;
display: flex;
background: linear-gradient(to bottom right, #542437 0%, #CDB380 100%) 100% no-repeat;
}
<body>
</body>
So there's apparently a lot of work you have to do before SCSS will work in a local environment: https://medium.com/#ricardozea/sass-for-beginners-the-friendliest-guide-about-how-to-install-use-sass-on-windows-22ff4a32c1f7. Also, you have to save the CSS file with a .scss extension, I believe.
Here's a fiddle using straight hexadecimal color codes #542437 and #CDB380 in case anyone is curious: https://jsfiddle.net/ss20wh3f/2/
In Chrome right now, the background style spec:
background: color position/size repeat origin clip attachment image|initial|inherit;
But I cannot get the position/size fragment to work;
I should be able to say red top left 100% 100% no-repeat url() or red top left contain url() or even red contain url() -- but none of these render results.
Of course I can do it by specifying the individual background-* attributes. Is the spec broken or Chrome?? O_o
CSS background attribute syntax is like this:
background: [ <background-color> || <background-image> ||
<background-repeat> || <background-attachment> ||
<background-position>
] | inherit ;
example:
background: red url("../images/image.jpg") no-repeat scroll top left;
As for background-size attribute, it's from CSS3. You should use it separately.
The answer is in your question. You are missing the / between position and size:
background: #FFF url("/image/path/img.jpg) no-repeat scroll top left / 100% 100%;
^
Example:
html, body {
height: 100%;
min-height: 100%;
}
body {
background: #FFF url(http://placehold.it/400x400) no-repeat scroll top left / 100% 100%;
}
In CSS declaration for a selector is given as:
background-attachment: scroll;
background-color: transparent;
background-image: url(/images/ucc/green/btn-part2.gif);
background-repeat: no-repeat;
background-position: right top;
I want to optimize the code and change it to:
background: scroll transparent url(/images/ucc/green/btn-part2.gif) no-repeat right top;
My question is, Is this correct way and does it work in IE7/8, Firefox, Safari?
Yes it works. Take a look at point 6 here - http://www.domedia.org/oveklykken/css-shorthands.php
http://www.w3schools.com/css/css_background.asp
When using the shorthand property the
order of the property values are:
* background-color
* background-image
* background-repeat
* background-attachment
* background-position
background
{
background: transparent url(/images/ucc/green/btn-part2.gif) no-repeat scroll right top;
}
Yes, this is the correct way and it works in all major browsers. You can read more about the CSS background property which can be used to set all background-* properties together.
Update: Yes, the following rule will work:
background
{
background: transparent url(/images/ucc/green/btn-part2.gif) no-repeat scroll 20px 40px;
}
Except the browser will attempt to apply this rule to an <background> element in the DOM. And since there's no such element in HTML, the rule will never be applied to anything. :-) So you have to change the rule selector to select the container element you want to apply the background property to:
div#myDivIWantToSetBackgroundTo
{
background: transparent url(/images/ucc/green/btn-part2.gif) no-repeat scroll 20px 40px;
}
Btw, you can play with various values for the background property on the W3School site.