I have my style.css where I defined my background image for my Bootstrap container as
.container-fluid.bg-img {
background:
linear-gradient(
rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0.5)
),
url('/my/image');
background-size: cover;
color: #ffffff; /* White */;
}
As of now, the url is hardcoded in the css. How would I change it from within my html as I like? Something like (of course pseudo-code):
<div class="container-fluid bg-img {new_url}">
...
</div>
I have a basic knowledge of PHP, and I hope I can use it to achieve what I need.
EDIT 1
As suggested by @Lukas Meine I am trying the jQuery way. What I am actually trying is to insert a function in a js file (scripts.js) with the variable of my desired image url to be parametric. Then, I would define it in my HTML, like:
scripts.js
function def_background(img_url) {
$('.container-fluid').css('background-image','url(img_url)');
}
$(document).ready(function() {
def_background(img_url);
});
From my HTML I'll then do call:
<script src="./js/scripts.js">
def_background(img_url);
</script>
Of course I am receiving an error saying that img_url is not defined. But how would I define it from my HTML? Should I declare a temporary value in my scripts.js and then overwrite it from the HTML?
At present, I removed the url property from my css, because I need to define it parametrically (my actual aim).
.container-fluid.bg-img {
background:
linear-gradient(
rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0.5)
),
/* url('/my/image') */
;
background-size: cover;
color: #ffffff; /* White */;
}
EDIT 2
Going on with the tests... I just create a (working) bootply which shows exactly what I need. However, I can't reproduce the behaviour in my actual code. The only difference is that I need to call the jQuery function from within my HTML and not inside the very same jQuery as in the bootply. Also, there are others call before the js in HTML, I'll add them as well if it could be of interest.
Ah, one last thing: my HTML have actually a .php extension (so basically they're PHP files in practice), don't know if this makes a real difference here...
Anyway, here are my files as of now:
style.css
.container-fluid.bg-img {
background:
linear-gradient(
rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0.5)
);
background-size: cover;
color: #ffffff; /* White */;
}
umbe.js
function def_background(url) {
$(".container-fluid.bg-img").css("background","url('"+ url +"')");
}
animazione.php ( only)
<head>
<title>Sito di Mario Smedile</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- my CSS -->
<link rel="stylesheet" href="./css/style.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- my JS -->
<script src="./js/umbe.js">
</script>
<script>
img_url = 'http://via.placeholder.com/350x150/1E90FF';
def_background(img_url);
</script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Include some php -->
<?php include './php/functions.php';?>
</head>
Use Javascript. In this particular case, i'm using jquery as well.
$(document).on('ready',function(){
$('.container-fluid').css('background-image','url("yournewurl")');
});
Javascript is used to manipulate the html. You cannot do changes in your html after the page was loaded, because php is a server side language.
EDIT:
HTML include your scripts.js file, and then define your variable, and call the function.
<head>
<script src="./js/scripts.js"></script>
<script>
img_url = "define whatever you want here in the html";
def_background(img_url);
</script>
</head>
Scripts.js remove the on ready trigger
function def_background(img_url) {
$('.container-fluid').css('background-image','url(img_url)');
}
.gradient1 {
background: linear-gradient(#fff, #000);
}
.bg {
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
}<div class="gradient1">
<div class="bg"
style="background-image: url('https://www.google.com.ua/images/nav_logo242.png')"
>test</div>
</div></div>