What is the best way to anchor text to a specific area of an image when resizing?

I am struggling with maintaining consistent formatting for the center text on my splash/masthead/full page image, regardless of resizing. The image I am working with can be viewed [here]1

  • Originally, I attempted to incorporate the text into the background image itself, but my client found that this diminished the "luminosity" of the white compared to other elements.

  • The issue lies in the slight off-center positioning of the glassball element in the background, causing alignment problems.

  • In addition, I need a button to align to the far right of the center text on desktops and below it on mobile screens.

  • All my previous attempts involved adjusting padding and margins along with multiple media queries, which has proven to be inefficient.

If anyone has alternative solutions or advice to offer (particularly since my Photoshop skills are lacking), please share your insights.

Here is a snippet of my Masthead CSS:

.masthead {
  height: 100vh;
  background-image: url('../images/glassball2.jpeg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.btn {
  border-radius: 34.5px;
  border: none;
  color: white;
}

.btn.main-cta {
  font-family: $header-black;
  padding: 20px;
  font-size: 20px;
}

.splash-header h1 {
  text-transform: uppercase;
  font-family: $body-font;
  color: white;
  text-shadow: 0px 5px 5px rgba(0, 0, 0, 0.4);
  letter-spacing: .5px;
  line-height: 1.3em;
}

And here's a glimpse at my HTML structure:

<header class="masthead">
  <div class="container h-100">
    <div class="row h-100 align-items-center">
      <div class="col-md-2">
        <p></p>
      </div>
      <div class="splash-header col-md-7 text-center">
        <h1>your industry link to trusted global marketplaces and technologies</h1>
      </div>

      <div class="col-md-3 text-center">
        <a class="main-cta gradient btn" data-value="contact" href="#">Schedule your free <br> 30-min consultation</a>
      </div>

    </div>
  </div>
</header>
htmlcssimagebootstrap-4flexbox

Answer №1

In order to properly display text over the globe within the viewport, regardless of the aspect ratio compared to the image, a specific approach must be taken. The challenge lies in aligning the text both vertically and horizontally due to the unique shape of the globe.

To achieve this, one can measure the dimensions of the image, as well as the center position and diameter of the globe without being restricted by specific units of measurement.

https://i.sstatic.net/XQpRh.jpg By utilizing CSS calculations based on percentage positions derived from these measurements, it becomes possible to consistently overlay a div element over the globe.

https://i.sstatic.net/uAU2m.jpg

The provided code snippet demonstrates how this can be achieved using CSS variables for flexibility should the image dimensions change. The gray circle serves as a visual guide for placement and can be removed for the final version. It is important to adjust the class naming and font sizes accordingly for production.

While there are more complex methods for keeping text contained within a circle, this snippet aims to establish the fundamental positioning for better alignment.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  width: 100vw;
  height: 100vh;
  /* the image width and height (in any unit) */
  --w: 23.6;
  --h: 14.9;
  /* the globe center and diameter */
  --cx: 12.4;
  --cy: 11;/*10.6*/
  --doriginal: 6.5;
  
  /* we need the actual width of the text to be a little less for portrait phones */
  --d: calc(var(--doriginal) - 0.1);
}

/* for when the width can be accommodated but we have to crop the top and bottom */
#headercontainer {
  width: 100vw;
  height: auto;
  margin-left: 0;
  margin-top: calc(calc(100vh - calc(100vw * calc(var(--h) / var(--w)))) / 2);
  position: fixed;
  overflow:hidden;
}

#headerimg {
  position: relative;
  width: 100vw;
  height: auto;
  overflow: hidden;
}

.center {
/* these 3 lines are here just to demonstrate where the text is going. Remove when have a real image */
  background-color: gray;
  border-style: solid;
  border-radius: 50%;
  
  position: absolute;
  width: calc(calc(var(--d) / var(--w)) * 100%);
  line-height: calc(calc(var(--d) / var(--w)) * 100vw);
  height: calc(calc(var(--d) / var(--h)) * 100%);
  text-align: center;
  left: calc(calc(calc(var(--cx) - calc(var(--d) / 2)) /var(--w)) * 100%);
  top: calc(calc(calc(calc(var(--cy) - calc(var(--d) / 1)) /var(--h)) * 100%));
}

