HTML CSS question


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
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

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:
adra750Author Commented:
all my concerns is the responsive thing
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
For a full page responsive background look for a javascript or jquery project.  One is backstretch

Just apply it to your wrapper

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.
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook 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
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.
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.
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

         Top left

   div col-sm-3
         Top right

      Add cols and content here

Add custom css for margin top on class bottom.

Sorry for the short hand on the phone
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.
adra750Author Commented:
something like this :
<div style="clear: both">
    <h2 style="float: left">Heading 1</h2>
    <h3 style="float: right">Heading 2</h3>
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
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
adra750Author Commented:
I resolved it, it took me some time to try alot of things to come up with the solution.thanks anyway
RobOwner (Aidellio)Commented:

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.
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.
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

From novice to tech pro — start learning today.