Replace css background-image: url(…) with <img> tag and keep scrolling over effect

Question

I want to add alt tags to images on my website to improve SEO. The problem is I'm embedding them using CSS background-image: url(...) .

It creates the desired scrolling effects (see below), but is not good for SEO.

Current code:

 .text { margin: 200px 20px; } .image-background { background-attachment: fixed; background-position: 50% 50%; background-repeat: no-repeat; background-size: 100%; display: block; height: 800px; margin-bottom: 150px; margin-left: -1500px; margin-right: -1500px; margin-top: 150px; width: 3500px; } .image1 { background-image: url(https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg); } .image2 { background-image: url(http://media1.santabanta.com/full1/Animals/Cats/cats-149a.jpg); } 

 <div class='text'> Lorem ipsum dolores... </div> <div class='image-background image1'></div> <div class='text'> Lorem ipsum dolores... </div> <div class='image-background image2'></div> <div class='text'> Lorem ipsum dolores... </div> 

The question is: how do I add <img> tags with alt properties without breaking the visual appearance?

Edit:

I tried using <img> with css position:fixed but can't get it to work well with more than one image ( my broken jsfiddle here ).

Edit 2:

These images are part of website content, not layout. They deserve alt tags, I'm not trying to stuff more keywords in a "bad" way. I originally put them as backgrounds to achieve a visual effect. Now I want to fix the mistake, but without changing how the website looks like. I'm talking about my photos on this blog .

Edit 3:

I'm not trying to use only CSS here. Any code modification, JS library or pretty much anything is fine!

Answer 1

Method 1

This method doesn't change the visibility of the images, so I think there's no issues about SEO at all. But it is more complex and have the caveat that only one image can appear per once. So the text's div must to fill the entire screen resulting in a big padding.

 $(function(){ var texts = $('.text'); var oldY = 0; $(document).scroll(function(){ var y = window.scrollY; texts.each(function(){ var text = $(this); if(y >= text.offset().top) text.next().addClass('active'); else text.next().removeClass('active'); }); }); }); 

 body{ padding: 0; margin: 0; } .text{ padding: 20px; margin: 0 0 600px; position: relative; z-index: 3; background-color: #fff; min-height: 100vh; display: flex; align-items: center; } .background-img img{ position: fixed; top: 0; left: 0; z-index: 1; width: 100%; } .background-img.active img{ z-index: 2; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <div class='text'> Lorem ipsum dolores... </div> <div class="background-img active"> <img src="https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg" alt="Image 1"> </div> <div class='text'> Lorem ipsum dolores... </div> <div class="background-img"> <img src="http://media1.santabanta.com/full1/Animals/Cats/cats-149a.jpg" class="background-img" alt="Image 2"> </div> <div class='text'> Lorem ipsum dolores... </div> 

Method 2

This is simpler, and to say the truth it's almost the same idea from your original code. The difference is that as soon as the page loads, the images are hidden and then copied as background images for their parent divs. The advantage is that you can have more then one image visible at the same time, which is a better effect.

 $(function(){ $('.background-img img').each(function(){ var img = $(this).hide(); img.parent().css('background-image', 'url(' + img.prop('src') + ')'); }); }); 

 body{ padding: 0; margin: 0; } .text{ padding: 200px 20px; position: relative; z-index: 3; background-color: #fff; } .background-img{ height: 400px; background-attachment: fixed; background-repeat: no-repeat; background-position: center; background-size: 100%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <div class='text'> Lorem ipsum dolores... </div> <div class="background-img"> <img src="https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg" alt="Image 1"> </div> <div class='text'> Lorem ipsum dolores... </div> <div class="background-img"> <img src="http://media1.santabanta.com/full1/Animals/Cats/cats-149a.jpg" class="background-img" alt="Image 2"> </div> <div class='text'> Lorem ipsum dolores... </div>