Move the button to the following line and center it. Ensure that the background image remains at full size

.home{
    background-image:url("https://cdn.pixabay.com/photo/2016/12/27/21/03/lone-tree-1934897_960_720.jpg");
    background-repeat: no-repeat;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hero-text{
font-size:32px;
}

.btn-hero{
    position:relative;
    font-size:20px;
    background:transparent;
    border:2px solid #282828;
    border-radius:28px;
    padding:10px 30px;
}
<div class="home">
<h1 class="hero-text">Everything Starts with Your Awesome Website</h1>
<br>
<button type="button" class="btn btn-hero">Create Now</button>
</div>

Centering the text and button while bringing the button to a new line is my goal. Additionally, I aim to have the background image fill the device screen based on its height.

htmlcsstwitter-bootstrap

Answer №1

Here's a code snippet for you to use:

<!DOCTYPE html>
<html>
  <head>
    <style>
      .home{
        background-image:url("https://cdn.pixabay.com/photo/2016/12/27/21/03/lone-tree-1934897_960_720.jpg");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        width:100%;
        height:500px;
        max-width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: -15px 0px;
      }
      .hero-text{
        font-size:32px;
      }

      .btn-hero{
        position:relative;
        font-size:20px;
        background:transparent;
        border:2px solid #282828;
        border-radius:28px;
        padding:10px 30px;
        z-index: 999;
        color:white;
      }
      body{margin: 0px;}
    </style>
  </head>
  <body>
    <div class="container-fluid">
      <div class="home">
        <h1 class="hero-text">Everything Starts with Your Awesome Website</h1>
     </div>
      <div style="text-align: center;margin-top: -150px;">
        <button type="button" class="btn btn-hero">Create Now</button>
      </div> 
    </div>
</body>
</html>

Answer №2

To enhance the layout of .home, include flex-direction: column and for .hero-text, apply text-align: center. Ensure the background fills the space by adding background-size: cover to .home.

.home{
background-image:url("https://cdn.pixabay.com/photo/2016/12/27/21/03/lone-tree-1934897_960_720.jpg");
background-repeat: no-repeat;
    backgroud-size: cover;
height: 100vh;
display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.hero-text{
font-size:32px;
    text-align: center;
}

.btn-hero{
font-size:20px;
background:transparent;
border:2px solid #282828;
border-radius:28px;
padding:10px 30px;
}
<div class="home">
<h1 class="hero-text">Everything Starts with Your Awesome Website</h1>
<button type="button" class="btn btn-hero">Create Now</button>
</div>

Answer №3

.home{
   position: relative;
      background-image:url("https://cdn.pixabay.com/photo/2016/12/27/21/03/lone-tree-1934897_960_720.jpg");
      size:cover;
      background-repeat: no-repeat;
      height: 100vh;
     align-items: center;
       justify-content: center;
      background-size:cover;
    
  
    }
    .hero-text{
        font-size:32px;
    }

    .btn-hero{
      position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size:20px;
        background:transparent;
        border:2px solid #282828;
        border-radius:28px;
        padding:10px 30px;

    }
<div class="home">
    <h1 class="hero-text">Everything Starts with Your Awesome Website</h1>
    <button type="button" class="btn btn-hero" style="position:center">Create Now</button>
</div>

.home{
      background-image:url ("https://cdn.pixabay.com/photo/2016/12/27/21/03/lone-tree-1934897_960_720.jpg");
      size:cover;
      background-repeat: no-repeat;
      height: 100vh;
     align-items: center;
       justify-content: center;
      background-size:cover;
    }
    .hero-text{
        font-size:32px;
    }

    .btn-hero{
      position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size:20px;
        background:transparent;
        border:2px solid #282828;
        border-radius:28px;
        padding:10px 30px;

    }

<div class="home">
    <h1 class="hero-text">Everything Starts with Your Awesome Website</h1>
    <button type="button" class="btn btn-hero" style="position:center">Create Now</button>
</div>

Answer №4

Are you satisfied with this design?

.homepage{
   position: relative;
      background-image:url("https://cdn.pixabay.com/photo/2016/12/27/21/03/lone-tree-1934897_960_720.jpg");
      size:cover;
      background-repeat: no-repeat;
      height: 100vh;
     align-items: center;
       justify-content: center;
      background-size:cover;
    
  
    }
    .text-hero{
    position: absolute;
     top: 25%;
    left: 50%;
      transform: translate(-50%, -50%);
        font-size:32px;
        background:transparent;
        padding:0px 0px;
    }

    .button-hero{
      position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size:20px;
       background:transparent;
        border:2px solid #282828;
        border-radius:28px;
        padding:10px 30px;

    }
<div class="homepage">
    <h1 class="text-hero">Start Your Journey with an Amazing Website</h1>
    <button type="button" class="btn button-hero" >Get Started Now</button>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

There appears to be a malfunction with certain hyperlinks on the table

There seems to be an issue with the four links in the third column, first, second, third, and fourth rows (Order Form PDF, Rental App PDF, Married Rental PDF, and Consent Form PDF) as they are not functioning properly. Below is the provided code snippet: ...

htmlcss

How can you spot the conclusion of different lines that refuse to remain in place?

Currently, I am facing a jquery issue that has left me stumped. The website I am working on is structured as follows: <div class="Header"></div> <div class="main"><?php include('content.html'); ?></div> <div clas ...

javascriptphpjqueryhtmlcss

Tips for avoiding duplicates when searching with the simple HTML DOM parser

Is there a way to exclude duplicate content from an HTML page using the simple HTML dom class? For example, if you check out this link: http://www.gutenberg.org/wiki/Category:Agriculture_Bookshelf, you'll notice that the term Forestry appears twice. ...

phphtmlhtml-parsingsimple-html-domhtml-parser

Guide on updating a table row upon clicking the edit button in an Angular 12 template-driven form

Currently, I have set up a table where the data can be edited by clicking on a hyperlink and then saving the changes with a button. The issue I am facing is that when I click on the edit link, all rows become editable instead of just the specific row I cli ...

htmlangulartypescriptangular2-templateangular12

Adjust div height to match the dynamic height of an image using jQuery

I'm facing an issue with my image setup. It has a width set to 100% and a min-width of 1024px, but I can't seem to get the 'shadow' div to stay on top of it as the window size changes. The height of the shadow div also needs to match th ...

javascriptjqueryimagecss

organize multiple blocks in the middle of the page (html)

This code is unique and belongs to me. <html> <head><title>HOME||~All About EDM~</title> </head> <body > <center><img src="edm1.jpg" alt="edm" width="950" height="250"></body></center> <c ...

htmlcssblock

Creating an AngularJS directive specifically for a certain <div> tag

Recently, I began learning angularjs and came across a script to change the font size. However, this script ended up changing all <p> tags on the entire webpage. Is there a way to modify the font size of <p> tags only within the <div class=" ...

javascripthtmlcssangularjs

What is the process of generating a dynamic card/button element on an ASP.net webpage using information from the backend database?

I'm faced with a challenge of displaying employees' names and titles from a MSSQL Server database table on an ASP .NET webform as individual "card" objects. Currently, I am able to showcase a static number of records by using an asp button object ...

javascriptc#cssasp.netasp.net-mvc

Tips for replicating input boxes in a while loop

https://i.sstatic.net/iuNIl.png HTML : <table> <tr> <td> <input type="text" name="name[]" value=" echo $ail"> <label >Address</label> <input type="text" name="coun ...

javascriptphpjqueryhtml

When utilizing jQuery version 1.10.2, the HTML markup shows up prior to the page completing its loading process

I am trying to import one HTML page into another, but when I load or refresh the page, the HTML markup appears before the page fully loads. How can I fix this issue? <head> <script type="text/javascript" src="js/jquery-1.10.2.js" ></scr ...

javascriptjqueryhtmlcsspageload

Is there anyone who can provide a comprehensive explanation for what is going on here?

{ // Let's figure out how to launch my HTML file as a webpage in Chrome. "version": "0.2.0", "configurations": [ { "type": "pwa-chrome", &q ...

htmljsonvisual-studio-code

Is there a way in Angular2 to append a class name from a variable to the host element without removing the current classes?

I am facing a challenge where I have a class name stored in a variable and I need to apply it to the host element of my Angular2 component. However, I am struggling to find a solution for this. While I can easily add a constant string as a class using Hos ...

cssangularthemes

A blank screen of errors pops up when attempting to update through a form

Encountering a white error screen when attempting to add an item using a form in Python / Django. I'm currently debugging the issue but lacking information. Any guidance on where to look next would be greatly appreciated. Models.py from __future__ i ...

javascriptpythonhtmlcssdjango

Exploring how to replicate background-size: cover with a center position using HTML5's <video> tag

Looking to replicate the effect of background-size: cover on a <video> element. I was able to achieve this with the code below: <video id="videobackground" autoplay="true" loop="true"> <source src="BackgroundFinal2.mp4" type="video/mp4" ...

csshtml

Creating an interactive Table of Contents in Sharepoint using only JavaScript

Imagine you have a massive Sharepoint wiki page filled with various heading tags like H1, H2, H3, and H4 - now picture creating a dynamic Table of Contents using these tags. The goal is to categorize these tags by group and utilize the HTML <detail> ...

javascripthtmlfor-loopsharepointtableofcontents

Would this code effectively disable the right-clicking menu for MathJax?

My current approach involves utilizing the following code snippet: <script type="tet/x-mathjax-config"> MathJax.Hub.Config({ showMathMenu: false }); </script> I intended for this code to disable the right-click menu on my math webs ...

javascripthtmlmathjax

What is the best way to customize the appearance of the initial row in each tr cluster?

Looking to add a button for expanding child rows within a datatable, with each group in the table having the same child elements.... The provided CSS currently displays the icon on every row throughout the entire table. td.details-control { backg ...

htmlcssdatatablesgrouping

Activating Vue-Bootstrap components through an image click event in VueJS 2

Seeking to achieve: VueJS integration with Bootstrap for clickable cards I am currently working on a VueJS project where I want the cards to be clickable and reveal collapsible elements upon click. To accomplish this, I have implemented a button with the ...

htmlcssvuejs2bootstrap-vue

Utilizing jQuery for automatic redirection in place of performing regular AJAX requests

My form validation script using bootstrapvalidator () performs an ajax call upon successful validation (e.g., checkbox checked, not empty). However, I encountered a problem when trying to integrate it with the ICheck plugin (). Instead of executing the aj ...

jqueryajaxtwitter-bootstrapicheck

Updating the background image with Jquery is resulting in a distracting flicker effect

Here is a snippet of the script I'm using to create a slider that changes the background image for each image object in a specified time cycle. #Sliderimg - height set to 500px, $("#Sliderimg").css({ "background-image": "url(../Images/" + SliderIma ...

javascriptjquerycss