Adjust the size of items using a background image that covers the element

I'm struggling with a seemingly simple task here. I've been experimenting with different methods, but I just can't seem to grasp it.

On the front page of my website, there is a cover section that contains a logo and a button:

<section id="cover">

        <div id="cover-caption" class="animated fadeInDown">

            <p style="padding-bottom: 2rem;"><img src="http://bizcentralusa.com/wp-content/uploads/2016/05/placeholder-sample-logo.png" alt="Sample Logo" /></p>
            <p class="lead">
                <a class="btn btn-primary btn-lg" data-scroll href="#getStarted" role="button">GET STARTED <i class="fa fa-angle-right animated wobble infinite" aria-hidden="true"></i>
                </a>
            </p>

        </div>

    </section>

The cover page background features an image of a laptop covering half of the page. My goal is to position the logo and button between the top of the page and the start of the laptop screen.

This is what I have attempted so far, you can see the visual representation through this Demo.

Usually, I would adjust the padding on the #cover-caption container to achieve the desired position. However, this method doesn't work consistently across different screen resolutions. While it appeared fine on my PC, the positioning was off when I tested it on my Macbook due to variations in browser height. I am looking for a way to automatically adjust the position of the logo and button based on changes in the background image when the browser window's height is altered. Is this even possible?

You can access my complete code here.

javascripthtmlcssbackgroundbootstrap-4

Answer №1

Utilizing css flexbox and viewport height can make this task a breeze.

#cover-caption{
  display: flex;
    height: 66vh;
    flex-direction: column;
  justify-content: center;
}
#cover-caption > *{
  flex: 0 1 auto;
}

Check out the modified version on fiddle

Answer №2

Consider experimenting with CSS by using the following code snippet:

#cover-caption{
    display: block;width: 20%;margin: 20px auto;position: relative;top: 100px;
}

Implementing this could have a positive impact.

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

Sliding background in a multi-column accordion

I've hit a roadblock with this project. I'm working on setting up a FAQ section that needs to display its items in two columns on desktop, each with a drop shadow effect using Bootstrap 4. I've experimented with Flexbox and CSS columns with ...

htmlcssgridaccordion

Issue with Bootstrap 4 progress bar malfunctioning in popover due to CSS property restrictions within the popover container

The following code functions correctly in the body area: <div class="progress" style="height: 25px;"> <div class="progress-bar" style="width: 30%;" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"> </div> & ...

htmlcsstwitter-bootstrap

Is JavaScript utilizing Non-blocking I/O at the operating system level to enable AJAX functionality?

Given that Javascript operates as a single threaded process and AJAX functions asynchronously, the question arises: How does this happen? Is it possible that at the operating system level, the JS engine is responsible for making non-blocking I/O calls fo ...

javascriptajaxsocketsasynchronousnonblocking

Issue with jQuery not being able to retrieve the data from my CSS property

