how does one achieve this type of...

User 283347 Photo


Registered User
388 posts

Hey Chris,

Thanks, again, for the update. It seems the default browser on my Android phone does not render the images correctly either way...Chrome and Firefox both do? I have not looked on an iphone.

So anyway...I found a little tut on line for a header effect, but I dont know how to make it responsive. It looks good on a desktop but all sorts of out of whack on a phone. Right now I'm trying a whole bunch of things but no success. Any ideas you might be willing to share? mynetshepherd.coffeecup.com


Have a good one!
User 283347 Photo


Registered User
388 posts

Hey Chris...if you're out there...would you mind posting the image example you posted in this thread before? I would like to see the css that went with it.

thanks

Mark
User 473158 Photo


Registered User
17 posts

Hi Mark

Have you tried something like

body > .row.row-1 {
background: url(../img/???.jpg) no-repeat center center fixed;
background-size: contain;
}

This sales the background image proportionally.
User 473158 Photo


Registered User
17 posts


Update: It seems you can achieve this effect easily with the new RSD !
User 232214 Photo


COO
827 posts

Chris wrote:

Update: It seems you can achieve this effect easily with the new RSD !

Indeed :P
The future of web layout has arrived and it's called CSS Grid. CoffeeCup helps you to get ready with a free guide, the Grid Builder app plus cool demos & themes.
User 283347 Photo


Registered User
388 posts

:)lol...I see that...well I learned the hard way,too...but now I have my copy of rsd and I'll see what happens!!

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.