Participant

Question

How to add a muted background

Forum|Forum|2 years ago
September 1, 2023
4 replies
711 views

Hello,

I'm new to Dreamweaver. Is there a way I can add a muted background within the "Hero Section" that will scale two columns in version 21.3?

Thank you so much. Have a wonderful weekend.

How to

This topic has been closed for replies.

Nancy OShea

Community Expert

@Janette31230643hhkz,

If you use Bootstrap's responsive layout system, you can add background classes to the container.

These are the utility classes for Bootstrap version 5.1 or higher:

https://getbootstrap.com/docs/5.2/utilities/background/

If you don't use Bootstrap, you'll have to do it manually with the CSS background property.

https://www.w3schools.com/cssref/css3_pr_background.php

Nancy O'Shea— Product User & Community Expert

O

osgood_

Legend

Is there a way I can add a muted background within the "Hero Section" that will scale two columns

By @Janette31230643hhkz

The key is to show us your current hero structure code. Typically a hero section comprises of just the single column so I'm intrigued to see how many columns your hero section has and how they are set up. As far as I know a background image can only span one single column and can't extend into a seperate adjacent column as columns are independent of one another and usually have a gap between them.........unless you mean something else.

You probably need to clarify 'muted'. Im assuming there is some text in your hero section and the background image, left as is, would interfere with its readability unless it was muted? Muted can mean making the image darker or lighter, depending on what color you require the text overlaying the background image to be.

L

L e n a

Community Expert

It’s all depend on your current structure and your main goal, so I don’t know if it will be helpfull for you but you can explore those links :

J

Janette31230643hhkzAuthor

Participant

Thank you for your response. I will take a look at these links. Below is the coding I'm wanting to add a muted background to that will scale both columns. Thank you again.

<p>additional text</p>

</div>

</section>

O

osgood_

Legend

Thank you for your response. I will take a look at these links. Below is the coding I'm wanting to add a muted background to that will scale both columns. Thank you again.


<section class="intro">
    <div class="column">
      <h3>Name</h3>
      <img src=" images/profile.png" alt="" class="profile"> </div>
    <div class="column">
      <p>text here </p>
      <p>additional text</p>
    </div>
</section>

By @Janette31230643hhkz

Is there any reason you can't add a background image to your 'intro' section by applying the ::after css pseudo-element, assuming the two columns span the width of the 'intro' section?

CSS code

.intro {
position: relative;
}
.intro::after {
content: '';
position: absolute;
top: 0;
width: 100%;
height: 100%;
background-image: url('yourBgImageName.jpg');
background-size: cover;
background-position: center center;
opacity: 0.5
}

Or if you want to darken the image instead of using opacity as in the code above, use:

filter: brightness(50%)

B

Ben M

Community Expert

You can do it but it will have to be done via code as there is nothing built into DW to drag and drop for you. If you are looking for an editor that is more drag and drop, DW may not be for you.

J

Janette31230643hhkzAuthor

Participant

Thank you for your response. I'm not looking for another editor, I just don't know what code I would put in the Hero Section to get the background image to scale across the two columns within the Hero Section.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded