seo Question posted in
Some basic information to get you started with this can be found here.

CSS background image scales differently than <img>? – SEO

This is my first question here, so please excuse if my question may not be on point.

On a photo reportage I have around 30 high res pictures which I loaded over CSS as I thought it might have speed advantages over using ‘img’ tags.

Here’s the code for one of the 30 pics:

.image-bg-fixed-height2 {
    display: table;
    width: 100%;
    height: 100%;
    padding: 10px 0;
    text-align: center;
    color: #fff;
    background: url(../Snapshots/Adasevci_02.jpg) no-repeat center center scroll;
    background-color: #000;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

However in the HTML when I use the ‘img’ tags specified in the CSS like 

img {
    max-width: 100%;
    height: auto;
    padding: 10px 0;
}

The images with the CSS approach and the ‘img’ scale differently. The ‘img’ seems squeezed on mobile devices. I want the pictures to behave like over the CSS class.

<aside class="image-bg-fixed-height2"></aside>
<img src="http://www.jagaland.de/moteladasevci/Snapshots/Adasevci_02.jpg" border="0" class="image-bg-fixed-height2" width="1920px" height="1080px" alt="This is the alt text 2">

It looks great and is responsive with the CSS approach but I lose the SEO feature via alt text which is a no go for my photo reportage.

Tags:

2

Answers


  1. 0

    if you are using <img> with css width:100% or max-width:100%; then it will automatically squeeze so you can manage it in responsive with removing width:100% to auto but the best is you can use it in background css with css background-size:cover;

    Login or Signup to reply.
  2. 0

    The object-fit CSS property does that, but is not supported at all on Internet Explorer (source: caniuse.com).

    You can use Modernizr to check browser capability, and use this script.
    This will use the image src property as background-image, and will perform something similar.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search