Tutorial: Adding a Full Width...

User 434929 Photo


Ambassador
937 posts

Adding a Full Width Responsive Banner or Header Background Image through CSS .

http://www.youtube.com/watch?v=W1fpax7eK8M

Enjoy it.
Guys at coffeecup are awesometacular.
User 2924428 Photo


Guest
1,718 posts

Thanks Mansour, great tutorials and much appreciated!!
User 91713 Photo


Registered User
83 posts

Mansour, thanks for sharing. I love to watch your instructive videos.
The perfection isn't reached in one pass.
User 434929 Photo


Ambassador
937 posts

My pleasure guys and I am glad it is helpful.
Guys at coffeecup are awesometacular.
User 2088758 Photo


Senior Advisor
2,716 posts

Thanks again for all your time to put this together! I have added it to the Coffeecup YouTube channel

https://www.youtube.com/watch?v=W1fpax7 … p;index=21
Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
User 458539 Photo


Registered User
1,239 posts

Mansour (or forum brains),

What dimensions did you use for the background pic? 72 dpi I suppose? Did you find that it added a lot of load time? Can you add copy or pictures on top of this responsive background? I usially use HTML Editor (converted from dreamweaver) and not super familiar with it yet but seems like you could do the same things that you are doing.

Byron
User 434929 Photo


Ambassador
937 posts

Image has been downloaded from http://www.gratisography.com/ as I have mentioned in demo .
After download any image from mentioned above link you have to optimize the image for web as images are high resolution.

Yes it can be added as background.
Guys at coffeecup are awesometacular.
User 458539 Photo


Registered User
1,239 posts

Thanks

I saw that on the demo but what dimensions do you use for a background - specifically the width - 1500 px 1800 px? What do you find sorks best.

Is there a tutorial for making it a background with responsive elements on top of it? Do you set up a container with bkg image then construct rows and columns on top of it?

Thanks in advance

Byron
User 434929 Photo


Ambassador
937 posts

The best practice explianed here and sometimes the best tool is Google search.
http://www.webmalama.com/the-best-full- … eb-design/

Sorry right now I am away for a week and my computer is not with me. I am using mobile phone to reply. If you go and download a pictuer from above mentioned website you will see the original dimension as I have not touched dimensions for the demo,

Please read my best practice for. Background image in my personal website at following link
http://feizsite.com/CoffeeCup/bg/
Guys at coffeecup are awesometacular.
User 458539 Photo


Registered User
1,239 posts

thanks!!!!!

Hope you are on vacation having fun!

Byron

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.