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.
Related
I'm not quite sure how to do this. I have seen people say use linear gradient in the css under the background image url and add the rgba values but for some reason when I put linear-gradient in the css it doesn't work. When I type the code into my cms, it is white, while all the other working properties turn grey. (just to explain that it doesn't work) Here is my code. Hope this makes sense.
.topInfo {
background-image: url('/CMS_Static/Uploads/313864614C6F6F/miami beach-1.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
height: 684px;
linear-gradient: linear-gradient(rgba(#F9774C, .75), rgba(#802A0C, .85)),
}
You can do it by setting 2 backgrounds on the same element. First background needs to be a little transparent, so that you can see the other one below the first one. Linear background can also be a background, just like regular image. You can set multiple backgrounds with ,.
Example:
body {
background-image:
linear-gradient(0deg, rgba(0,255,0,0.4), rgba(255,0,0,0.2)),
url(https://upload.wikimedia.org/wikipedia/commons/4/41/Sol454_Marte_spirit.jpg);
}
You can see full example in action here.
You can read and learn about background-image here.
You can read and learn about linear-gradient here.
linear-gradient is the property of background it should be something like
background: linear-gradient(rgba(249, 119, 76,.75), rgba(128, 42, 12,.85));
Refer more at https://www.w3schools.com/css/css3_gradients.asp
This is definitely possible, though not exactly the way you are trying to approach it. Check out this answer for applying multiple backgrounds to an element. Note that the order in which these backgrounds are applied has an effect.
Pay attention to your color definitions. rgba accepts colors defined in RGB, not HEX values like you use. I converted your colors to RGB values:
#F9774C = rgb(249,119,76)
#802A0C = rgb(128,42,12)
Adding your desired alpha values to these and changing the format from rgb to rgba, your linear gradient is:
linear-gradient(rgba(249,119,76,.75), rgba(128,42,12,.85))
Check it out here, but please give the answer linked above a read. It has useful information on browser compatibility and fallbacks.
Simply put, what's the best way to simply add a store-wide background image in the RDW theme ?
I'm using the default RwD theme in Magento 1.9.2, and I can't seem to figure out how to just add an image, not insert it in CMS, not a block, just a static background image on the whole page instead of the default white colour.
I've been trying to add it, like you usually would, in styles.css
body {
margin: 0;
text-align:center;
font-family:futura;
background-image:url(../images/Fond-Portail.jpg);
background-size: 100% 100%;
background-position: center top;
background-attachment: fixed;
}
The URL should be correct, this is usually a very simple task but I think RWD makes it harder. The only solutions I've seen to this problem, while searching, were to use a community module, is it really that complicated or am I missing something ?
You can use the background size property like this. background-size:cover; and you can also try background-size:contain; if it works for you.
Forgot about this question! Here's how I fixed it :
First of all don't forget (like I did) to remove lines like background: #FFFFFF;, otherwise the color will be overlayed on top of your image.
Turns out you have to change this at multiple lines for RWD's styles.css,
I added the background image in BASE body{},
removed the colored background in RESET body{},
and changed the background color and size of GLOBAL .wrapper{} (depending on the way it's configured for you, I changed the width and made it partially transparent).
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
My HTML document contains #victimDiv thats background image property is set to:
-webkit-linear-gradient(-75deg, black 10px, #4AC0F2);
After I load #victimDiv with ajax call and its height prolongs, gradient gets longer as its length is defined in percentage instead being fixed in pixels.
maybe it's because you apply css length parameters on an element when the element is not already in the DOM. this is not possible... try to do it with the css embedded in the respective html tag.
I misunderstood syntax meaning:
pixels or percentage after color means that color starts from there not ends. Kind of a weird name color stop???
Anyway right syntax for what I wanted to achieve is:
-webkit-linear-gradient(-75deg, black, #4AC0F2 10px);
Good night, and good luck! :)
It is quite popular question, I think.
I am looking for crossbrowser CSS solution for black opaque layer. Which will hide all stuff under it.
My example: http://jsfiddle.net/pb9jv/. But it is not crossbrowser. (IE 6+ is the pain in my ass).
Try adding this the the CSS style you apply to the fadeover (In your example : #black)
filter: alpha(opacity = 50);
EDIT : You want it to be opaque or transparent like the given example?
Have a look at this, it does work on IE 6
Use a simple div and apply a background-image to it with a 1px size image of your color. Just a simple png with your black color.
.overlay
{
background-image:url('myoverlaycolor.png');
}
It will repeat itself across the complete div.
Edit
Come to think of it, IE6 doesn't support png right? Maybe you could just take a look in sources like slimbox.
David is right - that is the syntax.
However your fiddle will not work in IE6 since you have no size values.
Here is an example:
http://jsfiddle.net/4Aw4Q/
If you remove the sizing the element will not show.
#Marnix If you use proper filters IE6 does support PNG. Try this for starters
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/pngimage.png', sizingMethod='scale');
Set the above filter in as a class for the span or div element containing the image and make sure the width and the height of the image are set.
Set this class also for the span or div element containing the image.
.PNGTrans img{
background: transparent;
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
}
So the above to classes will have to be called for the parent containing the png image.
#fl00r : Have a div element with higher z-index with screen.width and screen.height as its widht and height respectively. You can either use an image or you can play with opacity filters.