css - rotate background image from rotated div -
i have added background image div, because div has been rotated, has background-image. how can rotate image opposite way appears straight?
live url: http://bit.ly/1iqxqrn
html
<section id="about-hero-img"></section>
css
#about-hero-img { -webkit-transform: rotate(-2deg); -moz-transform: rotate(-2deg); -o-transform: rotate(-2deg); -ms-transform: rotate(-2deg); transform: rotate(-2deg); width: 1030px; margin-left: -50px; margin-top: 20px; height: 200px; background-image: url('../images/about-header-img.jpg'); padding-top: 30px; }
move background-image :before pseudo-element of header
#about-hero-img { -webkit-transform: rotate(-2deg); -moz-transform: rotate(-2deg); -o-transform: rotate(-2deg); -ms-transform: rotate(-2deg); transform: rotate(-2deg); width: 1030px; margin-left: -50px; margin-top: 20px; height: 200px; /* background-image: url('../images/about-header-img.jpg'); */ padding-top: 30px; position: relative; } #about-hero-img:before { width: 1030px; height: 230px; position: absolute; left: 0; top: 0; content: ' '; background-image: url('../images/about-header-img.jpg'); -webkit-transform: rotate(2deg); -moz-transform: rotate(2deg); -o-transform: rotate(2deg); -ms-transform: rotate(2deg); transform: rotate(2deg); }
Comments
Post a Comment