Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Other CSS background-images and 5EO concerns

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #193591
    moteey
    Participant

    Hi there,

    Here’s the thing:

    I have to display an image which covers full width of the screen and has certain height (eg. 400px).

    Because I want image always to cover the whole mentioned area, I created a <div> and added image as background. Then I applied the rule background-size: cover, so the image always fills the container.</div>

    That solution works perfectly in terms of design and how it scales up and down.

    I’m almost certain that this kind of behaviour is impossible to achieve with just <img alt="" /> tag and CSS. JavaScript is the thing I’m trying to avoid at the moment.

    BUT: I want to make the whole thing a bit more 5EO friendly. Therefore I added a good old <img alt="" /> tag inside a container <div>.

    This <img alt="" /> tag has position: absolute, and 100% width and height, so it covers the whole <div>.

    Of course the image gets distorted because of variable width. That’s why I added opacity: 0 to the , so that background-image of the <div> prevails.

    Now I have a situation where user sees background-image which scales nicely inside container, and can still right-click an image and save it. Also, <img alt="" /> tag is now visible to search engines.

    My question is:

    Can my solution actually do more harm than good because search engines might consider it as a hack, since I have completely hidden the original <img alt="" /> tag?

    Here’s a simple codepen implementation of my solution for better understanding: http://codepen.io/moteey/pen/VYbjNz

    Thanks,
    Tomi

    #193702
    Paulie_D
    Moderator

    Carefully about using the term ESS EE OH as it gets flagged as spam.

    Here’s the thing, 5EO shouldn’t really apply to the background image as, essentially, it’s styling not content.

    It would make more sense to put actual content (text) in the div and hide that with CSS for 5EO purposes than hide an image with alt text.

    As for saving your images, surely that’s not a 5EO issue, but if you want them to do so, then your solution works?

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘Other’ is closed to new topics and replies.