I have a unique problem which I hope someone can help fix.
I have tweaked my WordPress header on CSS, canceling the background color, so that the background image can be seen instead (it is a white .png image with transparency at the bottom edge so that there is a pattern rather than a straight line at its bottom border).
see http://m.piccolo.co.il or https://piccolo.co.il (2 different websites).
the header's background-image has position: fixed (#masthead)
This works fine when you scroll down on a browser such as Chrome, or Explorer. However, when I scroll on IOS mobile, at some point the header's background-image disappears, leaving only the toggle bar and logo fixed.
screenshot from IOS10 - Iphone SE
This is the header's CSS:
#ht-masthead{
background-image: url('http://www.piccolo.co.il/wp-content/uploads/2017/04/ht-mast.gif');
background-repeat: no-repeat;
background-size: 100% 100px;
background-attachment: fixed !important;
width: 100%;
position: fixed;
top: 0;
z-index: 99;
transform: translateZ(0);
-moz-transform: translatez(0);
-ms-transform: translatez(0);
-o-transform: translatez(0);
-webkit-transform: translateZ(0);
-webkit-font-smoothing: antialiased;
}
Any suggestions would be great, I am getting very frustrated with this.
Seems like I managed a "patch solution" using the CSS after tag.
I gave #masthead:after these attributes forcing the torn pattered background there.
I applied it for now only to m.piccolo.co.il, like this:
#ht-masthead:after {
content: '';
position: absolute;
left: 0;
height: 100px;
right: 0;
background-repeat: repeat-x;
background-size: stretch;
background-image: url('http://m.piccolo.co.il/wp-content/uploads/2018/05/ht-mast2-1.png');
}
Any thoughts?
Thanks
Related
Hard to explain what I'm seeing. Included a fiddle to show. When I'm hovering over some of the divs, there is a 'glitch' on the edge of other divs in the grid. Almost seems as if the width is changing for a second then back again. Again, it's difficult to explain. Please see the fiddle in 2 or 3 column layout.
https://jsfiddle.net/riegersn/q2g9gxk3/3/
.project::before {
content: '';
position: absolute;
left: -100%;
top: 0;
width: 200%;
height: 100%;
background-position: left center;
background-repeat: repeat-x;
background-size: contain;
background-image: inherit;
transition: transform 0.2s ease-out;
}
.project:hover::before {
transform: translateX(50%);
}
Well that's a fun one.
I will be totally honest and say I am not really sure why this works (so maybe someone else will come along with a better answer), but adding transform-style: preserve-3d fixed the problem for me:
.project::before {
transform-style: preserve-3d;
}
I am trying to achieve an effect I saw recently, where background image zooms on hover. I pretty much did it with example here: https://jsfiddle.net/qyh6nbwt/ but it seems to be very shaky (you will understand what I mean by hovering over it), I'm on osx running latest chrome version, have not checked it in other browsers yet.
Is there a way to make it smoother, so it doesn't "shake" on zoom in?
HTML
<div id="example">
test
</div>
CSS
#example {
background-image: url(http://www.jeroenkemperman.nl/wp-content/uploads/2014/06/Johns_Inc_Pizza_Spaghetti_wikipediacommons.jpg);
background-position: center center;
width: 250px;
height: 250px;
transition:all 1000ms ease;
background-size: 100% auto;
}
#example:hover {
background-size: 160% auto;
}
just use transform, scale.
so just instead of setting the bg image to 160% use
transform:scale(1.5);
some information about the transform css property you can find here
to use the transform scale in your case you will need a wrapper with overflow hidden so just the inner div gets bigger and cut of by the outer div.
see updated fiddle.
greetings timmi
Used transform scale instead of a background-size change transition: https://jsfiddle.net/qyh6nbwt/
transform: scale(2, 2);
So I made this my mission to figure this out, turns out it wasn't quite as simple of a fix as I thought.
It's a little dirty, but you need to frame your div within a div like this:
<div class="example">
<div></div>
<p>test</p>
</div>
Then from here, you can target the zooms more accurately, like this:
div.example {
height: 250px;
width: 250px;
overflow: hidden;
position: relative;
}
div.example > div {
position: absolute;
height: 100%;
width: 100%;
-moz-transition: all 1.5s;
-webkit-transition: all 1.5s;
transition: all 1.5s;
-moz-transform: scale(1,1);
-webkit-transform: scale(1,1);
transform: scale(1,1);
background-image: url('http://www.jeroenkemperman.nl/wp-content/uploads/2014/06/Johns_Inc_Pizza_Spaghetti_wikipediacommons.jpg');
-moz-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
z-index: -1;
}
div.example:hover > div {
-moz-transform: scale(2,2);
-webkit-transform: scale(2,2);
transform: scale(2,2);
}
You can adjust the zoom and speed using the scale and transition properties.
Here is a working fiddle to demonstrate. Hope this helps, I checked in Chrome/Safari/Firefox and it seems to work pretty well.
I have a background image that i've set to a header element in HTML. The image seems to respond until it hits a ceratin width, then it begins to move left off the page. Can someone help me understand what is going on, i can't seem to get it working no matter what i've tried :(
Below is my code, here is the fiddle http://jsfiddle.net/n7tBp/. If you resize the browser window to under 900px it starts to move the google image to the left
.header_area{
padding-top: 10%; /* slope */
height: 200px; /* start height */
background-image: url("http://musically.com/wp-content/uploads/2013/10/Google.jpg");
background-size: cover;
-moz-background-size: cover; /* Firefox 3.6 */
background-position: center; /* Internet Explorer 7/8 */
}
.header_area h1{
color:#e5e6d6;
font-size:34px;
display: inline-block;
-webkit-transform: skewX(-15deg);
-moz-transform: skewX(-15deg);
-ms-transform: skewX(-15deg);
-o-transform: skewX(-15deg);
transform: skewX(-15deg);
}
.header_area h2{
color:#e5e6d6;
font-size:22px;
display: block;
-webkit-transform: skewX(-15deg);
-moz-transform: skewX(-15deg);
-ms-transform: skewX(-15deg);
-o-transform: skewX(-15deg);
transform: skewX(-15deg);
}
.header_area figcaption{
margin-left:30px;
margin-top: -20px;
}
There are there options you can use for this image resize .
cover:-Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area
-webkit-background-size: cover;
background-size: cover;
DEMO http://jsfiddle.net/n7tBp/ (current one)
contain:-Scale the image to the largest size such that both its width and its height can fit inside the content area
-webkit-background-size: contain;
background-size: contain;
DEMO http://jsfiddle.net/n7tBp/4/
percentage:-Sets the width and height of the background image in percent of the parent element. The first value sets the width, the second value sets the height. If only one value is given, the second is set to "auto"
-webkit-background-size: 100%;
background-size: 100%;
Demo http://jsfiddle.net/n7tBp/5/
URL of issue: [REMOVED]
I'm having issues where my fixed header is distorting itself whenever I resize the window, scroll the page, or mouse over elements. It's even affected by how fast I scroll. I have found others with similar issues, but trying the solutions have not resolved it.
CSS of fixed element:
#header-wrap {
background: url(/_images/template/wood-background.jpg) no-repeat;
background-attachment: fixed;
background-size: 100%;
position: fixed;
width: 100%;
top: 0;
z-index: 56;
box-shadow: 0 0 8px 0 rgba(0, 0, 0, .85);
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-o-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
opacity: 1;
}
One of the solutions called for adding the transform property, which did fix the issue some of the time.
If I remove :
background-attachment: fixed;
everything seems to be allright.
I want to rotate the image which is placed in the button of scrollbar in Chrome. Now I have a CSS with this content:
::-webkit-scrollbar-button:vertical:decrement {
background-image: url(images/arrowup.png);
-webkit-transform: rotate(120deg);
-moz-transform: rotate(120deg);
background-repeat: no-repeat;
background-position: center;
background-color: #ECEEEF;
border-color: #999;
}
I wish to rotate the image without rotating its content.
Very well done and answered here – http://www.sitepoint.com/css3-transform-background-image/
#myelement:before {
content: "";
position: absolute;
width: 200%;
height: 200%;
top: -50%;
left: -50%;
z-index: -1;
background: url(background.png) 0 0 repeat;
transform: rotate(30deg);
}
Very easy method, you rotate one way, and the contents the other. Requires a square though
#element{
background : url('someImage.jpg');
}
#element:hover{
transform: rotate(-30deg);
}
#element:hover >*{
transform: rotate(30deg);
}
Update 2020, May:
Setting position: absolute and then transform: rotate(45deg) will provide a background:
div {
height: 200px;
width: 200px;
outline: 2px dashed slateBlue;
overflow: hidden;
}
div img {
position: absolute;
transform: rotate(45deg);
z-index: -1;
top: 40px;
left: 40px;
}
<div>
<img src="https://placekitten.com/120/120" />
<h1>Hello World!</h1>
</div>
Original Answer:
In my case, the image size is not so large that I cannot have a rotated copy of it. So, the image has been rotated with photoshop. An alternative to photoshop for rotating images is online tool too for rotating images. Once rotated, I'm working with the rotated-image in the background property.
div.with-background {
background-image: url(/img/rotated-image.png);
background-size: contain;
background-repeat: no-repeat;
background-position: top center;
}
Good Luck...
CSS:
.reverse {
transform: rotate(180deg);
}
.rotate {
animation-duration: .5s;
animation-iteration-count: 1;
animation-name: yoyo;
animation-timing-function: linear;
}
#keyframes yoyo {
from { transform: rotate( 0deg); }
to { transform: rotate(360deg); }
}
Javascript:
$(buttonElement).click(function () {
$(".arrow").toggleClass("reverse")
return false
})
$(buttonElement).hover(function () {
$(".arrow").addClass("rotate")
}, function() {
$(".arrow").removeClass("rotate")
})
PS: I've found this somewhere else but don't remember the source
I was looking to do this also. I have a large tile (literally an image of a tile) image which I'd like to rotate by just roughly 15 degrees and have repeated. You can imagine the size of an image which would repeat seamlessly, rendering the 'image editing program' answer useless.
My solution was give the un-rotated (just one copy :) tile image to psuedo :before element - oversize it - repeat it - set the container overflow to hidden - and rotate the generated :before element using css3 transforms. Bosh!
try making a div for the image only and then flipping it with transform: scaleY(-1); or transform: scaleX(-1);
if you want to have the navbar in front of the image you can make an overlapping div and set its opacity property to 0;
I tried all solutions but none helped, below is what was my problem and how I solved it:
Problem: we have an image for desktops with landscape orientation but To show the same image but rotated (portrait) for mobile screens.
How: I just rotated the actual image in my assets folder the way I wanted (portrait), and then just used media queries to call that image for my background for mobiles, and that's it.
(this was the easiest and quick solution I did.)
Update Dec 2021
Since the original question is
"..rotate the background image .."
The best answer looks to be here
https://stackoverflow.com/a/62135576/3446280