• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

How to add a muted background

New Here ,
Sep 01, 2023 Sep 01, 2023

Copy link to clipboard

Copied

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.

TOPICS
How to

Views

249

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Sep 01, 2023 Sep 01, 2023

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Sep 01, 2023 Sep 01, 2023

Copy link to clipboard

Copied

 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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Sep 02, 2023 Sep 02, 2023

Copy link to clipboard

Copied

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Sep 02, 2023 Sep 02, 2023

Copy link to clipboard

Copied

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.

 

<!-- Hero Section -->

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Sep 02, 2023 Sep 02, 2023

Copy link to clipboard

Copied

quote

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.

 

<!-- Hero Section -->

  <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%)

 

 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Sep 02, 2023 Sep 02, 2023

Copy link to clipboard

Copied

The first column has a picture and the next column has introduction text in it.  I'm wanting to add a background image that sets behind those columns and scale both coluns.  But, I don't want the background image to extend the full page....just within that container

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Sep 02, 2023 Sep 02, 2023

Copy link to clipboard

Copied

quote

The first column has a picture and the next column has introduction text in it.  I'm wanting to add a background image that sets behind those columns and scale both coluns.  But, I don't want the background image to extend the full page....just within that container


By @Janette31230643hhkz

 

As you only appear to have the 2 columns in the <section class="intro"> then thats what the code I provided above will do. 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Sep 02, 2023 Sep 02, 2023

Copy link to clipboard

Copied

LATEST

@Janette31230643hhkz,

In order to give more precise answers, we need the related .intro and .column CSS styles, too. 

 

It's unclear from HTML alone if you're working with CSS Flexbox, Grids or old fashioned Floats.  The latter could be more problematic than the former two.

 

An example, with CSS Grids:

image.png

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Grid Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1"><meta http-equiv="X-UA-Compatible" content="IE=edge">

<style>
.intro { 
display: grid;
grid-column-start: col 0;
grid-gap: 5px;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-template-rows: repeat(auto-fit, 1fr);
/**adjust background values to suit**/
background-color:antiquewhite;
opacity:60%;
}

.column img {
vertical-align:middle;
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<h2>CSS Grid Test</h2>
<div class="intro">

<div class="column"> 
<h3>Heading 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit error repellat voluptas officiis cum. Facilis eum voluptatum eius. </p>
<img src="https://dummyimage.com/650x490>" alt="placeholder">
</div><!--/column-->

<div class="column"> 
<h3>Heading 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit error repellat voluptas officiis cum. Facilis eum voluptatum eius. Voluptatum voluptate similique culpa nisi nesciunt inventore eveniet animi, molestias, magnam consequuntur.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit error repellat voluptas officiis cum. Facilis eum voluptatum eius. Voluptatum voluptate similique culpa nisi nesciunt inventore eveniet animi, molestias, magnam consequuntur.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit error repellat voluptas officiis cum. Facilis eum voluptatum eius. Voluptatum voluptate similique culpa nisi nesciunt inventore eveniet animi, molestias, magnam consequuntur.</p>
</div> <!--/column-->
</div> <!--/intro-->
</body>
</html>

 

 

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Sep 02, 2023 Sep 02, 2023

Copy link to clipboard

Copied

 

quote

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.

 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Sep 02, 2023 Sep 02, 2023

Copy link to clipboard

Copied

@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 & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines