Positioning the midcontent within a fullwidth image presents quite a challenge

Concerning the design I have, I am facing some uncertainties. Here are my thoughts on it:

If desired, the individuals in the background can be portrayed using a static image. With a CMS system in place, my client will have the opportunity to upload images if someone demonstrates an example where the insertion of individual images is required.

Initially, I considered incorporating the red component into the background image; however, this resulted in diminished quality for both the individuals and the red section when viewed on large screens (1920>). The text should be fetched from the CMS system and placed similarly to how it appears in the image.

  1. The red boxes are equivalent in width to the individual pictures. This implies that utilizing percent width will present challenges if they are distinct images.
  2. The individual images should span the entire browser screen. It is acceptable if certain individuals extend beyond the boundaries of the picture as depicted in the image itself.
  3. A parallax effect on the content would be nice but not essential.

Another idea was considering creating each individual picture separately and employing isotopes for precise positioning. However, this approach may make achieving full screen coverage difficult since misalignment could occur along the bottom row.

An alternative strategy involves unifying the red section and the entire image of individuals into one cohesive unit, utilizing maximage for the person image while positioning the red part with percentages. Nonetheless, ensuring equal width for the red boxes as well as individual boxes may pose a challenge. In contrast, managing text placement might be simpler when combined into a single comprehensive image (including the red portion).

I welcome any suggestions, examples, advice, or tips on handling this situation. Your assistance would be greatly appreciated!

Would Bootstrap offer a solution to my dilemma?

csshtml

Answer №1

Check out this link for a demonstration: http://jsfiddle.net/hMrN9/

This code snippet utilizes Jquery to adjust the size of blocks into squares, with the option to customize the ratio through math adjustments.

$( window ).load(function() {
    $(".consentra-box").height($(".consentra-box").width());
});
$( window ).resize(function() {
    $(".consentra-box").height($(".consentra-box").width());
});

To create a special tall box, use the following markup:

<div class="consentra-box consentra-red" >
     <div class="inner-red-box" style=" z-index: 999;"></div>
</div>

Here is the CSS to style the tall box:

