CSS / JQuery: Setting href as background image

Question

Background images have some enviable CSS properties that I'd like to use for photo galleries -- namely, background-size: cover; and background-position: center center; let you use an image of any aspect ratio and fit it attractively to a fixed-size container.

However, I don't really think setting background images with content is ideal. I'd much rather have <a href="url.jpg"><img src="url.jpg"/></a> in content than <a href="url.jpg" style="background-image: url(url.jpg);"><img src="url.jpg"/></a>. I think a script to take the former and write the latter is ideal.

Given code that looks like this:

<a href="http://thesundaybe.st/media/from-earth-phone-23.jpg"></a>
<a href="http://thesundaybe.st/media/from-earth-phone-24.jpg"></a>
<a href="http://thesundaybe.st/media/from-earth-phone-26.jpg"></a>
<a href="http://thesundaybe.st/media/from-earth-phone-27.jpg"></a>
<a href="http://thesundaybe.st/media/from-earth-phone-28.jpg"></a>
<a href="http://thesundaybe.st/media/from-earth-phone-29.jpg"></a>
<a href="http://thesundaybe.st/media/from-earth-phone-30.jpg"></a>

I'm trying to write a JQuery script to take the href URL and set it as the background image. Basically, turning the above code into this:

<a href="http://thesundaybe.st/media/from-earth-phone-23.jpg" style="background-image: url(http://thesundaybe.st/media/from-earth-phone-23.jpg);"></a>
<a href="http://thesundaybe.st/media/from-earth-phone-24.jpg" style="background-image: url(http://thesundaybe.st/media/from-earth-phone-24.jpg);"></a>
<a href="http://thesundaybe.st/media/from-earth-phone-26.jpg" style="background-image: url(http://thesundaybe.st/media/from-earth-phone-26.jpg);"></a>
<a href="http://thesundaybe.st/media/from-earth-phone-27.jpg" style="background-image: url(http://thesundaybe.st/media/from-earth-phone-27.jpg);"></a>
<a href="http://thesundaybe.st/media/from-earth-phone-28.jpg" style="background-image: url(http://thesundaybe.st/media/from-earth-phone-28.jpg);"></a>
<a href="http://thesundaybe.st/media/from-earth-phone-29.jpg" style="background-image: url(http://thesundaybe.st/media/from-earth-phone-29.jpg);"></a>
<a href="http://thesundaybe.st/media/from-earth-phone-30.jpg" style="background-image: url(http://thesundaybe.st/media/from-earth-phone-30.jpg);"></a>

Here's a jsfiddle with the basic HTML/CSS set up, just needing a bit of JQuery: http://jsfiddle.net/MRSallee/tv3q8/3/

And theoretically, this is what it'd look like when the script does the trick: http://jsfiddle.net/MRSallee/tv3q8/

I got fairly close this this bit of JQuery, but it seems to just use the first href as the background image for all of the <a> tags.

$('a').css({'background-image': 'url(' + $('a').attr('href') + ')'});

Any help is greatly appreciated. Cheers.

Community · Accepted Answer · 2020-06-20 09:12:55Z

5

You can try this:

$('a').css('background-image', function() {
    return 'url(' + this.href + ')';
});

each loop will be used internally so it's equivalent to $('a').each + $(this).css combination.

Demo

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Apr 21, 2013 at 17:54

dfsq

193k26 gold badges244 silver badges261 bronze badges

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

1 Comment

dfsq Over a year ago

@PSCoder Yes, a lot of jQuery methods accept function + we can skip redundant each very often. Makes code a little bit cleaner.

Adil Shaikh · Accepted Answer · 2013-04-21 17:51:05Z

1

$('a').each(function(){
   $(this).css({'background-image': 'url(' + $(this).attr('href') + ')'});
});

http://jsfiddle.net/mohammadAdil/tv3q8/8/

answered Apr 21, 2013 at 17:51

Adil Shaikh

44.8k17 gold badges95 silver badges112 bronze badges

2 Comments

Mark Ryan Sallee Over a year ago

This also seems to yield the same problem I've been running into. The first href URL gets set as the background image for all of the <a> tags, rather than the unique href included in each <a> tag.

Adil Shaikh Over a year ago

see change in this line $(this).css({'background-image': 'url(' + $(this).attr('href') + ')'});

PSL · Accepted Answer · 2013-04-21 18:05:49Z

1

$('a').each(function(){    
 $(this).css({'background-image': 'url(' + this.href + ')'});
});

Here this refers to the current element in iteration.

http://jsfiddle.net/x5kbA/

edited Apr 21, 2013 at 18:05

answered Apr 21, 2013 at 17:52

PSL

124k21 gold badges257 silver badges243 bronze badges

1 Comment

Mark Ryan Sallee Over a year ago

This is pretty similar to what I was trying earlier and seems to yield the same problem -- the first href URL gets set as the background image for all <a> tags. See: jsfiddle.net/MRSallee/tv3q8/9

Collectives™ on Stack Overflow

CSS / JQuery: Setting href as background image

3 Answers 3

Demo

1 Comment

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related