10
Replies
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%)
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.
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:
<!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>
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.
AdChoices