Colored background sections with text and photos on top

vividvisuals

Hey everybody,

First time poster here.

I'm slowly but surely getting my Smugmug site the way I want it but am struggling to do something that I would think would be rather simple: created colored background sections that can have both text and photos on top.

Here is my site currently (just homepage for now): www.vividvisuals.asia

What I'd like is for sections like this (also a Smugmug site): https://www.renanozturk.com/ (the part that introduced who Renan Ozturk is, below the video).

If I could do literally the same thing but with my own photos / text / logos that would be amazing.

Something a bit more simple would also be okay, but the important bit is that I'm able to overlay responsive text AND a logo / photo or two on top of a section that floats over a background slideshow.

Any help would be super appreciated!

Thanks,

-Alex

Hikin' Mike

Looks like you've found out how to make your changes?

vividvisuals

Unfortunately not! I figured out how to have a white background with text and a button but ideally I'd be able to:
1. Dictate the color of the background
2. add PNG logos over top
3. Add a bio photo or other photos on top.
4. Have the text be responsive so that it resizes as the window becomes smaller (right now it is static).

Once I have these in place I'll be able to proceed with building out the rest of my website to match the homepage. I'm sort of at a standstill at the moment though because I just can't do what I want.

Again, the bio section of Renan Ozturk's homepage is the closest I've found to exactly what I'm looking for: https://www.renanozturk.com/

Thanks for your attention! :-D

-Alex

www.vividvisuals.asia

Allen

Looks like he used a page with an HTML box. Inside the box you can write html to make it look however you'd like.

Hikin' Mike

@vividvisuals said:
Unfortunately not! I figured out how to have a white background with text and a button but ideally I'd be able to:
1. Dictate the color of the background

Change the color. Currently your background boxes are white: .hero {background: #fff;}

2. add PNG logos over top

You already do.

Hikin' Mike

For your first box. Remove all of the CSS:

.hero {
    background: #fff;
        background-position-x: 0%;
        background-position-y: 0%;
        background-repeat: repeat;
        background-size: auto;
    background-repeat: no-repeat;
    background-size: 300px 100px;
    background-position: center center;
    height: 50vh;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

Use this instead:

.hero {
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 50px 0;
}

Adding the padding will allow it to be responsive. The 50px is the top/bottom. The background: #fff; is the box background color.

Hikin' Mike

From his about section.

Add a HTML/CSS Block.

HTML

<section> 
  <div class="photo">
    <img src="your-photo-here" /> 
  </div>

  <div class="heading">
    <h1>Header Here</h1>
    <h2>Sub Header Here</h2>
  </div>

  <div class="about-text">
    <p>Text Here</p>    
  </div>

</section>

CSS

.photo {
  float: left;
  padding-right: 20px;
}

.heading {
  float: left;
  padding-right: 20px;
}

.about-text {
  color: #fff;
  letter-spacing: 1px;
  font-size: 1.2em;
  width: 100%;
  text-align: justify;
  padding-right: 20px;
}

You will need to use the Share Feature to get the PHOTO ONLY size.

That should get you closer.

vividvisuals

Hikin' Mike - thanks so much for your help on this.

First step does indeed seem to help with responsiveness of text. Awesome.

For the second step, I've added an HTML / CSS blog and applied the suggested code but it ends up looking kind of whacky (see at bottom: www.vividvisuals.asia). Any idea what I'm doing wrong?

If I could have the exact same bio section that Renan Ozturk's page has and then just replace photos / text and adjust things like color slightly it would work perfectly for me.

Thanks again for your wonderful support and really sorry if this is complicated. I just feel like I'm close to having exactly what I'm envisioning but am at a loss as to how to progress to completion

Hikin' Mike

@vividvisuals said:
Hikin' Mike - thanks so much for your help on this.

First step does indeed seem to help with responsiveness of text. Awesome.

For the second step, I've added an HTML / CSS blog and applied the suggested code but it ends up looking kind of whacky (see at bottom: www.vividvisuals.asia). Any idea what I'm doing wrong?

If I could have the exact same bio section that Renan Ozturk's page has and then just replace photos / text and adjust things like color slightly it would work perfectly for me.

Thanks again for your wonderful support and really sorry if this is complicated. I just feel like I'm close to having exactly what I'm envisioning but am at a loss as to how to progress to completion

You bet...

<section> 
  <div class="photo">
    <img src="https://photos.smugmug.com/photos/i-gptpLRv/0/58d08e3d/X2/i-gptpLRv.png" width="200px"> 
  </div>

  <div class="heading">
    <h1>RENAN OZTURK</h1>
    <h2>EXPEDITION CLIMBER<br>LANDSCAPE ARTIST<br>FILMMAKER</h2>
  </div>

  <div class="about-text">
    <p>Renan lives to tell stories about our connection to the natural world, often set within the most challenging environments on Earth. He’s constantly searching for projects that move him -- films that have a strong visual identity matched with some deeply compelling human element.<br><br>He began his career as an expedition climber and landscape artist, spending years living in a tent beneath the big walls of U.S. National Parks and in the snowy Himalayan mountains. All of his paintings were created on expedition, carrying large cotton canvases on his back, sometimes even using natural pigments pulled straight from the earth to capture these wildly beautiful landscapes. He received National Geographic Adventurer of the Year in 2013 for his combination of cutting-edge first ascents and visual storytelling.<br><br>Currently, Renan works as a commercial and documentary filmmaker, an expedition climber for The North Face, and a photojournalist for Sony and National Geographic. The films he’s made over the years have had a global presence; he’s probably best known for MERU (cinematographer/subject), which won the 2015 Audience Choice Award at Sundance, and the critically acclaimed Sherpa (cinematographer/co-director), which screened at TIFF and Telluride. He’s directed and shot commercial work for major international brands such as Apple, Google, DJI and Nike.</p>
  </div>
</section>

Hikin' Mike

I forgot to include the section in the CSS: section {padding: 30px;}