.inner-red-box { background-color: #ee002f; height: 15%; margin-top: -15%; width: 100%; }
.consentra-box { position: relative; float: left; width: 14.28%; }

You can easily insert your image elements as backgrounds in the DIVs or IMGs set to 100%x100%

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

When an absolute positioned DIV is nested inside a relatively positioned DIV, it disappears when the page is scrolled

A unique feature of my DIV is that it remains fixed at the top of the page as you scroll. This is achieved by setting its position to fixed. However, within this main container, I have another div with a relative position. While the content in the relative ...

javascriptjqueryhtmlcsspositioning

Navigate through pages using scrollspy without losing your position when returning

Hey all you web geeks out there, I could really use your help solving a little issue. I've been working with Bootstrap to build a website that utilizes scrollspy for navigating different sections of the page using the navbar. The only way I could sto ...

javascriptjqueryhtmlcsstwitter-bootstrap

The formatting of the datepicker-popup is malfunctioning when the initial value is set within the scope

I have implemented the Angular UI bootstrap date picker popup using a custom directive on Plunker (http://plnkr.co/edit/053VJYm1MpZUiKwFTfrT?p=preview): //Module var userModule = angular.module("userModule",['ui.bootstrap']); //Controller userM ...

javascripthtmlangularjsangularjs-directiveangular-ui-bootstrap

Issues with updating the style in Internet Explorer and Firefox using JavaScript are currently unresolved

I am facing an issue with my program where a name from an auto-complete is sent to a JavaScript function that dynamically creates a label with a button inside. Surprisingly, the DOM methods used to set style properties do not work in Firefox and IE 7, but ...

javascripthtmldynamicinternet-explorer-8styles

AngularJS 1: Dynamically updating input values in real-time

Hey everyone, I'm experimenting with Angular and have encountered a roadblock. I am trying to assign values to an input element using ng-repeat for a list of parameters. <input type="text" ng-model="parameters.inParameterName" class="form-control ...

htmlangularjsangular-ngmodel

Can a website be designed to load a specific font for mobile phones, such as Arial Black for iOS?

Although the font Arial Black is commonly available on both Mac and PC systems, it is not accessible on iOS devices. Is there a way for a webpage to implement CSS techniques or tricks (such as assigning a class like "mobile" or "ios" to the body element), ...

htmlcssiphonewebfonts

What is the best way to align navigation arrows vertically?

I am working on a modal album that displays images of various sizes. My issue is with styling the navigation arrows to appear in the center of the page, regardless of the image size. I have included my code below: <div class="row img-box"> <d ...

htmlcssbootstrap-4

Issue with jQuery where it returns "undefined" when trying to access the CSS display property

On my page, there are several divs with default display styles set in an external .css file. When a certain condition is met, I use jQuery to turn one on and the others off using the fadeIn() and fadeOut() methods. However, I've noticed that in Firef ...

jqueryfirefoxcss

Get rid of the border surrounding a main call-to-action button

While trying to override Bootstrap styles, I encountered a problem. Whenever the user presses a primary button <button class="btn btn-primary">Test</button> An annoying blue outline appears and I can't seem to remove it. I attempted to o ...

csstwitter-bootstrap-3

Select only the immediate descendants of a div that are not images

Can we select only the immediate children of a div excluding images? Is there a way to achieve this using the :not-selector or any similar method? For example: http://codepen.io/anon/pen/hlrAg Incorporating a media query, I want to apply left/right-padd ...

csscss-selectors

Creating an image and video slider using bootstrap techniques

Currently, I am attempting to create an image and video slider using bootstrap. However, the slider I have created is not functioning as expected. For instance, the slider is not pausing for videos, and the videos are not autoplaying. I attempted to sear ...

javascripthtmlbootstrap-4slidercarousel

Can $refs cause issues with interpolation?

I'm currently learning Vue.js and the course instructor mentioned that modifying the DOM element using $refs should not affect interpolation. In fact, any changes made directly to the DOM will be overridden by interpolation if it exists. However, in m ...

javascripthtmlvue.js

Having trouble transmitting form data to PHP

I'm experiencing an issue where the form data is disappearing after submission. I am currently working in phpStorm with XAMPP on my local machine. Here is my index.html file: <form action="test.php" method="post"> <input type="text" nam ...

phphtml

Tips for preventing labels from overlapping in JavaScript

After texturing an image to a sphere in 3D (as shown below), I encountered an issue where the planegeometry labels were overlapping. I am looking for a way to separate these labels using the three.js library. 2 labelBox.prototype.update = function() { ca ...

javascriptcssmath3dthree.js

Side navigation bar expands to the right with Bootstrap

I've been attempting to horizontally expand the links in the side navbar, but I'm struggling to achieve the desired layout despite following Bootstrap 4 tutorials. Below is my code snippet. <li class="active dropright"> ...

htmlbootstrap-4

Employing bootstrap to include oversized images within a compact, fixed div

I am facing an issue with image responsiveness in the middle row of my layout. Despite using Bootstrap 4 and applying classes like img-fluid, the images in my #fullColumn area do not resize properly. The images are dragged into this area by users and are ...

htmlcssbootstrap-4

Unable to load the Bootstrap CSS file from the specified import path: "bootstrap/dist/css/bootstrap.min.css"

I am currently working on a React application where I have a page that utilizes components from the react-bootstrap library. The issue I'm facing is related to styling, even though I have already imported the necessary bootstrap CSS file: import "boot ...

cssreactjscomputer-sciencereact-bootstrapvisual-web-developer

A guide on utilizing jQuery to increase the value of an index

When the server returns JSON in this format: "games": [{ "gameType": "RPG", "publishers": [{ "publisher": "Square", "titles": [{ "title": "Final Fantasy", "gameReleases": [ 2006, 2008, 2010, 2012, 2013, 2014 ...

javascriptjqueryhtmljson

Update the CSS styles using jQuery

I am looking to update the content within a CSS tag using jQuery. In this instance, I need to change "My content" to "New Content". Here is the CSS code I have: a.appari:focus:after{ background: #333; background: rgba(0,0,0,.8); border-radius: 5px ...

javascriptjquerycss

Ebook document featuring a dual-column layout

Seeking recommendations for EPUB files that contain two columns. I'm struggling to implement two columns in my CSS file. ...

htmlcssepubibooks