Us image src url in CSS background image url using javascript or jquery

Question

I'm novice at Javascript. I want to use an image src in CSS background image url using javascript.

For example, <img class="user-profile-box-img" src="https://img.freepik.com/free-photo/portrait-young-man-using-mobile-phone-while-standing-outdoors_58466-16294.jpg"/>

This is an image src to show image. I want to use the same image url in css background-image: url(""), so that I don't need to write twice the same url. How can I do it using javascript or jquery ?

To sum up, I'll just write image src once inside img tag, and it will automatically add in background-image: url("");

Code Example:

.same-image-div {
    width: 100%;
    margin: auto;
    padding: 60px 15px!important;
background-image: linear-gradient(rgba(38, 70, 235, 0.4), rgba(38, 70, 235, 0.4)),    
url(" here I want the "user-profile-box-img" class image src url ");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.user-profile-box-img{
width: 50%;
margin: auto;
}

<div class="same-image-div">
<img class="user-profile-box-img" src="https://img.freepik.com/free-photo/portrait-young-man-using-mobile-phone-while-standing-outdoors_58466-16294.jpg"/>
</div>

Usman Mehmood · Accepted Answer · 2023-02-04 13:52:43Z

1

Here is one way to do it using JavaScript:

const img = document.querySelector('.user-profile-box-img');
const div = document.querySelector('.same-image-div');
div.style.backgroundImage = `linear-gradient(rgba(38, 70, 235, 0.4), rgba(38, 70, 235, 0.4)), url(${img.src})`;

Here is one way to do it using jQuery:

const img = $('.user-profile-box-img');
const div = $('.same-image-div');
div.css('background-image', `linear-gradient(rgba(38, 70, 235, 0.4), rgba(38, 70, 235, 0.4)), url(${img.attr('src')})`);

answered Feb 4, 2023 at 13:52

Usman Mehmood

663 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Asma Binta Younus · Accepted Answer · 2023-02-04 13:37:04Z

1

To get the image src using jquery, you can use: $('.user-profile-box-img').attr('src');

then add this to .same-image-div class background-image: url("") property through Jquery or Javascript.

answered Feb 4, 2023 at 13:37

Asma Binta Younus

2902 silver badges14 bronze badges

Comments

Luca Murante · Accepted Answer · 2023-02-04 13:46:47Z

1

If you want to "move" src attribute to a CSS attribute of the same element, in jQuery you should do this (with a little element caching):

let element = $('img.user-profile-box-img');
element.css('background-image', 'url('+element.attr('src')+')');

answered Feb 4, 2023 at 13:46

Luca Murante

3173 silver badges8 bronze badges

2 Comments

Md. Ibrahim Over a year ago

Can you please give the the complete code with example ?

Luca Murante Over a year ago

Just wrap this in <script></script> and add it to the page, preferably after page load. If your site has a JS file, you can add it there.

Nabaraj Rai · Accepted Answer · 2023-02-04 13:44:06Z

0

If you want to use an image src in CSS background image URL using javascript. You have set the image using javascript simply like this : element.style.background-image = "URL('img_tree.png')";

document.body.style.background-image = "URL('https://images.unsplash.com/photo-1661956602139-ec64991b8b16?ixlib=rb-4.0.3&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2765&q=80')";

answered Feb 4, 2023 at 13:44

community wiki

Nabaraj Rai

4 Comments

Md. Ibrahim Over a year ago

Raj, can't I use it once from <img src=""> ?????

Md. Ibrahim Over a year ago

don't want to add same url in my css background-image url(""), I want that I'll use it just <img src=""> attribute and automatically add on background image url.

Nabaraj Rai Over a year ago

yes you can use by creating element or using template

Nabaraj Rai Over a year ago

For example <img id="myImg" src=""/> document.getElementById("myImg").src = "hackanm.gif";

Collectives™ on Stack Overflow

Us image src url in CSS background image url using javascript or jquery

4 Answers 4

Comments

Comments

2 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related