Adjust text placement with Image resizing using CSS and HTML

Question

Adjust text placement with Image resizing using CSS and HTML

I've spent countless hours on this task, scouring through over 20 articles, and I am still at a loss on how to proceed. My expertise lies in designing backgrounds, where I carefully position text in specific locations. However, when I view the design on a monitor with a larger resolution, everything falls out of place. The background adjusts perfectly, but the text does not cooperate.

Below are images that illustrate my dilemma:

Desired text placement at any resolution (1440 x 900 monitor):

Actual appearance on a 1080p Monitor:

 <body>
  <div id="blah">
<p id="pr">This is a paragraph!</p>
</div>
  </body>
</html>


body {background-image:url(back.jpg); background-size:cover;}
#blah{font-size:large; left:300px; top:200px; position:absolute;}

edit: I attempted the suggested solutions involving divs and adjusting text positioning with absolute and relative values, yet the issue persists - the text continues to shift.

#contain{
position:relative;
width:7000px;
margin:0 auto;}


#blah{font-size:large; left:100px; top:200px; position:absolute;}

I do not seek a fixed solution as I plan on adding more content, necessitating vertical scrolling without the text displacement.

html css position

Answer 1

Answer №1

Ensure that your #blah div is placed within a relative div to avoid any positioning issues, especially when using absolute positioning in relation to the body. Consider nesting it inside another div or utilize fixed positioning instead.

#containerDiv {position:relative;}
#blah {position: absolute; top:200px; left:300px;}

<div id="containerDiv "><div id="blah"></div></div>

Alternatively:

#blah {position: fixed; top:200px; left:300px;}

If you want the div to stay centered and unaffected by window resizing, try something like this:

#containerDiv {position:relative; width:700px; margin:0 auto;}
#blah {position: absolute; top:200px; left:300px;}

Keep in mind that background-size:cover; may not be supported in certain versions of Internet Explorer.

For examples, see:

http://jsfiddle.net/mYcXX/1/ (absolute) vs http://jsfiddle.net/mYcXX/2/ (fixed)

Answer 2

Ensure that your #blah div is placed within a relative div to avoid any positioning issues, especially when using absolute positioning in relation to the body. Consider nesting it inside another div or utilize fixed positioning instead.

#containerDiv {position:relative;}
#blah {position: absolute; top:200px; left:300px;}

<div id="containerDiv "><div id="blah"></div></div>

Alternatively:

#blah {position: fixed; top:200px; left:300px;}

If you want the div to stay centered and unaffected by window resizing, try something like this:

#containerDiv {position:relative; width:700px; margin:0 auto;}
#blah {position: absolute; top:200px; left:300px;}

Keep in mind that background-size:cover; may not be supported in certain versions of Internet Explorer.

For examples, see:

http://jsfiddle.net/mYcXX/1/ (absolute) vs http://jsfiddle.net/mYcXX/2/ (fixed)

Answer 3

Answer №2

This appears to be a fixed design structure. If that is the case, why not simply trim the central portion of the background and enclose it within a div element with the following style:

{
  width: 960px; // adjust as needed based on the central image's width
  margin-left: auto;
  margin-right: auto;
}

Then align the paragraph content within that specific container (the div).

Answer 4

This appears to be a fixed design structure. If that is the case, why not simply trim the central portion of the background and enclose it within a div element with the following style:

{
  width: 960px; // adjust as needed based on the central image's width
  margin-left: auto;
  margin-right: auto;
}

Then align the paragraph content within that specific container (the div).

Answer 5

Answer №3

To tackle this issue, I suggest separating the background image style from your container to potentially solve the problem at hand. Give this code snippet a try...

body{
  background: url(black.png) top center no-repeat;
}

#container{
  width: 960px;
  margin: 0 auto;
}

It's advisable to prioritize the natural flow of the DOM wherever possible. Avoid relying on position: absolute unless it is absolutely necessary. Even then, it may just be a temporary workaround.

Answer 6

To tackle this issue, I suggest separating the background image style from your container to potentially solve the problem at hand. Give this code snippet a try...

body{
  background: url(black.png) top center no-repeat;
}

#container{
  width: 960px;
  margin: 0 auto;
}

It's advisable to prioritize the natural flow of the DOM wherever possible. Avoid relying on position: absolute unless it is absolutely necessary. Even then, it may just be a temporary workaround.

Answer 7

Answer №4

After some trial and error, I managed to solve the problem on my own with a little help from yisela's guidance. Taking inspiration from websites like yahoo.com, I noticed that having a centered layout with a white background made everything look clean regardless of screen resolution. With this in mind, I made sure my image was gray and adjusted the background color accordingly for a seamless blend.

When it came to container styling, I placed the image within its own container and centered it, then set the paragraph relative to the container to maintain its position.

html{  background-color:gray }

body{ }

#contain{
width:1280px;
height:2000px;
margin-left:auto;
margin-right:auto;
background-size:cover;
background: url(back6.png);
}

#blah{font-size:large; left:120px; top:230px; position:relative;}

<div id="blah">

<p id="pr">This is a paragraph!</p>

</div>

</div>
  </body>
  </html>

With this experience under my belt, I'm looking forward to returning to c# with newfound appreciation for CSS.

Answer 8

After some trial and error, I managed to solve the problem on my own with a little help from yisela's guidance. Taking inspiration from websites like yahoo.com, I noticed that having a centered layout with a white background made everything look clean regardless of screen resolution. With this in mind, I made sure my image was gray and adjusted the background color accordingly for a seamless blend.

When it came to container styling, I placed the image within its own container and centered it, then set the paragraph relative to the container to maintain its position.

html{  background-color:gray }

body{ }

#contain{
width:1280px;
height:2000px;
margin-left:auto;
margin-right:auto;
background-size:cover;
background: url(back6.png);
}

#blah{font-size:large; left:120px; top:230px; position:relative;}

<div id="blah">

<p id="pr">This is a paragraph!</p>

</div>

</div>
  </body>
  </html>

With this experience under my belt, I'm looking forward to returning to c# with newfound appreciation for CSS.

Adjust text placement with Image resizing using CSS and HTML

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

When displaying multiple images using HTML5 Canvas in a for loop, only the final set of images is drawn

Changing the color of a tooltip for a specific element using Bootstrap 4

Struggling to hide empty columns in an HTML table with jQuery - it's just not cooperating!

Can the <container> block be positioned beneath the <header> block?

The font color in Bootstrap is set to be lighter than the background color

What is the most efficient method for applying multiple classNames to elements in Next.js?

implementing smooth scrolling using jquery following object insertion

Steps to generate an excel document from an HTML table and store it in the project folder

What is the reason behind the varying dimensions of images on Chrome compared to Firefox?

Change the HTML table's toggle element to either 'on' or 'off' based on the specified value using jQuery

The slick jQuery plugin seems to be malfunctioning

Prevent side-to-side scrolling using the translate property

Design images with rounded corners using CSS

Angular element fails to display properly

Different text in AMP

Is it true that using <meta charset="utf-8"> specifies the character encoding of the document

A step-by-step guide on showcasing three post images in separate divs at the bottom of a webpage with Reactjs and Css

What is the best way to create flexible Bootstrap 3 columns with varying heights?

If the data attribute of the div ID is equal to 1 in jQuery, then

What is the best way to access the onclick calling object?