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

HTML & CSS
1

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

Many Thanks, I would really appreciate it.

2

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

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

You are better off using a true background image. It makes life much easier. E.g.

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

Hi

But does that not have problems for versions of IE?

6

Which versions of IE do you wish to support?

7

7+ would be good?

8

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

Hi

The CSS is here http://www.cre8tivesource.co.uk/test/css/styles.css

10

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

Ok, but I would like to get this working for example on Firefox and Chrome, that would be a big help.

12

OK, and whereā€™s your live example?

13

Hi

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

14

It would be more useful to see the page where you really want this to go, though.

15

Hi

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

16

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.