- This topic is empty.
January 20, 2015 at 3:04 am #193591moteeyParticipant
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.
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
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
<img alt="" />tag has position: absolute, and 100% width and height, so it covers the whole
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
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
TomiJanuary 20, 2015 at 3:12 am #193702Paulie_DModerator
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
As for saving your images, surely that’s not a 5EO issue, but if you want them to do so, then your solution works?
- The forum ‘Other’ is closed to new topics and replies.