background-image style not working in HTML header - javascript

I'm trying to change the "background-image:" of a css class when a button is pressed.
JQuery:
$(function() {
$('button').on('click', function() {
$('.masthead2').css('background-image', 'url("../img/whiteheader.png")');
});
});
CSS:
.masthead2 {
position: relative;
width: 100%;
height: auto;
min-height: 35rem;
padding: 15rem 0;
background-image: url("../img/roseheader.png");
background-position: center;
background-repeat: no-repeat;
background-attachment: scroll;
background-size: cover;
}
When I press the button, the "background-image:" in the CSS style is removed. Then the HTML changes from this:
<header class="masthead2">
To This:
<header class="masthead2" style='background-image: url("../img/whiteheader.png");'
However, on the page; no image is displayed at all. I've tried copying the url directly into the css and the new image is loaded. So I'm confident the url is correct.
If the background-image is changed directly in the css, this should solve the problem.

I have checked, complete code, it's working at my end, please check your image url, if image is present there.
Here is the code:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Animation</title>
<link rel="stylesheet" href="style.css" />
<style>
.masthead2 {
position: relative;
width: 100%;
height: auto;
min-height: 35rem;
padding: 15rem 0;
background-image: url("https://lh3.googleusercontent.com/proxy/ogwfaF0iwa05OnTNQFyD0rZ384sAN74p5xwJE6qfJmrEFcmgxlXo4zg22lrlaLcaS_hp9pFCu8s8QZ-GgDy37DxWVOHpq2B4IV35vb4wgHBWfJiYqI_AVARVMaguPane4Raedg=w530-h212-p-rw");
background-position: center;
background-repeat: no-repeat;
background-attachment: scroll;
background-size: cover;
}
</style>
</head>
<body>
<header class="masthead2"></header>
<button>Submit</button>
</body>
<script
src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous"></script>
<script>
$(function() {
$('button').on('click', function() {
$('.masthead2').css('background-image', 'url("https://upload.wikimedia.org/wikipedia/en/thumb/6/63/IMG_%28business%29.svg/1200px-IMG_%28business%29.svg.png")');
});
});
</script>
</html>

the path to the image might be wrong. If it's inside the css the path is relative to the css file but inside html doesn't represent same location. Try an absolute path for the image.
e.g
$(function() {
$('button').on('click', function() {
$('.masthead2').css('background-image', 'url("http://www.mywebsite.com/img/whiteheader.png")');
});
});

Related

Variables in <style> tag?

Is it possible to have variables in the tag of a component with SvelteKit? For example I can get this to work:
<div class="mainContent" style="background-image: url('{backgroundImage}');">
But the following doesnt:
<style>
main {
background-image: url('{backgroundImage}');
height: 85vh;
}
</style>
Is it possible to get the latter to work? I ask because I want to be able to set a :before on that background image, which I don't velieve can be done inline.
Thanks!
From my knowledge, I would use
let backgroundImage = '..../../'
<div class="mainContent" style="--bg-img: url({backgroundImage})">
<style>
main {
position: relative;
background-image: var(--bg-img);
....
}
main::before {
content: "";
position: absolute;
width: 100px;
height: 100px;
background-image: var(--bg-img);
....
}
</style>
You can use css property(variable) as
<style>
main {
background-image: var(--backgroundImage);
height: 85vh;
}
</style>
then you can set value to this property dynamically using javascript as
document.documentElement.style.setProperty(
"--backgroundImage",
"url(myimage.png)"
);

Adapt image to any device

I have a problem I need to put a background image to the body of my page but that this is responsive and suits any size .. this I should do only with css or also javascript, could give an example please
For the HTML:
<body class="background">
<!-- Content goes here -->
</body>
For the CSS:
.background {
background-image: url(image.png);
background-size: cover;
position: fixed;
}
Tell me how it goes!
For the CSS
.body {
background-image: url('myImg.jpeg');
background-position:center top; // you can change this as you like.
background-repeat:no-repeat;
-moz-background-size:cover;
background-size:cover;
height: 100%;
width:100%;
}
Add -moz-background-size for Firefox Browser.

JQuery background video does not cover whole the page

