CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Boaz
Boaz

Reputation: 5084

html text on responsive background image

I want to achieve the following: enter image description here

Where there is a background image, and a text over it (text position is bootstrap offset-6 col-6)

And for it to be responsive.

The thing is, that unlike conventional background, I do care how the background image is truncated, I need the phone to be visible regardless of the width.

I tried: background: url(background-photo.jpg) center center cover no-repeat fixed;

And the invisible img trick on How to get div height to auto-adjust to background size?

In all the cases the phone gets truncated

Assistance will be appreciated

Edit:
As requested - the original div structure is:

<div id="hungry">
    <div class="col-xs-offset-6 col-xl-offset-6 col-xs-6 col-xl-6">
        <p>Hungry doesn't always happen in the kitchen</p>
    </div>
</div>

But I have no problem changing it to whatever works...

Upvotes: 5

Views: 14807

Answers (3)

Gerhard Liebenberg
Gerhard Liebenberg

Reputation: 444

If you don't care about old browsers, you can try flex grid:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <style>

        /*
            Flex Grid
            =========
        */

        #flexContainer {
            display: grid;
            gap: 20px;
            padding: 20px;
            grid-template-rows: auto;
            grid-template-columns: repeat(2, 1fr); /* Use 2 columns of the same size on each row */
        }

        @media screen and (max-width: 768px) {
            #flexContainer {
                grid-template-columns: repeat(1, 1fr); /* Change to one column per row on smaller screens */
            }
        }

        .flexColumn {
            display: grid;
            gap: 20px;
            padding: 20px;
            grid-template-rows: auto;
            grid-template-columns: repeat(1, 1fr);
            border-radius: 5px;
        }

        .textFrame {
            border: solid 1px white;
            margin: 1rem;
            border-radius: 5px;
        }

        .middleText {
            color: white;
            text-align: left;
            padding: 1rem;
        }

        .headerAndFooter {
            color: white;
            text-align: center;
            padding: 0.5rem;
        }

        #flexItem1 {
            background-image: url('../yourImage1');
            background-color: black;
            background-size: cover;
            background-position: top; /* When resizing the image, keep the top */
        }

        #flexItem2 {
            background-image: url('../yourImage2');
            background-color: gray;
            background-size: cover;
            background-position: top;
        }

        /*
            Text Size
            =========
        */

        /* Small screens (default) */
        html {
            font-size: 14px;
        }

        /* Medium and Large screens */
        @media screen and (min-width: 768px) {
            html {
                font-size: 16px;
            }
        }

        /* Large screens only */
        @media screen and (min-width: 1025px) {
            html {
                font-size: 18px;
            }
        }

    </style>
</head>
<body>

    <div id="flexContainer">
        <div id="flexItem1" class="flexColumn">
            <div class="textFrame">
                <div class="headerAndFooter"><h3>Item 1 Header</h3></div>
                <div class="middleText">                    
                    <ul>
                        <li>
                            Item 1 - Info 1
                        </li>
                       <li>
                            Item 1 - Info 2
                        </li>
                        <li>
                            Item 1 - Info 3
                        </li>
                    </ul>
                </div>
                <div class="headerAndFooter"><h3>Item 1 Footer</h3></div>
            </div>
        </div>
        <div id="flexItem2" class="flexColumn">      
            <div class="textFrame">
                <div class="headerAndFooter"><h3>Item 2 Header</h3></div>
                <div class="middleText">                    
                    <ul>
                        <li>
                            Item 2 - Info 1
                        </li>
                       <li>
                            Item 2 - Info 2
                        </li>
                        <li>
                            Item 2 - Info 3
                        </li>
                    </ul>
                </div>
                <div class="headerAndFooter"><h3>Item 2 Footer</h3></div>
            </div>
        </div>
    </div>
</body>
</html>

Output: Horizontal

enter image description here

Output: Vertical

enter image description here

Upvotes: 0

Alvaro Montoro
Alvaro Montoro

Reputation: 29655

Solution with JavaScript

I know this is not a CSS-only solution a I use JavaScript, but it could help as a temporary solution while we look for a CSS thing.

The HTML would be the same as you posted:

<div id="hungry">
    <div class="col-xs-offset-6 col-xl-offset-6 col-xs-6 col-xl-6">
        <p>Hungry doesn't always happen in the kitchen</p>
    </div>
</div>

The CSS for the div with id "hungry" would look like this:

#hungry {
    background:url('https://i.sstatic.net/7xasp.jpg') no-repeat center center ;
    background-size:cover;
    width:100%;
}

And finally, with JavaScript (I used jQuery to make it easier), you resize the height of #hungry depending on the screen width:

// you know the size for your image
imageWidth = 1919;
imageHeight = 761;
imageProportion = imageHeight/imageWidth;

function resizeJumbo() {
    $("#hungry").css({ height: $(window).width() * imageProportion });
}

$(window).on("resize", function() {
    resizeJumbo();
});

$(document).ready(function() {
    resizeJumbo();
});

You can see a demo working on this fiddle: http://jsfiddle.net/hyfz0Lga/.

Solution with CSS only

Just update the CSS for the hungry div a little:

#hungry {
    background:url('https://i.sstatic.net/7xasp.jpg') no-repeat center center ;
    background-size:cover;
    width:100%;
    padding-top:20%;
    padding-bottom:20%;
}

You can see it working here: http://jsfiddle.net/hyfz0Lga/1/.

Why padding-top:20% and padding-bottom:20%?

Those values have to do with the size of the picture, and the proportion between them. In your case: width = 1919 and height = 761, so the proportion between width and height is (761 / 1919) * 100 = 39.65%. Just add half that value on top, and half that value at the bottom, then the text will remain always in the middle, and the picture will always be proportional.

I know it's a bit "hacky" and plays with knowing some data, but it seems to be working fairly well.

Upvotes: 4

Coding Enthusiast
Coding Enthusiast

Reputation: 3933

you could try tweaking the jumbotron class in Bootstrap 3 just like i did for my website. 

.jumbotron {
    background: url('background-photo.jpg') no-repeat center center;
}

you could change the dimension of the jumbotron depending on the dimensions you want. 

<div row jumbotron>
    <div class="col-md-6 col-md-offset-6">text</div>
</div>

Upvotes: 0

Related Questions