Opaque Blocks of White on a Background Image

Hello Family,
I’m new at this so please bear with me… In a site I’ve designed, I have a full-page background image for each navigation keyword (about, work, contact, etc.). I’d like to place low-opacity blocks of white over the image (see attached image). 1. Should I make these blocks of white divs and position them relatively… and 2. What are the considerations in building a mobile-first responsive site with this design element?

It’s a pretty page, but it looks like a desktop sized rendering of a photoshop layout. Have you created a mobile sized image? That would be a place to start… so you/we can see how you expect the page is to evolve as the viewport changes.

Yes, container blocks of transparent white backgrounds with text will be used, but how they are positioned depends on the overall design. Too early to guess.

A working page would be helpful, if you have one.

@ronpat
I just have this design concept right now.
Actually, after I posted it I thought that I should have shown a progression from mobile-first…
I’ll do that and repost… but I really want to know the best way to position the blocks of white…

Thank you for taking the time to look and comment…

“Best” in web page code depends on the overall layout, the context. There is no cut and dry absolute “best” method that is always the “best” in every situation.

I am not willing to hazard guesses until I know more about the page. The choices depend on the layout… how you expect the content to flow.

The “best” answer is: “it depends”.

Really

It’s generaly a bad idea to try to position elements over a background image, in the hope that they will align—especially if the background image if full-page. It just doesn’t work well on the fluid medium of the web. Make sure those white bars aren’t part of the background image. Ideally, let that image move a flow behind the content as it needs to.

On a mobile, you’d have the surfer as a full page background, and just let the other elements stack one above the other, leaving out the white bars altogether.

Here’s a quick mock up (11 mins start to finish) of how I would start with this.

http://www.pmob.co.uk/temp/surfer.html

<!DOCTYPE HTML>
<html>
<head>
<!-- force IE8+ into standards mode -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<title></title>
<!-- must have viewport meta tag for mobile support -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
html {box-sizing: border-box;}
*, *:before, *:after {box-sizing: inherit;}
html, body {
    margin:0;
    padding:0;
    height:100%
}
h1 {margin:0}
body {
    background:lightblue url(images/sunset.jpg) no-repeat 50% 50% fixed;/* surfer dude image would go here */
    background-size:cover;
}
.wrap {
    display:table;
    height:100%;
    width:100%;
}
.tc {
    display:table-cell;
    vertical-align:top;
    padding:10px;
}
.top,.base{height:50%}
.tr {display:table-row}
.mid .tc {height:1px;}
.blank {width:10%}
.strip {width:100px}
.strip, .topcontent {vertical-align:bottom;}
.midcontent, .strip, .opaque, .box {
    background:rgba(255,255,255,0.5);
}
p.icon {
    text-align:center;
    margin:0 0 25px;
}
.box {
    width:60%;
    text-align:left;
    padding:10px;
    margin:25px auto;
}
@media screen and (max-width:768px){
    .wrap{display:block;height:auto}
    .tc,.tr{display:block;width:auto;height:auto;}
    .box{width:auto}
    .blank,.spacer{display:none;}
    .top,.base{height:auto}    
}

</style>
</head>

<body>
<div class="wrap">
        <div class="tr top">
                <div class="tc blank"></div>
                <div class="tc strip">
                        <p class="icon">Icon</p>
                </div>
                <div class="tc topcontent">
                        <h1>About</h1>
                </div>
        </div>
        <div class="tr mid">
                <div class="tc blank opaque"></div>
                <div class="tc spacer"></div>
                <div class="tc midcontent">
                        <nav><a href="#">work</a> <a href="#">services</a> <a href="#">content</a> </nav>
                </div>
        </div>
        <div class="tr base">
                <div class="tc blank"></div>
                <div class="tc strip"></div>
                <div class="tc basecontent">
                        <div class="box">
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas iaculis tellus est. In placerat dui sed magna condimentum, at mattis nisi tristique. Sed suscipit non purus vel cursus. Donec ac convallis eros. Nulla facilisi. Integer elit nulla, condimentum eget massa feugiat, venenatis varius tortor. Duis iaculis diam magna, at finibus dolor porta vitae. Morbi bibendum dolor nisl, eu tristique velit fringilla quis. Nullam eget arcu euismod, fermentum nisi tempus, hendrerit dolor. Etiam malesuada malesuada vestibulum. Curabitur dignissim libero in odio fringilla interdum. Vestibulum ut congue leo. Nulla in justo turpis. </p>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas iaculis tellus est. In placerat dui sed magna condimentum, at mattis nisi tristique. Sed suscipit non purus vel cursus. Donec ac convallis eros. Nulla facilisi. Integer elit nulla, condimentum eget massa feugiat, venenatis varius tortor. Duis iaculis diam magna, at finibus dolor porta vitae. Morbi bibendum dolor nisl, eu tristique velit fringilla quis. Nullam eget arcu euismod, fermentum nisi tempus, hendrerit dolor. Etiam malesuada malesuada vestibulum. Curabitur dignissim libero in odio fringilla interdum. Vestibulum ut congue leo. Nulla in justo turpis. </p>
                        </div>
                </div>
        </div>
</div>
</body>
</html>

This is just a rough idea that can be refined. You could probably lose some of the empty elements using :before and :after but it might complicate things. The design has basic responsiveness but can be tweaked to suit.

1 Like

@PaulOB You are a Godsend! Since I’m new, it’ll take me a short time to study and review your code. I just started studying “display: table” and it did not click at the time, but you brought it to life. I really appreciate your time and effort in helping me. I’m at work now, but I can’t wait until the weekend so I can study what you and all of the others have suggested.
Again, thank you so much. I hope as I grow that I can return the knowledge…

Og!

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.