We help IT Professionals succeed at work.

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
Comment
Watch Question

Author

Commented:

Author

Commented:
all my concerns is the responsive thing
Scott FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013

Commented:
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/

Author

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 FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013

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

Author

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 FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013

Commented:
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

Author

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.

Author

Commented:
something like this :
<div style="clear: both">
    <h2 style="float: left">Heading 1</h2>
    <h3 style="float: right">Heading 2</h3>
</div>

Author

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
Scott FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013

Commented:
It's too hard to give an answer from an image.  Post a live link to your page or recreate on jsbin.Com

Author

Commented:
I resolved it, it took me some time to try alot of things to come up with the solution.thanks anyway
Owner (Aidellio)
Most Valuable Expert 2015
Commented:

Author

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)
Most Valuable Expert 2015

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