HTML CSS question

Hello,

I need an example where you have an image full screen as background responsive and 2 words at the top, name of company at the left side and "Login" at the right side + 2 buttons at the middle.

check the screenshot so you can understand my question.

How to achieve this via html and css
adra750Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

adra750Author Commented:
0
adra750Author Commented:
all my concerns is the responsive thing
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
For a full page responsive background look for a javascript or jquery project.  One is backstretch  http://srobbin.com/jquery-plugins/backstretch/

Just apply it to your wrapper
  $("#wrapper").backstretch("url_to_your_image.jpg");

Open in new window

That alone will be a responsive background image.  Then I suggest using bootstrap or foundation as your responsive library.  They are much easier than trying to roll your own media queries.
http://getbootstrap.com/
http://foundation.zurb.com/
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

adra750Author Commented:
Help me out only with the company name text, login text to be on same line and responsive because this is the index page, the other pages I'll implement bootstrap
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
I would use bootstrap on this page too.  

Gve it a try on your own using rows and columns using bootstrap classes.

post your code and link if you run into issues.
0
adra750Author Commented:
with all respect, why you think I posted the question here? If I can do it myself I wouldn't bother to post it here.

you can ignore it if you can't help.
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
I thought you understood bootstrap.  We can help you with your code but you should be able to have a starting point.

I can Com back to this later but you will want something like

div.row
   div.col-sm-9
         Top left

   div col-sm-3
         Top right

div.row.bottom
      Add cols and content here

Add custom css for margin top on class bottom.

Sorry for the short hand on the phone
0
adra750Author Commented:
I'm sorry but I don't know how this will achieve my needs, I tried something but it's not the best way based on the results.


Any other experts please.
0
adra750Author Commented:
something like this :
<div style="clear: both">
    <h2 style="float: left">Heading 1</h2>
    <h3 style="float: right">Heading 2</h3>
</div>
0
adra750Author Commented:
The issue happens when I change the font size of the company text, please check the screenshot.

That's what i want to fix
Screen-Shot-2015-04-18-at-4.17.25-PM.png
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
It's too hard to give an answer from an image.  Post a live link to your page or recreate on jsbin.Com
0
adra750Author Commented:
I resolved it, it took me some time to try alot of things to come up with the solution.thanks anyway
0
RobOwner (Aidellio)Commented:
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
adra750Author Commented:
thank you, 1 thing I noticed is that when you use width 100% the image will not be responsive....But i fixed that other way.
0
RobOwner (Aidellio)Commented:
actually it is responsive because the image changes size. what I think you mean is it not to move in which case you can fix the width to something like 1024px, however screens with > 1024px on the horizontal you'll see whitespace on the right.  In this case you would use a media query to set the width to 100% above a certain horizontal resolution and set to 1024px below 1024px for instance.
this is where the plugins mentioned and JavaScript come into play as they centre that image add-ons a certain point.

Please review the grade as my solution is what was asked for.

http://support.experts-exchange.com/customer/portal/articles/481419
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.