Hello everybody I have a problem with my code under, background-attachment fixed work only when I remove transform: rotate() in Firefox and IE instead working great in Chrome.
This is my HTML
<div class="para">
</div>
This is my css
.para{
z-index: -100;
height: 160vh;
width: 100%;
margin-top: -40rem;
background: url("back1.jpg") no-repeat center;
background-size: cover;
background-attachment: fixed;
-webkit-clip-path: polygon(0 22%, 100% 0, 100% 79%, 0% 100%);
clip-path: polygon(0 22%, 100% -800px, 100% 60%, 0% 100%);
transform: rotate(10deg);
}
So for being clear when I remove translate property is working everywhere when I add it is working only in chrome.
Related
I want to know how I can see the 100% of a picture in a header with CSS. The problem is that when I add the image to the header, the image does not resize, so I have to make bigger the header, but I don't want that.
.header{
background-image: url("../IMAGES/myimage.png");
width: 100%;
height: 100px;
}
Basically I want to achieve a header with an image resized, so I will be able to see the full image in a header with the dimensions that I want on the header. I am new in CSS. Feel free to ask any question. Thank you.
how I can see the 100% of a picture in a header with CSS
to see a background image in it's entirety, use
background-size: contain;
.header{
background-image: url("//placehold.it/300x100/cf5");
background-size: contain;
background-repeat: no-repeat; /* add this to not repeat it as pattern */
background-position: 50% 50%; /* center it? */
height: 100px;
}
<div class="header"></div>
than id needed you can additionally play with background-position to set it's position
If you want the image to fill the entire header area without distortions use
background-size: cover;
.header{
background-image: url("//placehold.it/300x100/cf5");
background-size: cover;
background-repeat: no-repeat; /* add this to not repeat it as pattern */
background-position: 50% 50%; /* center it? */
height: 100px;
}
<div class="header"></div>
if you don't care that the image distorts but you want the image to stretch-to-fill than use
background-size: 100% 100%;
.header{
background-image: url("//placehold.it/300x100/cf5");
background-size: 100% 100%;
height: 100px;
}
<div class="header"></div>
Without exactly knowing what you really want to achieve, I think you're trying to do, what the background-size property does.
With background-size: cover; you can force the background image to cover the whole area of the according element (like a div).
Your code example would look like
.header{
background-image: url("../IMAGES/myimage.png");
width: 100%;
height: 100px;
background-size: cover;
}
Just use:
max-width: 100%;
On the css of the image, that will make it be at max, the 100% of the width of the container.
CLARIFICATION
For an image inside the container header, max-width will do the trick. If it's a background image, background-size:contain will maintain the image INSIDE the header, while cover will expand the image to cover the whole header.
.header > img {
max-width: 100%;
height: 200px;
width: 600px;
}
.header2 {
background-image: url("https://source.unsplash.com/random/500x500");
background-size: contain;
background-repeat-x: no-repeat;
height: 200px;
width: 600px;
}
.header3 {
background-image: url("https://source.unsplash.com/random/500x500");
background-size: cover;
background-repeat: no-repeat;
height: 200px;
width: 600px;
}
<div class="header">
This is my header
<img src="https://source.unsplash.com/random/500x500" alt="and this is my image inside it" />
</div>
<div class="header2">
This is my second header with a background contained inside
</div>
<div class="header3">
This is my third header with a background covering it
</div>
I have following code running fine on modern browsers, except IE11 :
A simple pseudo-element animated to rotate indefinitely.
#keyframes spin{
0% {
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-moz-keyframes spin{
0% {
-moz-transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
}
}
#-webkit-keyframes spin{
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
.spin-container{
position: relative;
width: 400px;
height: 300px;
margin: 2em auto;
box-sizing: border-box;
}
.spin-container::after{
content: "";
position: absolute;
display: block;
opacity: 1;
border-color: rgba(0, 0, 0, 0.2) green green rgba(0, 0, 0, 0.2);
border-radius: 100%;
border-style: solid;
border-width: 10px;
width: 100px;
height: 100px;
bottom: 50px;
right: calc(50% - 50px);
border-radius: 100%;
-webkit-animation: spin 1s linear infinite;
-moz-animation: spin 1s linear infinite;
-ms-animation: spin 1s linear infinite;
animation: spin 1s linear infinite;
}
<div class="spin-container"></div>
I've been looking for a reason for weeks now, and I cannot determinate a property that can cause this.
I first suspected a transform-origin to not be the center of my pseudo-element spinner, but it appears that default value is 50% 50% 0 for every browser.
Then I looked into z-axis modification, or crazy inheritance, but I definitely found nothing.
Does anyone know why this flickers on IE11, and not on other browsers ?
IE11 has some issues related to hardware acceleration and CSS animation:
IE 11 Leaving Artifacts and not redrawing screen
CSS Transition Property not working for SVG Elements
Microsoft is only fixing security related issues in IE11, so this will most likely remain unfixed.
Im trying to get background image that scales whole image without depending on size of the picture and that fits all screens showing exactly same. I got it to work butafter i changed picture it doesent work anymore. Oh and im using Bootstrap 3.
heres my css:
.bg {
background-image: url(http://pikahinaukset.wpengine.com/wp- content/uploads/2015/06/coverphoto-e1433360465261.jpg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background: url(http://pikahinaukset.wpengine.com/wp-content/uploads/2015/06/coverphoto-e1433360465261.jpg) center center cover no-repeat fixed;
-webkit-box-shadow: 0 8px 6px -6px black;
-moz-box-shadow: 0 8px 6px -6px black;
box-shadow: 0 8px 6px -6px black;
}
Edited:
heres html http://jsfiddle.net/jw7L2s3y/
You are doing something redundant: background with center and all the stuff then you are doing background-image, background-repeat and all that. It is basically doing the same thing as background: . Remove one of them and i think it is working fine anyways.
Working Jsfiddle here
.bg {
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-image: url(http://pikahinaukset.wpengine.com/wp-content/uploads/2015/06/coverphoto-e1433360465261.jpg) ;
-webkit-box-shadow: 0 8px 6px -6px black;
-moz-box-shadow: 0 8px 6px -6px black;
box-shadow: 0 8px 6px -6px black;
}
I have a div rotated 45 degrees, with a border image on it.
In chrome and safari, it renders fine.
In firefox, nasty anti aliasing lines appear around the edge of the rotated div, between the edge of it and its border image.
Here's the simple HTML:
<div class="container">
<div class="corner">
</div>
</div>
and here's the CSS:
.container {
margin: auto;
width: 400px;
height: 400px;
background-color: black;
outline: 1px solid #333333;
position: relative;
overflow: hidden;
}
.corner {
position: absolute;
bottom: -68px;
right: -66px;
width: 86px;
height: 82px;
background-color: #F1F2F3;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
border-style: solid;
border-width: 14px 16px 28px;
-moz-border-image: url(http://s24.postimg.org/aq0pokg41/curve_border_grey.png) 14 16 28 repeat;
-webkit-border-image: url(http://s24.postimg.org/aq0pokg41/curve_border_grey.png) 14 16 28 repeat;
-o-border-image: url(http://s24.postimg.org/aq0pokg41/curve_border_grey.png) 14 16 28 repeat;
border-image: url(http://s24.postimg.org/aq0pokg41/curve_border_grey.png) 14 16 28 fill repeat;
-moz-background-clip: padding;
-webkit-background-clip: padding;
background-clip: padding-box;
}
and here's a JSFiddle. Look at it in firefox to see what I mean:
http://jsfiddle.net/uAF2u/
I've seen the tips for adding a transparent outline of 1px around the div, which would work if it didn't have a border image as in this case.
Anyone run into this before and know of a way to sort it?
Adding a translateZ seems to quick in a more accurate display and solve the issue:
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: translateZ(1px) rotate(45deg);
updated fiddle
I added the translate in the transform since firefox has been going un-prefixed for 10 versions now.
transform: rotate(0.0005deg);
FireFox 34
This works for me.
I had a very similar issue in Firefox, in which the transforming div was having a thin border outline, I fixed it by giving the div a transparent border.
May be this can help.
I have the same problem with Firefox and Safari. 1 thin line between sibbling divs.
Try also different combinations of:
border-radius: 2px 0 0 0;
or
border-radius: 0 1px 0 0;
on problematic element.
This seems to work primarily in Firefox and a bit in Safari.
In Safari you also have to cause overlapping positioned elements.
For some reason my CSS Gradient isn't working in Firefox (v10.0.1). The main background for the page is supposed to be a gradient from white at the top down to a blueish colour, but in Firefox instead of a smooth gradient I'm just getting two solid blocks of colour, one white, one blue. In Chrome and Safari (on iPad & iPhone) it works perfectly.
Here is the test url for the page:
http://testing.xenongroupadmin.com/bitesize/login.html
And here is my CSS code:
body { font-family: arial, tahoma, verdana, sans-serif;
background: linear-gradient(bottom, #FFFFFF 42%, #CDEDFA 6%);
background: -o-linear-gradient(bottom, #FFFFFF 42%, #CDEDFA 6%);
background: -moz-linear-gradient(bottom, #FFFFFF 42%, #CDEDFA 6%);
background: -webkit-linear-gradient(bottom, #FFFFFF 42%, #CDEDFA 6%);
background: -ms-linear-gradient(bottom, #FFFFFF 42%, #CDEDFA 6%);
background: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.42, #FFFFFF),
color-stop(0.06, #CDEDFA));
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
width: 100%;
min-width:1350px;
}
I've tried searching for an answer but can't seem to find an example which matches my current predicament.
Thanks everyone
try this... its cross browser even works in ie6
.bodyGradient {
position: absolute;
top: 0;
left: 0;
border-top: 3px solid #93ae59;
z-index: -1;
background: -moz-linear-gradient(top, #cfddac, #fff);
background: -webkit-gradient(linear, left top, left bottom, from(#cfddac), to(#fff));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cfddac', endColorstr='#ffffff');
background: -o-linear-gradient(rgb(207,221,172),rgb(255,255,255));
}
use "background-image" instead of "background", like this example from http://gradients.glrzad.com/
background-image: -moz-linear-gradient(bottom, #DBA803 13%, #FFCA1D 57%, #FFF338 79%);
write this in your css
background-image: -moz-linear-gradient(top , #FFFFFF 62%, #CDEDFA 89%);
Better way to define gradient for all browsers
body {
background: linear-gradient(top , #FFFFFF 62%, #CDEDFA 89%);
background: -moz-linear-gradient(top , #FFFFFF 62%, #CDEDFA 89%);
background: -webkit-linear-gradient(top , #FFFFFF 62%, #CDEDFA 89%);
}