Adjusting the size, position, and dimensions of image and text divs as the browser window is resized

I am struggling to find a solution to what seems like a common question but unfortunately haven't been able to locate an answer on Google. Any assistance would be greatly appreciated.

My website features a full-size resizable background image using the following CSS:

html
{
    background-size:contain;
    background: black url(../images/myimage.jpg);
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:center; 
}

Within this image, I have two z-layer DIVs - one with an image and another with text.

However, when resizing the browser window, my DIVs become unpredictable and do not adjust accordingly. They remain static while the background image shrinks.

How can I ensure that these DIVs containing important elements are always in the correct position regardless of screen resolution or resizing? Would CSS, JavaScript, or jQuery be the best approach?

Any advice on the most effective method to achieve this would be highly appreciated!

p.s. Please let me know if clarification or a sample code snippet is required.

javascriptjquerycsshtml

Answer №1

Utilizing CSS would be the most effective approach for your situation. It is recommended to adjust the position of the div by setting it to either fixed, absolute, or relative, depending on the specific case at hand. When set to fixed, the item will remain in place even when the user scrolls, whereas with absolute, the item will scroll along with the page and can be positioned anywhere on the page regardless of its container. Relative positioning is based on the parent container elements or the window itself if there are no other containers.

If using fixed or absolute, specifying a value for right will keep the item aligned to the right side of the screen during window resizing or different resolutions. Similarly, values for left, top, and bottom will function accordingly. These values can be assigned as percentages for responsive design or as specific measurements such as pixels, centimeters, millimeters, inches, etc. For more clarity, refer to this resource. You can also check out this example on jsfiddle for reference.

Answer №2

Here are some suggestions from my perspective:

  • Eliminate any extra white space in the background image

  • Remove the background image from the body tag and instead use a main div to contain all your content

  • Delete the 'element1' div and incorporate the background color into the 'content1' div itself

  • For handling content positioning based on different screen resolutions, there are two options: 1) Utilize CSS media queries 2) Implement relative positioning using CSS

  • CSS media queries can be cumbersome when supporting various resolutions, so opt for CSS relative positioning instead

For example:

<div class="wrapper">
  <div class="content1">Content</div> 
</div> 

.wrapper{ position:relative; width:100%; overflow:hidden; background:url(yourBgImage.jpg);background-size:100% 100%;}
.content1{position:absolute; top:20%; left:10%;}

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

Tips for successfully transferring a blob within a .run method

I've searched through the Google Apps Script Reference but couldn't find an answer to my question. Can a blob be passed through a .run() function in a Google script? Below is the code I am working with: Within my HTML file's script, there i ...

javascriptgoogle-apps-scriptblob

bootstrap 4 - logo in navbar brand stays the same even when scrolling

I integrated Bootstrap 4 and successfully created a navbar. However, I am encountering a conflict when trying to change the navbar logo upon scrolling down. Despite my efforts, it is not functioning as expected. Does anyone know how to resolve this issue? ...

javascriptjqueryhtmltwitter-bootstrapbootstrap-4

"Learn the steps to access a JSON file directly from a URL within a Next.js

My goal is to upload a JSON file to the server from a URL, open it, parse it, and display its features on Google Maps. However, I am encountering an error with the "fs" library preventing me from opening the file. Below is the code: "use client" ...

javascriptreactjsnode.jsgoogle-mapsnext.js

CSS styling is not being applied to buttons within Ionic 2

I'm completely new to Ionic and hybrid apps as a whole. I've been experimenting with a test app, but for some reason, none of the CSS seems to be working. Could someone please help me figure out what mistake I might have made? Here are my files: ...

htmlcssangularsassionic2

The postback or callback argument is invalid; there seems to be an issue with the

There have been multiple discussions about encountering an error on an aspx web form page. The error message reads: "Invalid postback or callback argument. Event validation is enabled using in configuration or <%@ Page EnableEventValidation="true" %& ...

c#jqueryasp.netwebforms

Steps to create a pop-up displaying a unique message ID retrieved from my database

My goal is to implement a pop-up message dialog on my website. When a user clicks on a reply icon, a pop-up message will appear with a textarea for the user to respond to a question they have been asked. The current issue is that clicking on the tag alway ...

