i'm facing problem showing whole image on header. tried both contain , cover , nothing week, appreciated.here screenshot of problem , code. 
body { font-family: 'roboto'; color:#464655; background-color: #e5e0cd; outline:none;} {text-decoration: none;} h1{ font-family:"summerhearts-regular"; font-size:30px; text-align:center; letter-spacing:16px;} #cd-intro { background: url(trees.jpg) no-repeat center center fixed; z-index: 2; margin: 0 auto; display:block; background-size:100% 170px; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;} #cd-intro #cd-intro-tagline { width: auto; width:90%; position:relative; max-width: 1170px; margin: 0 auto; text-align: center; padding-top: 20px;} @media screen , (min-width: 1170px) { #cd-intro { height: 170px; } #cd-intro #cd-intro-tagline { padding-top: 5px; } #cd-intro input { font-size: 50px; } } .cd-btn { display: inline-block; padding: 1em 1.8em; background-color:#d23c69; border-radius: 5px; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #e5e0cd; } <html> <body> <header> <section id="cd-intro"> <div id="cd-intro-tagline"> <img src="c:\users\maryam\desktop\travelgeni\trip\css\travel geni.png" alt="mountain view" style="width:110px;left:-80px;top:0;position:absolute;"> <h1 style="top:0;">edit trip</h1> <a href="" class="cd-btn">delete</a> <a href="" class="cd-btn">mark complete</a> </div> <!-- #cd-intro-tagline --> </section> <!-- #cd-intro --> </header> </body> </html>
and want have, picture. 
the image can set background , background-size property can set cover.
body { font-family: 'roboto'; color: #464655; background-color: #e5e0cd; outline: none; } { text-decoration: none; } h1 { font-family: "summerhearts-regular"; font-size: 30px; text-align: center; letter-spacing: 16px; } #cd-intro { background: url(http://www.gettyimages.in/gi-resources/images/embed/new/embed2.jpg) no-repeat; z-index: 2; margin: 0 auto; display: block; background-size: 100% 170px; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } #cd-intro #cd-intro-tagline { width: auto; width: 90%; position: relative; max-width: 1170px; margin: 0 auto; text-align: center; padding-top: 20px; } @media screen , (min-width: 1170px) { #cd-intro { height: 170px; } #cd-intro #cd-intro-tagline { padding-top: 5px; } #cd-intro input { font-size: 50px; } } .cd-btn { display: inline-block; padding: 1em 1.8em; background-color: #d23c69; border-radius: 5px; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #e5e0cd; }<body> <header> <section id="cd-intro"> <div id="cd-intro-tagline"> <h1 style="top:0;">edit trip</h1> <a href="" class="cd-btn">delete</a> <a href="" class="cd-btn">mark complete</a> </div> <!-- #cd-intro-tagline --> </section> <!-- #cd-intro --> </header> </body>
Comments
Post a Comment