this is my custom style code: table.table tr td{ padding:30px; border-left: double 1px white; border-bottom: double 1px white; cursor:cell; } and below is the jQuery script I am using: $(document).ready(function () { ...

javascriptjqueryhtmlcss

Chrome is blocking my ajax cross-origin request, causing it to be cancelled

I have been working on a Google Chrome extension and encountering an issue with my ajax requests. Every time my extension sends a request, it ends up getting cancelled for some unknown reason. The following code snippet seems to be functioning properly: ...

javascriptjqueryajaxgoogle-chrome

Look for identical values within a nested array

My data consists of a nested array where each element has a property called name, which can only be either A or B. I need to compare all elements and determine if they are all either A or B. Here is an example of the input: [ { "arr": { "teach ...

javascriptarraystypescriptdictionary

Incorporating server-side rendered components into a Vue.js parent component

I have a server-side rendered page that includes information about "orders" and a root Vue object initialized as the "parent object." Is it feasible to assign the rendered HTML orders as children of that parent Vue object? Vue.js is known for its dynamic ...

javascripthtmlvue.jsserver-side-rendering

Leverage the controller's properties and methods within the directive

My situation involves a variety of inputs, each with specific directives: <input mask-value="ssn" validate="checkSsn"/> <input mask-value="pin" validate="checkPin"/> These properties are managed in the controller: app.controller("Ctrl", [&ap ...

javascriptangularjsangularjs-directive

Prevent the default scroll event triggered by the mousewheel in certain situations. It is not possible to use preventDefault within a passive event

I have a div element with the onWheel attribute. By default, the browser interprets onWheel as scroll behavior. However, I want to prevent the browser's default mouse behavior under certain conditions. Unfortunately, I encountered an error that say ...

javascriptreactjs

Alignment issue with procedural plane vertices in threeJS

In my project, I am utilizing threeJS along with a Simplex noise algorithm to create a tile system consisting of 50x50 planes. Currently, I am iterating through x+y and adding each plane. The Simplex noise algorithm is then used to calculate the z position ...

javascriptthree.jsverticesprocedural-generationsimplex-noise

Using Angular.js to Make a $http.get Request from a Different Controller

I am utilizing an HTTP resource that provides a JSON list of top 10 entities from a database by calling it in this manner: var filter= "john"; var myApp = angular.module('myApp', []); myApp.controller('SearchController', [&apo ...

javascriptangularjsangularjs-scope

Leverage SVGs imported directly from the node_modules directory

Our architecture has been modularized by creating a node_module that contains all SVG files. Using the following code works perfectly: <q-icon> <svg> <use xlink:href="~svgmodule/svgs/icons.svg#addicon"></use> </svg> ...

javascriptnode.jsvue.jssvgquasar-framework

Using jQuery's .live('click') method will only bind to the initial element found on the webpage

I developed a custom jQuery plugin that attaches to 8 different elements on a webpage. Within each element, I intended to utilize the .live() method to bind a click event to a link, triggering a form submission via ajax. However, I encountered an issue whe ...

javascriptjqueryajax

Tips for resolving this unhandled error in React TypeScript

After creating a program in React TypeScript, I encountered an uncaught error. Despite running and debugging tests and conducting extensive research on Google, I have been unable to resolve this issue on my own. Therefore, I am reaching out for assistance ...

javascriptreactjsnode.jstypescriptvscode-debugger

The "if" statement carries out the identical action each time it is executed

Despite my efforts to toggle the value of the turn variable every time the if statement runs, I keep encountering the same outcome. It appears that turn consistently evaluates as 2. Below is the code snippet in question: $(function() { var turn = 2; ...

javascriptjqueryhtmlcssif-statement

Removing item from Angular service

Within my Angular 2 application, I have created a service called events.service.ts: const EVENTS = { 1512205360: { event: 'foo' }, 1511208360: { event: 'bar' } } @Injectable() export class EventsService { getEvents() ...

javascriptangularangular-services

Issue with the Animated Skill Bar not functioning properly when scrolling

I've been trying to implement an animated skill bar in my Portfolio using JQuery, but I'm facing some challenges. Despite following various tutorials, the code doesn't seem to work as expected. I've tried calculating section scroll posi ...

javascriptjqueryhtmlcssscroll

Add characters to div using JavaScript

I am curious about which framework, if any, would be most effective for capturing keystrokes and adding them to an HTML element such as a "p" element. My goal is to allow the client to type something on the keyboard and have it immediately displayed in the ...

javascripthtmlcssappendkeystrokes

Halt the Changing of Button and Typography Styles with React Router and MUI

I am currently working on a component that I want to make clickable. However, when I wrap them in a <Link> element (from react-router-dom) or set component={Link} to="" on them, all the text inside them automatically becomes hyperlinks. For ...

cssreactjsmaterial-ui

Using iMacros to assign a variable the value of another variable

Running an imacro to automate the addition of sub-domain DNS records through the 123reg front end has presented some challenges due to my specific naming convention. I am mapping two sets of domains as follows: - x.x.x.1 to x.x.x.128 on domain1.com - x.x. ...

javascriptimacros