javascriptphphtmljqueryajax

How can I modify the font style of an HTML table?

After reviewing the HTML table below. Follow this jsfiddle link: <table id="tabla" align="center" cellspacing="15" cellpadding="0"> <tr> <td><input type="button" value="Form View"></input></td> < ...

javascriptjqueryhtmlcss

Tips for reducing the border size to properly accommodate a div

I am wondering how to adjust the border size to fit the div containing a h5, hr, and two p elements? <div style="border: black 0.5px solid; align-self: start;"> <h5 style="margin-left: 450px; margin-top: 200px;">xxxx</h5> <hr w ...

html

Node/Express: Defining route identifiers for the root route '/'

I am in the process of creating a directory application where content is dynamically rendered on the server based on specific parameters. This directory functions as a subapplication within a larger app running on Apache. To redirect to Node when necessary ...

javascriptnode.jsexpressroutesrequirejs

What methods can I use to troubleshoot queries being sent through mysql2?

According to the readme for mysql2: MySQL2 is mostly compatible with mysqljs This package includes an option described as: debug: This option prints protocol details to stdout. It can be set to true/false or an array of packet type names that should b ...

javascriptmysqlnode.jsmysqljs

What is the best way to insert a permanent script tag into the body of a Gatsby site? Can conditional rendering be used to control

As an illustration: - const nation = "USA" import chat from './utils/script'; // script is imported from a file if(nation === "USA") // utilized conditionally in the component { chat } else { console.log("Not USA") } inform me witho ...

javascriptreactjsgatsby

Combining two divs to share the same linear gradient and shadow effect

Greetings to all our valued partners! I am seeking guidance on how to achieve the following task for a web application I am developing: Within my webapp, I have designed a stylish NavBar similar to the examples depicted in the images (in AdobeXD it is di ...

htmlcssmergeshadow

Facing difficulties in displaying a variable on the screen in AngularJS?

I am struggling with a small controller and some basic data in my code. When I click the link, my messages are not showing up as expected. Surprisingly, there are no errors in the console and when I check the variables, they do show up. However, for some r ...

javascriptjqueryhtmlangularjsangular-routing

Struggling to get my upload form to function properly with two different versions of jQuery, even after attempting to use jQuery.noConflict

I am facing an issue with a webpage that contains two different forms. The first form is for uploading pictures and generating the link for the uploaded images, while the second form is a regular one used to add products to a database using the links from ...

phpjqueryformstwitter-bootstrap

knockout and jquery combination for creating an expandable menu

I'm currently working on putting together a collapsible menu using knockout and jquery, but it seems like jquery isn't activating for some reason. You can find the script here <ul id="usernav" data-bind="template: { name: 'seasonTem ...

jqueryknockout.js

Fundamental modeling using Node.js with Mongoose

Currently, I am facing a challenge with developing a node.js application. My goal is to create a model for a musical scale that includes a name and a set of associated notes: var mongoose = require('mongoose'); var Schema = mongoose.Schema; var ...

javascriptnode.jsmongodbmodeling

When a single object is modified in a JavaScript array, all the elements are affected

I am working with an array of 71 objects: var data = [] This array is populated with data from a database, containing both static and dynamic elements for each object in the data. angular.forEach(returnData,function(value,index) { if(!Array.isArray(va ...

javascriptarraysangularjs

Add the content of a JavaScript variable to a label without using any scripting

Is there a way to concatenate the value of a JavaScript variable with a label without utilizing jQuery? For example: Var global_message = "1234"; <label id="my-label">Test</label> I desire the concatenated value "Test1234" to be displayed o ...

javascripthtml

difficulty eliminating white space in HTML display using Bootstrap

Encountering an issue with the template view below. A scrollbar was added to the "Used in" table at the bottom, but there is excessive whitespace beneath it. Removing divs/elements one by one reveals that the problem seems to stem from the table itself. v ...

htmlcssdjangoscrollwhitespace

Is there a way to ensure that the content within a transparent div is completely visible?

Can this be done? If not, does anyone have any creative workarounds? This demonstration will clearly illustrate the issue I am facing http://jsfiddle.net/9AWdz/ ...

css