.center h1 {
  margin: auto;
  /*font-size: 1.5em;*/
  font-size: 4vmin;
  font-weight: normal;
  text-transform: uppercase;
  /* font-family: $body-font; */
  font-family: Arial, Helvetica, 'sans serif';
  color: white;
  text-shadow: 0px 5px 5px rgba(0, 0, 0, 0.4);
  letter-spacing: .5px;

/* for vertical centering */
  line-height: 1.5;
  display: inline-block;
  vertical-align: middle;
}

/* for when the height can be accommodated but we have to crop the sides */
@media screen and (max-aspect-ratio: 236/149) {/* rumour has it that you cant use variables in aspect ratios - is that true? */
  #headercontainer, #headerimg {
    height: 100vh;
    width: auto;
    top: 0;
  }
  #headercontainer {
    margin-left: calc(calc(100vw - calc(100vh * calc(var(--w) / var(--h)))) / 2);
    margin-top: 0;
  }
  .center {
    padding: 0 20px 0 20px;/* to stop text flowing slightly out on the right on narrow portrait devices */
    line-height: calc(calc(var(--d) / var(--h)) * 100vh);
  }  
}
<div style="overflow:hidden;">
  <div id="headercontainer">
    <img id="headerimg" src="https://i.sstatic.net/kcTtE.png" />
    <div class="center"><h1>your industry link to trusted global market places and technologies</h1></div>
  </div>
  </div>

To provide context, the original answer sheds light on determining text layout based on different device aspect ratios:

Understanding how text behaves across various device screens with respect to the globe's appearance is critical. By analyzing different scenarios depicted in the images provided, decisions can be made regarding font size, text flow, and maximum text box width.

https://i.sstatic.net/KfnSi.jpg https://i.sstatic.net/o2YNn.jpg

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

What advantages does avoiding the use of float:right offer?

On my website, I have two divs - one on the left side and the other on the right side. However, the client has requested that I do not use float:right. Instead, I have opted for margin-left. What are the advantages of avoiding float:right? Is it better to ...

htmlcsscss-float

Using an HTML and PHP form to store data in the database, it currently defaults to entering "0000-00-00" for the date instead of the date chosen

Recently, I encountered an issue with inserting date information from an HTML form into a database using a PHP file. The HTML form included a date field with an HTML5 datepicker that was supposed to simplify date selection. However, despite adjusting the P ...

phphtmlmysql

Here is a method to capture the redirected URL (href) of an <a> tag that has "href="javascript: return false"" but leads to a different URL when clicked

I am looking for a way to extract the redirected URL from an anchor tag without actually visiting it. I have tried using `selenium` `get_attribute('href')`, but all I get is "javascript: return false". Is there a method to obtain the redirected U ...

htmlpython-3.xselenium-webdriverxpath

Tips for locating a file using javascript

My application scans a folder and displays all folders and HTML files inside it in a dropdown menu. It also shows any HTML files inside an iframe. There is one file named "highlighted.html" that should not appear in the dropdown menu, but if it exists in t ...

javascriptjqueryhtmliframe

Displaying a cordova camera plugin captured photo within the IMG element

Seeking assistance with the Apache Cordova Camera API to display camera-retrieved images. I am able to capture the image, and the file URL looks like: file:///mnt/.....something.jpg However, I am encountering difficulty setting this image in an existing ...

javascriptandroidjqueryhtmlcordova

`I'm having trouble with my PHP variables disappearing after submitting a form (resolved)`

I am new to learning about forms and PHP. Currently, I am experimenting with a simple HTML file from W3Schools that contains the following code: <html> <body> <form action="welcome.php" method="get"> Name: <input type="text" name="na ...

phphtml

Dynamic background image coupled with navigation buttons

Within the realm of Bootstrap 3, I've crafted a navbar that showcases a background image alongside a series of menu items positioned below said image: The following snippet of CSS handles the background image: .navbar-fixed-bottom .navbar-collapse ...

