SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Evangelist mumford1's Avatar
    Join Date
    Sep 2002
    Location
    UK
    Posts
    571
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Responsive Bground Image With Text Overlayed Left and Right (Bootstrap 3)

    Hi

    I am using Bootstrap 3 and I have my header and footer in place.

    I have attached an image as to what I am trying to achieve, as I have tried but just cannot get it to work.

    The background needs to span the full width of the screen and the text needs to stay within the container.

    This content sites just beneath the header and navigation.

    Can somebody please help me with this, as I just cannot get it to work

    Many Thanks, I would really appreciate it.

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,519
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Hi, mumford1. I'm not sure whether or not we can help you, but it's a sure bet that we can't do you any good without seeing your code.
    Do you suppose you can post a link to your page?

    Please understand that we are not a Bootstrap shop, but we will give it a shot from a CSS perspective. You may have to translate our advice into "Bootstrap" to make it work.

  3. #3
    SitePoint Evangelist mumford1's Avatar
    Join Date
    Sep 2002
    Location
    UK
    Posts
    571
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi

    I have uploaded 4 examples I have been working http://www.cre8tivesource.co.uk/test/about-us.html

    The bottom one is the closest, but I cannot seem to pull up the text any further to the top. Hope this helps.

    Many Thanks

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    You are better off using a true background image. It makes life much easier. E.g.

    Code:
    .row-banner {
      background-image: url(http://www.cre8tivesource.co.uk/test/img/about-breaking.jpg);
      background-size: cover;
    }

  5. #5
    SitePoint Evangelist mumford1's Avatar
    Join Date
    Sep 2002
    Location
    UK
    Posts
    571
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi

    But does that not have problems for versions of IE?

  6. #6
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,519
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by mumford1 View Post
    Hi

    But does that not have problems for versions of IE?
    Which versions of IE do you wish to support?

  7. #7
    SitePoint Evangelist mumford1's Avatar
    Join Date
    Sep 2002
    Location
    UK
    Posts
    571
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    7+ would be good?

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Supporting 7 is a waste of time, and so too (arguably) is IE8. But it's up to you. For those browsers, you could just have a wide, centered bg image and be done with it.

  9. #9
    SitePoint Evangelist mumford1's Avatar
    Join Date
    Sep 2002
    Location
    UK
    Posts
    571
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  10. #10
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,519
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Bootstrap 3 does not support IE7.

    Seems that some degree of compatibility can be obtained, but achieving that is up to the individual.
    (I have not read the article. And I agree with Ralph that it's a waste of energy.)

    http://www.extremecss.com/tag/bootstrap-3-ie7-fix/

  11. #11
    SitePoint Evangelist mumford1's Avatar
    Join Date
    Sep 2002
    Location
    UK
    Posts
    571
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, but I would like to get this working for example on Firefox and Chrome, that would be a big help.

  12. #12
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by mumford1 View Post
    The CSS is here
    OK, and where's your live example?

  13. #13
    SitePoint Evangelist mumford1's Avatar
    Join Date
    Sep 2002
    Location
    UK
    Posts
    571
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi

    I gave the link in post number 3 - http://www.cre8tivesource.co.uk/test/about-us.html

  14. #14
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    It would be more useful to see the page where you really want this to go, though.

  15. #15
    SitePoint Evangelist mumford1's Avatar
    Join Date
    Sep 2002
    Location
    UK
    Posts
    571
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi

    I do not have that at the moment, is this not ok? http://www.cre8tivesource.co.uk/test/about-us.html

  16. #16
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,519
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    I don't understand what that page is supposed to represent. Is that showing 4 of your attempts to raise the text? Just create a page that shows your best effort. We may be able to work with that.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •