What is the best way to center my image on a webpage without having it overlap with the text using HTML and CSS?

Question

What is the best way to center my image on a webpage without having it overlap with the text using HTML and CSS?

I'm struggling to center and make my image responsive without causing text overlap. How can I resolve this issue?

div.shadow {
    position: absolute;
    max-width: 45%;
    max-height: 45%;
    top: 50%;
    left:50%;
    overflow: visible;
}
img.logo {
    position: relative;
    max-width: 100%;
    max-height: 100%;
    margin-top: -50%;
    margin-left: -50%;
}
header {
    text-align: center;
    color: black;
    text-decoration: none;
    font-size: 40px;
    font-family: 'existencelight';
    position: fixed;
    top: 0px;
    left: 0px;
    padding: 10px;
    margin: 0px;
    width: 100%;
}

<header>
  <h1>Welcome to Nepali Kitchen</h1>
</header>
<div class="shadow"><img class="logo" src="bg3.jpg" /></div>

html css

Answer 1

Answer №1

If you have set your div to position absolute, you can easily adjust the top value as needed.

div.shadow {
 position: absolute;
 max-width: 45%;
 max-height: 45%;
 top: 200px;  /* example using a fixed pixel value */
 left:50%;
 overflow: visible;
}

Alternatively, you could try using

 position: relative;

Answer 2

If you have set your div to position absolute, you can easily adjust the top value as needed.

div.shadow {
 position: absolute;
 max-width: 45%;
 max-height: 45%;
 top: 200px;  /* example using a fixed pixel value */
 left:50%;
 overflow: visible;
}

Alternatively, you could try using

 position: relative;

Answer 3

Answer №2

Consider using that image as a background instead of placing it within the text.

header {
  text-align: center;
  color: black;
  text-decoration: none;
  font-size: 40px;
  font-family: 'existencelight';
  position: fixed;
  top: 0px;
  left: 0px;
  padding: 40px;
  margin: 0px;
  width: 100%;
  background: url('http://kenwheeler.github.io/slick/img/fonz1.png') center top no-repeat;
  background-size: contain;
}

<header>
  <h1>Welcome to Nepali Kitchen</h1>
</header>

You could also place the image behind the text by adjusting the z-index property.

div.shadow {
  position: absolute;
  max-width: 45%;
  max-height: 45%;
  top: 50%;
  left: 50%;
  overflow: visible;
}

img.logo {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  margin-top: -50%;
  margin-left: -50%;
  z-index: -1;
}

header {
  text-align: center;
  color: black;
  text-decoration: none;
  font-size: 40px;
  font-family: 'existencelight';
  position: fixed;
  top: 0px;
  left: 0px;
  padding: 10px;
  margin: 0px;
  width: 100%;
}

<header>
  <h1>Welcome to Nepali Kitchen</h1>
</header>
<div class="shadow"><img class="logo" src="http://kenwheeler.github.io/slick/img/fonz1.png" /></div>

Answer 4

Consider using that image as a background instead of placing it within the text.

header {
  text-align: center;
  color: black;
  text-decoration: none;
  font-size: 40px;
  font-family: 'existencelight';
  position: fixed;
  top: 0px;
  left: 0px;
  padding: 40px;
  margin: 0px;
  width: 100%;
  background: url('http://kenwheeler.github.io/slick/img/fonz1.png') center top no-repeat;
  background-size: contain;
}

<header>
  <h1>Welcome to Nepali Kitchen</h1>
</header>

You could also place the image behind the text by adjusting the z-index property.

div.shadow {
  position: absolute;
  max-width: 45%;
  max-height: 45%;
  top: 50%;
  left: 50%;
  overflow: visible;
}

img.logo {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  margin-top: -50%;
  margin-left: -50%;
  z-index: -1;
}

header {
  text-align: center;
  color: black;
  text-decoration: none;
  font-size: 40px;
  font-family: 'existencelight';
  position: fixed;
  top: 0px;
  left: 0px;
  padding: 10px;
  margin: 0px;
  width: 100%;
}

<header>
  <h1>Welcome to Nepali Kitchen</h1>
</header>
<div class="shadow"><img class="logo" src="http://kenwheeler.github.io/slick/img/fonz1.png" /></div>

Answer 5

Answer №3

The reason for this issue lies in how your elements are positioned.

If you desire a fixed header, your content must be shifted down by the height of your header. To achieve this, enclose your content within a container and assign it a margin-top equal to the height of your header.

