Currently in the process of designing a landing page for my website, and I am interested in incorporating a Jumbotron to provide a more modern and tech-savvy touch. Successfully managed to center my text both horizontally and vertically, now looking into setting up the background image. Encountered an issue where I need the Div to adjust its height based on the background image while keeping the text centered. Below is a snippet of my HTML:
<div class="jumbo">
<div class="jumboCon">
<h1 class="centre">Kraft, unique</h1>
<p>The best present is a special one</p>
<div class="action">
<p>Search!</p>
</div>
</div>
</div>
Additionally, here is the corresponding CSS:
.jumbo {
width: 100%;
background-image: url(../img/kraft.png);
}
.jumboCon {
width: 50%;
margin: auto;
position: relative;
top: 50%;
transform: translateY(-50%);
color: #fcfcfc;
}
After reviewing various questions and answers regarding this issue such as this one, the suggestion was to place the image directly in the Div, but that poses a challenge since I also need to center text within. Adding to the complexity, the dimensions of the image will vary since users will be promoting their own pictures.
I am aiming to achieve a similar effect as demonstrated on the Ghost website which you can view here. While not proficient in JavaScript, I'm confident in my ability to copy and paste code snippets if necessary. Appreciate any assistance!
Sincerely, Nick