i using foundation 4 framework personal site (not 100% portfolio site, more advertising myself freelancer) , have contact box background image set , these css styles applied:
#contact-box {width: 1052px; height: 400px; background-image: url('../images/contact-bg.png'); margin-top: 150px;} i want make scales down when shrink browser, instead gives me horizontal scrollbar , doesn't scale @ , know it's because of 1052px width set... how code out it's responsive? if use max width , max height breaks div , removes bg image. contact box has contact form in (which responsive) along phone number, email, , 3 social icons.
i wanted leave comment don't seem have option..
i don't know if answer want make background images scale window size code this:
width: 100%; height: 400px; background-image: url('../images/contact-bg.png'); background-size: 100%; margin-top: 150px; you can use css code div tags , page body, although in experimentation width , height values not necessary page body. doing way maintain aspect ratio of background image , should allow scale window.
since above example maintains aspect ratio, image scale vertically point exceeds size of container in , appear cut off on bottom. alternatively can use:
width: 100%; height: 400px; background-image: url('../images/contact-bg.png'); background-size: 100% 400px; margin-top: 150px; the second argument background-size element make sure image never scales vertically @ all. method result in background image being horizontally stretched whenever window's width exceeds aspect preserved width of image using.
hope helps! :)
Comments
Post a Comment