I am testing my website and I noticed that in Safari it looks different to Chrome and Mozila. Checked my html and css in validator and it all seems fine, so not sure why is this happening.
I validated html and css and found 1 mistake in HTML and 3 in CSS, although its a first attempt so its messy, i think, but what could make this happening?
Bellow is banner's css, can this linear gradient affect it?
Guys I'm total noob, its my first ever attempt, so when answer, please speak english language first of all, and than code-language :).
.main-header {
width: 100%;
box-sizing: border-box;
margin: auto;
height: 750px;
background:
linear-gradient(0deg, whitesmoke, transparent 70%, rgba(200,216,239,1)),
url('../img/MainGib.jpeg') no-repeat center;
background-size: cover;
text-align: center;
}
Not sure, but you might have to add css for -moz and -webkit:
-webkit-linear-gradient(0deg, whitesmoke, transparent 70%, rgba(200,216,239,1)),
url('../img/MainGib.jpeg') no-repeat center;
-moz-linear-gradient(0deg, whitesmoke, transparent 70%, rgba(200,216,239,1)),
url('../img/MainGib.jpeg') no-repeat center;
Related
I created my portfolio on Gitlab Pages. My style.CSS work partially. background-image: url(..) doesn't display in navigator. However, everything else seems to be working.
My content is in public/img/.png
I tried :
url(/img/.png);
url(public/img/.png);
url(/public/img/.png);
You can check my code here : https://medjaherirany.gitlab.io/resume/
Edit: I went into your code on the inspector, use background-image: url("../img/portrait0.png"); and it works. I will include a screenshot. This is used to go backwards in the directory.
I hope this helps.
As I can see in your CSS file you have used
figure {
background: url(/img/portrait0.png);
background-repeat: no-repeat;
background-position: 80% 111px;
height: 727px;
background-size: 690px;
background-color: #f2f2f2;
}
Change it to
figure {
background: url("img/portrait0.png");
background-repeat: no-repeat;
background-position: 80% 111px;
height: 727px;
background-size: 690px;
background-color: #f2f2f2;
}
Here actually your CSS says to look for img directory in the parent directory of "https://medjaherirany.gitlab.io/"
But your code is in https://medjaherirany.gitlab.io/resume That's why the browser was searching for "https://medjaherirany.gitlab.io/img/portrait0.png"
But actually it is in "https://medjaherirany.gitlab.io/resume/img/portrait0.png"
Here I changed the URL of background image and I got the image working.
Hope this helped you. Feel free to ask any further doubts.
Happy Coding
I'm trying to show a SVG image using mask but in Firefox it isn't appearing. My CSS class is as follows:
.myClass {
-webkit-mask: url('../img/arrow-down.svg') no-repeat 100% 100%;
mask: url('../img/arrow-down.svg') no-repeat 100% 100%;
background: rgba(67, 67, 67, 0.8);
width: 1.15em;
height: 1em;
}
And html code is just a simple:
<div class="myClass"></div>
In chrome, my masked arrow-down.svg is showing nicely but in firefox a div with specified background is appearing. Any idea on how to solve my problem?
mask: url('../img/arrow-down.svg') no-repeat 100% 100%;
is invalid. You can't have a mask that's an entire SVG file, it must have a fragment identifier that points to a mask element.
On top of that, Firefox currently doesn't support any additional parameters beyond the url so the no-repeat 100% 100% will cause it to fail.
For Firefox what you need is something like this:
mask: url('../img/arrow-down.svg#maskelement')
where maskelement would be the id of a <mask> element within the arrow-down.svg file.
For anyone who may still be wandering, the following works fine for me, by inserting the encoded svg string as a data uri (not base64!):
.my-class {
--svg-icon: url('data:image/svg+xml;utf8,...');
mask: var(--svg-icon) no-repeat;
mask-size: 100% 100%;
-webkit-mask: var(--svg-icon) no-repeat;
-webkit-mask-size: 100% 100%;
background-color: currentColor;
height: 1em;
width: 1em;
}
I was able to pull this off thanks to some nice tutorials/examples by Anthony Fu and Noah Blon:
Icons in Pure CSS
Iconify source code
Coloring SVGs in CSS Background Images
How can I tint a background image that has transparent sections?
I have tried using background-blend-mode: multiply with background-image and background-color. It works great for opaque images, but does not take the transparency into account, leaving a colored square around the image.
I am using svg images, and could switch to using <img> instead of backgrounds if necessary.
Example:
Left side is my goal, right side is what I get with background-blend-mode: multiply. The base image is a light gray circle, and I multiplied it with red.
Edit: I created a codepen to better illustrate my problem and what I have tried. http://codepen.io/anon/pen/QbbbpZ It has both the original image and my goal (made in Photoshop) on top, with examples of what I have tried below.
Edit2: I'm beginning to wonder if it is even possible to do this with plain HTML/CSS. Would using something like canvas, maybe with shaders, be more appropriate? Is there a library out there for it?
In webkit (Safari, Chrome and Opera) you can use -webkit-mask-image to do the effect.
html:
<div id="blend-mask" class="uiElement uiBG"></div>
css:
#blend-mask {
-webkit-mask-image: url("http://i.imgur.com/JLjAor5.png");
background-color: #f00;
background-blend-mode: multiply;
}
#goal {
background-image: url("http://i.imgur.com/JLjAor5.png");
}
#pageBG {
width: 400px;
height: 400px;
background-image: url("http://lorempixel.com/g/400/200/");
background-color: rgba(255,0,0,0.25);
background-blend-mode: multiply;
color: white;
text-shadow: 0 0 0.25em black;
}
.uiElement {
width: 100px;
height: 100px;
margin: 25px;
display: inline-block;
}
.uiBG {
background-size: contain;
background-repeat: no-repeat;
background-image: url("http://i.imgur.com/rkRJbzH.png");
}
Example working:
http://codepen.io/anon/pen/vONVry
if you want to make it work as well in firefox check this post maybe will help:
Is there a -moz-mask CSS property, like -webkit-mask-image?
As well you can check using canvas to tint, there is this post that maybe can help:
http://www.playmycode.com/blog/2011/06/realtime-image-tinting-on-html5-canvas/
In my code the background-position-y doesn't work. In Chrome it's ok, but not working in Firefox.
Anyone have any solution?
If your position-x is 0, there's no other solution than writing :
background-position: 0 100px;
background-position-x is a non-standard implementation coming from IE. Chrome did copy it, but sadly not firefox...
However this solution may not be perfect if you have separate sprites on a big background, with rows and cols meaning different things... (for example different logos on each row, selected/hovered on right, plain on left)
In that case, I'd suggest to separate the big picture in separate images, or write the different combinations in the CSS... Depending on the number of sprites, one or the other could be the best choice.
Use this
background: url("path-to-url.png") 89px 78px no-repeat;
Instead of this
background-image: url("path");
background-position-x: 89px;
background-position-y: 78px;
background-repeat: no-repeat;
Firefox 49 will be released—with support for background-position-[xy]—in September 2016. For older versions up to 31, you can use CSS variables to achieve positioning the background on a single axis similar to using background-position-x or background-position-y. CSS variables reached Candidate Recommendation status in December 2015.
The following is a fully cross-browser example of modifying background position axes for sprite images on hover:
:root {
--bgX: 0px;
--bgY: 0px;
}
a {
background-position: 0px 0px;
background-position: var(--bgX) var(--bgY);
}
a:hover, a:focus { background-position-x: -54px; --bgX: -54px; }
a:active { background-position-x: -108px; --bgX: -108px; }
a.facebook { background-position-y: -20px; --bgY: -20px; }
a.gplus { background-position-y: -40px; --bgY: -40px; }
background-position-y :10px; is not working in Firefox web browser.
You should follow this type of syntax:
background-position: 10px 15px;
10px is bounded to "position-x" and 15px bounded to "position-y"
100% working Solution
Follow this URL for more examples
Why don't you use background-position directly?
Use:
background-position : 40% 56%;
Instead Of:
background-position-x : 40%;
background-position-y : 56%
background: url("path") 89px 78px no-repeat;
Will not work if you want a background along with the image. So use:
background: orange url("path-to-image.png") 89px 78px no-repeat;
This worked for me:
a {
background-image: url(/image.jpg);
width: 228px;
height: 78px;
display: inline-block;
}
a:hover {
background-position: 0 -78px;
background-repeat: no-repeat;
}
Make certain you explicitly state the measurement of your offset. I came across this exact issue today, and it was due to how browsers interpret the values you provide in your CSS.
For example, this works perfectly in Chrome:
background: url("my-image.png") 100 100 no-repeat;
But, for Firefox and IE, you need to write:
background: url("my-image.png") 100px 100px no-repeat;
Hope this helps.
However this solution may not be perfect if you have separate sprites on a big background, with rows and cols meaning different things... (for example different logos on each row, selected/hovered on right, plain on left) In that case, I'd suggest to separate the big picture in separate images, or write the different combinations in the CSS... Depending on the number of sprites, one or the other could be the best choice.
Mine has the exact problem as stated by Orabîg which has a table like sprite which has columns and rows.
Below is what I used as a workaround using js
firefoxFixBackgroundposition:function(){
$('.circle').on({
mouseenter: function(){
$(this).css('background-position',$(this).css('background-position').split(' ')[0]+' -10px');
},
mouseleave: function(){
$(this).css('background-position',$(this).css('background-position').split(' ')[0]+' 0');
}
});
}
Having a small problem where the background image is not showing in any of the IE versions (except IE 9 I believe), not sure what is going wrong, any helps/thoughts/things I could try out?
Kind regards
http://www.trucknetuk.com/phpBB/viewforum.php?f=46 It is the Michelin banner(not the small sponsor) just above the new topic button
background: url("./styles/Owner_Fleet_Operator_MS/theme/images/michelinback.gif") repeat-x scroll center 0 transparent;
Change this:
background: url('./styles/Owner_Fleet_Operator_MS/theme/images/michelinback.gif')repeat-x scroll center 0 transparent;
To this:
background: url('./styles/Owner_Fleet_Operator_MS/theme/images/michelinback.gif') repeat-x scroll center 0 transparent;
The difference is a space after the closing bracket and before the "repeat-x". IE is much pickier than other browsers regarding syntax.
Your background shorthand is wrong, transparent needs to come first
#page-body {
background: transparent url("./styles/Owner_Fleet_Operator_MS/theme/images/michelinback.gif") repeat-x center 0;
clear: both;
padding: 4px 5px;
}
proper shorthand is : body {background:#ffffff url('img_tree.png') no-repeat right top;}
Not sure what you are trying to do with the scroll declaration
.button{
background: transparent url('../images/backrgound.jpg') no-repeat top center;
}
CSS Standard
background : color URL repeat-section and position
JPEG Images
Check whether images are of JPEG2000, if yes, then open any image editor and save it again with proper jpeg extension