<ul style="position:absolute; top:60px; left:50px; margin:0; padding:0; list-style-type: none; width:30%; height:600px; background: #ECECEC; box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.75);" target="_blank" rel="nofollow"></ul>
<ul style="position:absolute; top:60px; left:50px; margin:0; padding:0; list-style-type: none; width:30%; height:400px; background: transparent; list-style-type: none;" target="_blank" rel="nofollow">
<img style="position: absolute; top: 0; left: 0; background: url(https://images.pexels.com/photos/247204/pexels-photo-247204.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb) no-repeat center; background-size: auto; height: 100%; width: 100%;" target="_blank" rel="nofollow">
</ul>
http://jsbin.com/bafeyej/edit?html,output
Hi, I have tried a few different styling techniques, border: 0; etc. and I can't seem to get rid of this little outline around the image, I know its from its parent elements however I can't seem to hack it, I even dared to set outline to none. I'm such a trouble maker, any ideas?
FYI, I am creating a profile template for an online platform, which only permits limited use of html code in the profile making section, so please no lectures why I shouldn't be using inline CSS or why I am using a ul element as a container lol, it is what it is.
Thank you for your time.
It seems that your problem come from the fact that your img tag don't have a src attribute.
I found this post, on a similar issue, where you'll probably find a solution.
How can I remove the border around an image without a source?