header {
    position: fixed;
    height: 100px;
}

.content-container {
    position: relative;
    margin-top: 100px; 
}

Here is an example of how your HTML structure should look:

<header></header>
<div class="content-container">
</div>

Set the position of your content-container as relative. For centering items, you can utilize flexbox or apply margin: 0px auto;.

Positioning relative means that it's positioned relative to other elements.

Furthermore, here are some suggestions for optimizing your code:

Consider using em or rem units for font-size
Avoid prefixing your classes with the element (e.g., div.shadow -> .shadow, img.logo -> .logo)
Organize your CSS according to the CSS Box Model for cleaner and more readable code.

Your CSS code could follow this format:

.class {
    // Positioning properties
    position: relative;
    top: 0;
    right: 0;
    z-index: 1;

    // Dimensions
    width: 500px;
    height: 500px;

    // Margin
    margin: 0px auto;

    // Border styling
    border: 1px solid blue;

    // Padding
    padding: 2em 0;

    // Styling for content
    color: #676766;
    background: blue;
}

Answer 6

The reason for this issue lies in how your elements are positioned.

If you desire a fixed header, your content must be shifted down by the height of your header. To achieve this, enclose your content within a container and assign it a margin-top equal to the height of your header.

header {
    position: fixed;
    height: 100px;
}

.content-container {
    position: relative;
    margin-top: 100px; 
}

Here is an example of how your HTML structure should look:

<header></header>
<div class="content-container">
</div>

Set the position of your content-container as relative. For centering items, you can utilize flexbox or apply margin: 0px auto;.

Positioning relative means that it's positioned relative to other elements.

Furthermore, here are some suggestions for optimizing your code:

Consider using em or rem units for font-size
Avoid prefixing your classes with the element (e.g., div.shadow -> .shadow, img.logo -> .logo)
Organize your CSS according to the CSS Box Model for cleaner and more readable code.

Your CSS code could follow this format:

.class {
    // Positioning properties
    position: relative;
    top: 0;
    right: 0;
    z-index: 1;

    // Dimensions
    width: 500px;
    height: 500px;

    // Margin
    margin: 0px auto;

    // Border styling
    border: 1px solid blue;

    // Padding
    padding: 2em 0;

    // Styling for content
    color: #676766;
    background: blue;
}

Answer 7

Answer №4

Why the need for such complicated CSS code? Achieving the same result can be done with simpler coding techniques.

<style>
div.shadow {
    width: 100%;
    float: left;
    text-align: center;
}
img.logo {

}
header {
    text-align: center;
    color: black;
    text-decoration: none;
    font-size: 40px;
    font-family: 'existencelight';
    width: 100%;
    float: left;
}
</style>

Answer 8

Why the need for such complicated CSS code? Achieving the same result can be done with simpler coding techniques.

<style>
div.shadow {
    width: 100%;
    float: left;
    text-align: center;
}
img.logo {

}
header {
    text-align: center;
    color: black;
    text-decoration: none;
    font-size: 40px;
    font-family: 'existencelight';
    width: 100%;
    float: left;
}
</style>

What is the best way to center my image on a webpage without having it overlap with the text using HTML and CSS?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Combining LESS with cultural designations

How to effectively use graph paper with both major and minor grids in the background?

Is it possible to use CSS to target the nth-child while also excluding certain elements with

What specific element is being targeted when a directive injects a ViewContainerRef?

Shifting the position of personalized tabs using Jquery

Ways to stop button from wrapping inside a div

invoking a function from an attached HTML file using Angular

Tips for customizing the appearance of dayMouseover in Fullcalendar

The Google Maps V3 API map is not loading completely

Sloped Divider on the Upper Edge of the Page

Maintain a fixed element and enable the rest of the elements to scroll as the mobile browser address bar collapses while scrolling upwards

Using JavaScript or JQuery, move an image from one location to another by removing it and adding

Is there a way to specifically target the MUI paper component within the select style without relying on the SX props?

Having trouble running the npm script due to a multitude of errors popping up

Getting filenames from a directory using PHP

Challenges arise when trying to coordinate scrolling movements between a canvas element and the remaining content on the webpage

Jquery is failing to handle multiple inputs

Text that is arranged vertically and adjusts its size and layout

centered text positioned perfectly on a dynamically adjusting background

Even when applying a class, the CSS link:hover style will only affect the initial occurrence