I am using Vide to play a video in the background.
Here is the playing div tag.
<div style="width: 1000px; height: 500px;"
data-vide-bg="path/to/video" data-vide-options="loop: false, muted: false, position: 0% 0%">
</div>
when i change the style to
width: 100%; height: 100%;
The video disappears from the page. I want that video covers all page and I can scroll down.
Why does it happen?
How can I fix it?
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Body background example</title>
<style>
html, body {
margin: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body data-vide-bg="video/ocean">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../libs/jquery/dist/jquery.min.js"><\/script>')</script>
<script src="../src/jquery.vide.js"></script>
</body>
</html>
This is fine just put scroll bar or use some jquery for scroll purpose.
if you want to cover all with the div and adjusted depending on the size of the screen, this is the code (Important, this is directive to the div):
style="
position: absolute;
z-index: -1;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
overflow: hidden;
-webkit-background-size: cover;
background-size: cover;
background-image: none;
background-position: 50% 50%;
background-repeat: no-repeat no-repeat;"
if you want in the body, in the folder examples/body-bg.html is the examples for apply to the body only: https://github.com/VodkaBears/Vide/tree/master/examples
You are using the wrong units of measurement. If you pull the image in via CSS image-background then you can set the image-background-size to the contain property. It will insure that the video completely fits into it container (body, div, span, etc.).
body{
background-image:url(''your-video.mp4');
background-repeat:no-repeat;
image-background-size: contain;
}
Source: w3schools CSS3 background-size Property
You could also try using the height and width but use the vh and vw metrics. It sets the height and width based on the view ports dimensions.
Source: CSS Units

Loading image show when i click a button in jquery/javascript

When i click the button, it will be navigate to another page, before the page loading completely i want to show the loading gif image.(without using Ajax)
First right after the body tag add this:
<div id="loading">
<img id="loading-image" src="images/ajax-loader.gif" alt="Loading..." />
</div>
Then add the style class for the div and image to your css:
#loading {
width: 100%;
height: 100%;
top: 0px;
left: 0px;
position: fixed;
display: block;
opacity: 0.7;
background-color: #fff;
z-index: 99;
text-align: center;
}
#loading-image {
position: absolute;
top: 100px;
left: 240px;
z-index: 100;
}
And finally add this javascript to your page (preferably at the end of your page, before closing body tag of course):
$(window).load(function() {
$('#loading').hide();
});
This is what I did
1.) Set div tag over body and give it an ID of 'page'.
2.) After that, place a div tag next to the 'page' div tag and give it an ID of 'loading'.
<div id="page">
<body>
//whatever you page code is
</body>
</div><div id="loading"></div>
3.) Setup CSS.
<style type="text/css">
#page {display: block;}
#loading {display: none;
position: absolute;
top: 0;
left: 0;
z-index: 100;
width: 100vw;
height: 100vh;
background-color: rgba(255, 255, 255, 0.5);
background-image: url('../Images/nameofgifimage.gif');
background-repeat: no-repeat;
background-position: center;}
</style>
4.) Finally, setup your JQuery. I am using VB.net so for the ID, I had to get the ClientID.
<script type='text/javascript' src="../Scripts/jquery-1.4.1.min.js"></script>
<script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="../Scripts/jquery.maskedinput.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#<%= btnSearch.ClientID %>").click(function () {
$('#loading').show();
return true;
});
});
</script>
If this does not work for you, let me know and I will try to figure out what is wrong.

CSS preferred height with maximum height

I have a div that should have a maximum height and a preferred height. In the sample posted below, I have #test with a black background and a maximum height of 800px. When the browser view-port has sufficient available space, it should take 800px. If less space is available (i.e. mobile devices), the maximum amount of available space should be used. How can this be achieved with preferably just CSS?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Prototype</title>
<style>
body, html {
margin: 0;
height: 100%;
width: 100%;
}
#test {
background-color: black;
background-position: center;
background-repeat: no-repeat;
max-height: 600px;
max-width: 800px;
}
</style>
</head>
<body>
<div id="test"></div>
</body>
</html>
Also include the following attributes to #test:
height: 100%;
width: 100%;
Fiddle link here: http://jsfiddle.net/Nx5Zb/
With embedded full-page result: http://jsfiddle.net/Nx5Zb/embedded/result/

Categories