CSS background-images and 5EO concerns

[moteey]

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

[Paulie_D]

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?

[Author]

Posts