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

The specified number of columns and width values are being disregarded

The Challenge While using the CSS column-property to create columns on my webpage, I have encountered some unusual behavior with the layout engine. Specifically, I have set up the following styling: body { padding: 0; background-color: black; margi ...

htmlcsscolumn-widthcss-multicolumn-layoutcolumn-count

Choose all list elements except the final one

I need to display a list of tags horizontally and add a comma after each item except for the last one. Here is how I can achieve this using CSS: ul.tags { list-style: none; } ul.tags > li { display: inline; } ul.tags > li:after { con ...

htmlcsscss-selectors

Is there a way to showcase every published WordPress page in a drop-down menu?

I am having trouble displaying all the published pages within my WordPress site as a dropdown list. Here is the code I have attempted to use: <div class="header-right"> <?php $pages = get_pages(); $posts = get_pages(array( ...

phphtmldatabasewordpresswordpress-theming

Incorporating HTML into the Ajax Response

I recently encountered a strange issue with a service that returns an HTML page as the AJAX response. This page contains a form that is automatically triggered by scripts within the page, resulting in a POST request being sent when the page is rendered. My ...

javascriptjqueryhtmlajaxforms

Clicking on the spinner does not activate it

I've implemented a basic spinner on my website, and it works fine when using the keyboard. However, I'm experiencing issues with mouse clicks. I can't seem to figure out what is causing this problem. Below is the code snippet related to the ...

jqueryhtmljquery-ui-spinner

Mixing box-shadow and blur filters can result in unusual artifacts appearing in Webkit browsers

Recently, I encountered an intriguing and frustrating bug in WebKit browsers. Consider a scenario where there is a parent DIV (let's say .wrapper) and a child DIV (.main). You apply a box-shadow on the .main DIV and a blur filter on the .wrapper DIV. ...

javascriptjqueryhtmlcss

Adding a div to the preceding div based on matching IDs in AngularJS

Here is a representation of my layout in HTML: <div ng-repeat="message in messages"> <div ng-class="{'messages messages--sent': userId == message.id, 'messages messages--received': userId != me ...

javascripthtmlcssangularjs

What is the preferred method for writing `*zoom: 1;` in CSS?

Trying to create my code, I decided to borrow some CSS files from older code. However, upon running yarn build I encountered several errors like: ▲ [WARNING] Expected identifier but found "*" [css-syntax-error] <stdin>:122:2: 122 │ * ...

css

Using the jQuery datetimepicker in the 12-hour format with AM and PM

Hey there! I'm looking to enhance my current code by adding a feature that displays time in a 12-hour format with AM/PM. You can check out an example of this functionality on jsfiddle by following this link: http://jsfiddle.net/8ztsjcos/3/. Thank you ...

jqueryhtmljquery-ui

Interactive canvas artwork featuring particles

Just came across this interesting demo at . Any ideas on how to draw PNG images on a canvas along with other objects? I know it's not a pressing issue, but I'm curious to learn more. ...

javascriptjquerycsshtml

Trouble displaying AngularJS $scope.data in the HTML code

I'm experiencing an issue where the data received from a POST request is being logged in the console, but is not displaying on the HTML page. Despite having a controller set up, the {{user}} variable is not appearing on the HTML page. While I can se ...

javascripthtmlangularjs

Consistent sizing for Bootstrap thumbnail images

In my current project, I am implementing a Bootstrap thumbnail feature where each thumbnail consists of an image and a heading. However, a problem arose as the images do not have the same size, resulting in thumbnails with varying dimensions. To resolve th ...

jqueryhtmlcssangularjstwitter-bootstrap

display and conceal a division by clicking a hyperlink

How can I make a hidden div become visible when clicking on a specific link without using jQuery? Javascript function show() { var a = document.getElementsByTagName("a"); if (a.id == "link1") { document.getElementByID("content1").style.v ...

javascripthtmlshow-hide

Is it possible to make an image gradually appear and disappear?

Is there a way to create a continuous fade in and out effect for an image, transitioning between 40% and 100% opacity? I attempted using a CSS3 opacity property, but it only allows for 0% and 100%, causing the fade effect to be ineffective. Does anyone h ...

jqueryhtmlcss

Utilize HTML5 to send a document to Google Drive API

I'm currently developing a Google Chrome extension that utilizes the Google Drive API to upload files. While handling text files isn't an issue, I encounter errors when attempting to upload binary files. When trying to upload a file using the Fi ...

htmlfile-uploadgoogle-drive-api

quickest method for attaching a click listener to dynamically added elements in the document object model

When adding multiple elements to the DOM, how can we ensure that these elements also have a click handler attached to them? For instance, if there is a click handler on all elements with the "canvas-section" class, and new "canvas-section" elements are con ...

javascriptjqueryhtml

Is it possible to display a pdf.js page as actual HTML elements rather than as canvas or SVG?

I am in the process of creating a user-friendly mobile interface for pdf reading. However, I want to incorporate more advanced features by developing my own pdf reader instead of relying on the pdf.js team's viewer. Is there a method available to rend ...

javascripthtmlhtml5-canvaspdf.jspdfjs-dist

Is it possible to continuously generate webpages using AJAX?

Is there a way to achieve an infinite scrolling effect in all directions using ajax requests without the need for flash or silverlight? If anyone has an example of this, I would love to see it! Thank you for your time. ...

javascriptjqueryhtmlcss

Switching the background image upon hover while incorporating a subtle fade transition in HTML and CSS

Is there a way to set two background images on a div and have them change when hovering with a fade effect? Similar to the example shown. .kid { max-width:50%; position:relative; } .kid img { display:block; opacity:1; height: auto; transition:.6s ease; ...

htmlcssanimationhoverfade

Could a css style be applied to a parent element based on the status of its child element?

In my specific context, this is the HTML code I have: <div class='table'> <div> <div *ngFor='let product of this.market[selectedTab].products | orderBy:"id"' class='itemlist' [ngClass]="{' ...

cssangular7parent-childangular-ng-ifng-class