htmlcsstwitter-bootstrap-3background-imagenavbar

Tips for implementing border-radius on Internet Explorer 8:

Similar Question: How to create rounded borders in IE8 using CSS? I typically use css border-radius for the design of my webpages. While they display well in Firefox, I am facing compatibility issues with IE8. Can anyone offer any assistance? Thank yo ...

internet-explorer-8bordercss

When attempting to retrieve text using xpath, Selenium will output "[]" as the result

After implementing an extension to validate the correctness of the xpath, I am facing an issue while trying to extract data using selenium. Despite having a supposedly correct xpath, when I print the variable containing the scraped xpath address, I only se ...

htmlseleniumxpathselenium-chromedriver

What is the best way to ensure that the navigation bar remains in its original position when the size of the browser window is changed?

I'm a beginner in web development and Stack Overflow. This is my first time creating a website and I'm experiencing an issue with the navigation bar. It keeps shifting its position when resizing the browser window. Below is the source code I have ...

htmlcssbrowserresizesticky

Determine the total by multiplying the value of a dropdown menu and a text input field using jQuery when the values are changed

I am new to jQuery and JavaScript. I have a textbox and a select box, and when I enter a value in the textbox and select a value from the select box, I want to display the multiplication of both values in another textbox. I have tried doing this with two t ...

javascriptjqueryhtml

How about having one row with five divs of equal width, each with a margin-right of 20px?

Is there a way to achieve 5 floating divs on one row with a 20px margin-right between each, except for the last-child? This is the desired structure: <div class="f-item pull-left">1</div> <div class="f-item pull-left">2</div> < ...

htmlcsstwitter-bootstrap-3

modify the class's CSS style

Hey there! I'm having an issue with my code snippet. My goal is to change the background color of both fields with the class 'navicon', as shown in the function fu(). However, it's not working as expected. Changing the color based on id ...

javascripthtmlcss

Include background pictures in dropdown menu choices

I am having trouble setting background images for the options in a select dropdown. Can anyone provide guidance on how to achieve this? Thank you. select #imge option[value="1"] { background-image: url(tree.png); } <div id="ddls"> <select ...

jqueryhtmlcss

Three-column layout using CSS fluid design

The arrangement in Column B below does not look right. I successfully created a 3-column layout with the help of this resource. However, it assumes that fixed columns A and B have the same height or start at the same vertical position. In my case, B has an ...

csshtml

Guide to aligning text vertically in a column alongside an image using Bootstrap 5

I have been using the Bootstrap 5.3.2 grid system for most of my website. I am trying to create a layout with an image on the left and text on the right. However, I am facing an issue with aligning the text vertically in the column. Is there a way to achie ...

cssbootstrap-5

Frequently encountering broken styles in Magento 1.9 due to missing CSS and JS files

Recently, I've been facing frequent style breaking issues on my Magento sites (1.9.2+). This results in the home page displaying only text with missing CSS, JS, and images. To fix this problem, I usually clear the cache by deleting the var/cache fold ...

cssmagentocachingstyles

Implementing Update and Delete Features for Database Rows in Repeater

I have a repeater set up to extract and display data from a SQL Server database. Each row in the database has corresponding buttons added to it. Below is the code used to populate the repeater: SqlConnection connR; string connectionStringR = Configu ...

c#htmlcssasp.netsql-server

Is there a way to prevent pop-up windows from appearing when I click the arrow?

Is there a way to display a pop-up window when the green arrow is clicked and then hide it when the arrow is clicked again? I tried using the code below but the pop-up window disappears suddenly. How can I fix this issue using JavaScript only, without jQue ...

javascripthtmlcss

The h3 tag listener is not functioning as expected

I'm seeking assistance with the listeners for my pomodoro clock, specifically for minBreak and plusBreak. Oddly enough, the listeners for minWork and plusWork in jQuery are functioning properly, but the ones for minBreak and plusBreak are not. Any ins ...

javascriptjqueryhtmlcss