Split-screen homepage design (CSS)

I am trying to design the homepage for my site using only html/css add-ons and without altering any other rule.

So far, I have managed to create the blocks themselves but I'm stuck on how to position images behind the buttons, center everything vertically and horizontally, and make it responsive...

Any suggestions or tips would be greatly appreciated.

Click here to view intended homepage page link: www.lluisballbe.smugmug.com

Current code being used:

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
}

/* Rest of CSS code included in provided snippet */

To view and download the images to be used (each covering 50%):

Download Images Here

[Top Image][3]

[Bottom image][4]

htmlcss

Answer №1

Here's one way you could approach it:

  1. Include the CSS property height: 50vh; for both #business-top and #photography-bottom in their respective outer containers.
  2. Assign custom background images to your containers using 
    background-image: url('url to image');
  3. Ensure that the images maintain their aspect ratio with background-size: cover;
  4. Position the #logo-separator element by setting its properties to position:absolute; and 
    top: calc( 50% - (height_of_sperator)px);

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

turning every input field's border to red if none of them were filled out at least once

I struggle with javascript and need some help. I have a form with multiple input fields, and I want to ensure that the user fills in at least one of them. I found code that triggers an alert message if the user does not fill in any fields, but I would pref ...

javascriptjqueryhtmlcss

Control the HTML button's state according to the information received from the server

I am currently working with datatable Jquery and using an ajax call to retrieve data from the server. Let's assume that the database consists of three attributes: "Attribute1, Attribute2, Status". Depending on the Status attribute, I need to enable or ...

javascriptjqueryhtmlajaxdatatables

Spin a sphere within a semicircle using html and css

I have been working on a project to animate a ball inside a crescent shape using HTML and CSS. You can check out my codepen here. However, I am facing an issue where the ball is currently stuck at the top of the crescent. I would greatly appreciate any as ...

htmlcssanimation

Having a form challenge - looking to include two distinct posts within a single form. Still a beginner but eager to learn and improve

I have recently developed a form that needs to be both emailed to me and processed through Paypal. The FORM Header for emailing is - <form name="paypal" action="formtoemail.php" method="post"> and the FORM Header for processing through Paypal is - ...

html

Styling components in React using inline styles that are based on JSON values

I'm successfully pulling in JSON data and mapping it within a React component. However, one of the values in the JSON is a HEX code that I want to apply as an inline style for the background color of a div. I have experimented with various methods, b ...

cssjsonreactjs

Include "+5" in cases where additional elements cannot be accommodated

I am working on a project where I have a div called ItemsContainer that dynamically renders an array of items (Item) depending on the screen size. While mapping through the array, I want to check if there is enough space to display the current item. If no ...

htmlcssreactjstypescript

What is the best way to adjust the mobile screen size to display the most optimized version of a web app's

Currently, I am utilizing react, Bootstrap, and some custom sass to construct and style the front end of my web application. While the design appears good on mobile devices, there is an issue where users need to pinch the screen due to it looking slightly ...

cssmobilebootstrap-4sassmedia-queries

Coloring the Text on Buttons

After nearly 24 hours of practicing, I still can't seem to wrap my head around it. Can someone assist me in changing the button text color to white, while keeping everything else the same? //NAVIGATION //======================== .nav ul display: ...

htmlcss

Class without a single TD in TR

<table> <tr class="here"><td><input type="text" readonly=readonly></td></tr> <tr class="here"><td><input type="text" readonly=readonly></td></tr> <tr class="here"><td> ...

htmlcss

Eliminate the dimming background on a discussion thread in Discourse

Working on customizing a theme for my blog using the Discourse engine has been quite interesting. I have noticed that every post, or "topic," loads with a blue background that quickly transitions to the main background color. You can take a look at an exam ...

csssassdiscourse

The matter at hand pertains to the aesthetics of formatting HTML components

Below is my attempt at creating a search box and styling it. However, I am encountering an issue where the CSS properties applied to the box are not being rendered. I have tried including the CSS in a separate file as well as within the script itself, but ...

phphtmlcss

The impact of Opacity CSS on child elements in web design

Struggling to show an error message when a user disables JavaScript. In my current work, I have two div layers - one covering the entire page and another on top to display the warning message. However, I'm facing issues with the opacity settings affec ...

htmlcssopacity

Issue with Bootstrap 5 and vertical ruler (vr) not displaying current color

Utilizing the vr feature from Bootstrap 5 to establish vertical ruler divisions in col-sm-1 between three chartjs graphs in col-sm-3. Encountering a peculiar issue where one vr appears slightly darker than the other. Struggling to determine the cause of th ...

jquerycssangularbootstrap-5

What is the best method to set up separate column filters when using DataTables with serverSide enabled?

I am facing an issue with the search column in my datatable. The problem is that the search functionality doesn't work properly because I am retrieving data from the database in batches of 10 via AJAX when the user clicks on a page number. This means ...

javascripthtmlajaxlaraveldatatables

What is the best way to extract the text from a <div> tag and show it in a different div when clicked on using ng click in AngularJS?

When the button is clicked, the text in ng-model=name should be displayed in the <h2> tag. <div ng-model="name">This is a text</div> <button ng-click="getname()">Click</button> <h2>{{name}}</h2> ...

jqueryhtmlangularjsangularjs-directiveangularjs-scope

Searching Categories with jQuery: Explore Remote Results and Cache System

Seeking to enhance user experience on my website, I have decided to implement the JQuery Category Autocomplete plugin. This will enable users to search through categorized results stored in a separate file at "/search_basic.php" (details of the file's ...

javascriptphpjqueryhtmlcss

Set border-image to have rounded corners

I am attempting to create a circular button with a unique border effect. Here is the code I have implemented so far: body { display: flex; height: 100vh; overflow: hidden; justify-content: center; align-items: center; } button { height: 80px ...

htmlcsssvg

The hover effect generates a flickering sensation

I am having trouble displaying options on an image when hovering over it, as the displayed options keep flickering. $('a').hover(function(event) { var href = $(this).attr('href'); var top = $(this).next().css("bot ...

javascriptjqueryhtmlasp.netcss

Access-Control-Allow-Origin does not permit this origin

function getTotalResultsInfo(gAuthor, gOther) { // Create the appropriate http request var url_to_get = "http://scholar.google.com/scholar?as_q=" + gOther + "&num=" + ret_results + "&as_sauthors=" + gAuthor; $.getJSON(url_to_get, function (data) { ...

javascripthtmlajax

Trouble with alignment of text in two rows using Div/text - a simple fix needed

I'm currently facing some challenges with a simple task, due to being new to web design and system administration. My boss requested two phone numbers instead of one in the top box, and I need them aligned while keeping the "free estimate" button in p ...

csshtmltextindentation