I have put together a fixed menu bar which appears once scrolled down the page.
http://staging.meadowspetcareservices.co.uk/
I have implemented this, but the customer would like a icon image within the bar. I have tried adding this as a background image within the CSS. But it just isn't showing?
nav.nav-header.fixed {
width: 100%;
z-index: 600;
background: #9D162E url(/wp-content/uploads/2016/03/meadows-favicon-negative.png);
background-repeat: no-repeat;
background-position: 20px center;
background-size: 56px;
position: fixed;
top: 0;
left: 0;
-webkit-transform: translateY(0%);
-ms-transform: translateY(0%);
transform: translateY(0%);
-webkit-animation: slidedown 2s forwards;
animation: slidedown 2s forwards;
}
nav.nav-header.fixed.wrap {
width: 100%!important;
}
nav.nav-header.fixed ul#menu-primary {
width: 100%;
text-align: right;
}
Any help would be appreciated
Your code actually works!
The problem is that this code is applied after your image (think painted above)
.site-header .genesis-nav-menu {
background: #9D162E;
}
So just remove the background color for the above class and you're good to go!
Is this what you want?
ul#menu-primary{
background-image: url('wp-content/uploads/2016/03/meadows-favicon-negative.png') !important;
background-repeat: no-repeat;
}
Related
I am new to web design,
Current I am having an issue when loading few images, the background image is flickering, I assume it takes time to load from the server.
How can you preload backgound image for html?
I found few ways from others from seraching like:
<link rel="stylesheet" href="url.com/image/1251302.jpg" as="image">
I am not sure how to use this way, if I will use a image later for an html element, how to apply this reloaded image?
If this is not the best way, how to pre-load image correctly?
any help would be greatly appreciated!
Some example of my codes.
.bgimg-1 {
background-position: center;
background-size: cover;
background-image: url("image/1251302.jpg");
min-height: 100%;
}
later:
<header class="bgimg-1">
I am not sure that this is what you are asking about … But if you mean that you need to implement a pre-loader for your website to make suer that everything loaded before showing the user any content to prevent the flickering.
Here is how you can do it
HTML, CSS, and JS:
const preloader = document.querySelector("#preloader");
if (preloader) {
window.addEventListener("load", () => {
preloader.remove();
});
}
#preloader {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 9999;
overflow: hidden;
background: #fff;
}
#preloader:before {
content: "";
position: fixed;
top: calc(50% - 30px);
left: calc(50% - 30px);
border: 6px solid #229727;
border-top-color: #fff;
border-bottom-color: #fff;
border-radius: 50%;
width: 60px;
height: 60px;
-webkit-animation: animate-preloader 1s linear infinite;
animation: animate-preloader 1s linear infinite;
}
#-webkit-keyframes animate-preloader {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#keyframes animate-preloader {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<div id="preloader"></div>
I'm really a newbie when it comes to CSS - but I saw this cool effect with using the text as a mask for the background. I got it working just fine but have set my mind on trying to animate the background to continuously slide to the left. I just can't make it work.
h1 {
font-family: Poppins;
font-size: 12rem;
color: transparent;
background-image: url(people.jpg);
background-size: cover;
background-repeat: repeat-x;
background-clip: text;
-webkit-background-clip: text;
animation: slide_background 15s linear infinite;
}
#keyframes slide_background {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
<h1>PEOPLE</h1>
it slides alright... but so does the text mask.
How do keep the text stationary while the background slides to the side?
change it to this:
#keyframes slide_background {
from {
background-position: 0px 0px;
}
to {
background-position: 100% 0px;
}
}
Now it's working! Thanks #Temani Afif for point out what I did wrong.
For infos: you may also use mix-blend-mode and text-indent for the animation
h1 {
font-family: Poppins;
font-size: 12rem;
position: relative;
z-index: 1;
background: white;
margin: 0;
animation: slide_background 15s linear infinite;
}
h1:before {
content: "";
mix-blend-mode: screen;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: url(http://lorempixel.com/output/fashion-q-c-640-480-10.jpg);
background-size: cover;
}
#keyframes slide_background {
from {
text-indent: 0;
}
to {
text-indent: -100vw;
}
}
<h1>PEOPLE</h1>
I have a div with a background image and I'm trying to change its scale infinitely.
I changed the background-size property in the animation but as you can see, there is some noise or vibration when animating. How would I remove it?
.pre-loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('https://upload.wikimedia.org/wikipedia/commons/a/ab/Android_O_Preview_Logo.png') center no-repeat #fff;
background-size: 50%;
animation: loading 5s ease-in-out infinite;
}
#keyframes loading {
0% {
background-size: 50%
}
50% {
background-size: 55%
}
100% {
background-size: 50%
}
}
<div class="pre-loader"></div>
Consider a scale transformation to have a better rendring:
.pre-loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
overflow:hidden;
}
.pre-loader:before {
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background: url('https://upload.wikimedia.org/wikipedia/commons/a/ab/Android_O_Preview_Logo.png') center/50% auto no-repeat #fff;
animation: loading 5s ease-in-out infinite;
}
#keyframes loading {
50% {
transform:scale(1.1);
}
}
<div class="pre-loader"></div>
You are centering the background which means applying a background-position equal to 50%. The calculation of this value is related to the background-size so the position is changing slightly when the size is changing creating this bad effect:
If you consider a position using pixel values you will not see this effect:
.pre-loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
overflow:hidden;
}
.pre-loader:before {
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background: url('https://upload.wikimedia.org/wikipedia/commons/a/ab/Android_O_Preview_Logo.png') 50px 50px/50% auto no-repeat #fff;
animation: loading 5s ease-in-out infinite;
}
#keyframes loading {
50% {
background-size:55%;
}
}
<div class="pre-loader"></div>
Use transform instead of background-size
.pre-loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('https://upload.wikimedia.org/wikipedia/commons/a/ab/Android_O_Preview_Logo.png') center no-repeat #fff;
background-size: 50%;
animation: loading 5s ease-in-out infinite;
}
#keyframes loading {
50% {
transform: scale(1.2);
}
100% {
transform: initial;
}
}
<div class="pre-loader"></div>
There is nothing wrong with your code, the problems lays in the CSS. I think there is a performance issue in your animation with:
#keyframes loading {
0% {
background-size: 50%
}
50% {
background-size: 55%
}
100% {
background-size: 50%
}
The animation will relocate every single pixel from every image. So that will be a bit heavy for the browser to render I think.
Also your animation time with animation: loading 5s ease-in-out infinite; is a factor why its making noises. With the animation time of 5 seconds, it becomes clear that each pixel is reloaded.
If you change this time to 1s, you'll find that it runs smoother as the time between animations goes by faster.
But since the 5 seconds should persist, the simplest solution is to add the code snippets from #Félix or #TemaniAfif answer into your code which are really 2 great answers to your question.
I want to infinite Scroll Background image animate. How can I set it just go upwards continuously, not come back down? still, it gives a jerk.
How it is possible? Please help anyone know it.
I have a link:
http://herinshah.com/wp/fortiflex/5-2/
CSS:
.et_pb_section.landing-page .et_pb_column_3_5 {
background-color: #f6eb00;
margin-right: 1%;
padding: 0 10px;
height: 100vh;
background-image: url(images/ragazzi-logo.png);
background-position: 0 0;
background-size: cover;
-webkit-animation: upward 15s linear infinite;
animation: upward 15s linear infinite;
border-right: 4px solid #000;
display: block;
background-repeat: repeat-y;
}
#-webkit-keyframes upward {
to {
background-position: 0 0;
}
from {
background-position: 0 2174px;
}
}
#keyframes upward {
to {
background-position: 0 0;
}
from {
background-position: 0 2174px;
}
}
You need to wrap a div inside a div. Here is the working fiddle for the same
HTML
<div class="main">
<div class="holder"></div>
</div>
CSS
*{
margin:0;
padding:0
}
.main {
height: 100vh;
overflow: hidden;
}
.holder {
height: 200vh;
-webkit-animation: upwards 2.5s linear infinite;
animation: upward 2.5s linear infinite;
background: url(http://herinshah.com/wp/fortiflex/wp-content/themes/Divi/images/ragazzi-logo.png) center yellow;
background-size: 100% 50%;
}
#-webkit-keyframes upward {
from {
background-position: 0% 0%;
}
to {
background-position: 0% -100%;
}
}
#keyframes upward {
from {
background-position: 0% 0%;
}
to {
background-position: 0% -100%;
}
}
I felt so compelled to answer this because I've done something similar :before (pun intended) and your skipping animation was giving me cancer.
You're gonna need to mess around with the pseudo :after element and get the height right. This should get you started.
Also your image isn't cropped perfectly right, so fix that and you'll be good to go.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
</head>
<body onload="onloaded()">
<div class="foo_section">
<div class="foo_container">
<img class="foo_image" src="http://herinshah.com/wp/fortiflex/wp-content/themes/Divi/images/ragazzi-logo.png" />
</div>
</div>
</body>
</html>
.foo_section {
width: 100vw;
height: 100vh;
position: fixed;
min-height: 400px;
}
.foo_container {
width: 100%;
position: relative;
animation: infiniteScrollBg 10s infinite linear;
}
.foo_container:after {
content: "";
height: 500%;
width: 100%;
position: absolute;
left: 0;
top: 0;
background-color: #f6eb00;
background-image: url('http://herinshah.com/wp/fortiflex/wp-content/themes/Divi/images/ragazzi-logo.png');
background-size: 100% 20%;
}
.foo_image {
width: 100%;
}
#-webkit-keyframes infiniteScrollBg {
0% {
transform: translateY(-100%);
}
100% {
transform: translateY(-200%);
}
}
Codepen
I see you're using Elegant Themes too. <3 Divi builder
I suggest you to have two div tags with the same background. Then, animate the same div and play with positioning of the divs and animate to make it look continuously scrolling up.
.container{
width:600px;
height:400px;
background-color:yellow;
margin:0 auto;
position:relative;
overflow:hidden;
}
.bg{
width:100%;
height:400px;
background-repeat:no-repeat;
background-size:contain;
position:absolute;
bottom:0;
}
.bg.bg1{
transform: translate(0,0);
animation: upward 3s linear infinite;
}
.bg.bg2{
transform: translate(0,100%);
animation: upward2 3s linear infinite;
}
#keyframes upward {
to {
transform: translate(0,-100%);
}
from {
transform: translate(0, 0);
}
}
#keyframes upward2 {
to {
transform: translate(0,0);
}
from {
transform: translate(0,100%);
}
}
Here's how I would do it. my codepen.
So I got this Fullscreen Background Image Slideshow from tympanus :) You can definitely see the codes on the site linked above... now I do not want it to be taking the whole page... I want to add margins all over... I've been trying to do it but no avail. I tried reducing the size of the background image into lesser percent but it's still not proportioned...
How do I add an equal padding to the slideshow? :(
.cb-slideshow li span {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
opacity: 0;
z-index: 0;
animation: imageAnimation 36s linear infinite 0s;
}
I think the absolute simplest way is to do like this:
.cb-slideshow li span {
left: 5%; // alter as you like
top: 5%; // alter as you like
width: 90%; // alter as you like
height: 90%; // alter as you like
position: absolute;
color: transparent;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
opacity: 0;
z-index: 0;
animation: imageAnimation 36s linear infinite 0s;
}