Is the image inside a responsive div?

Question

Is the image inside a responsive div?

I'm currently working on my first website that I am proud of, and I am in the process of creating a background using CSS and an image. I want it to look exactly like the picture.

.

I have successfully achieved this (accomplished already), but the issue is that it is not responsive, most likely due to the position: absolute property. My goal is to make it properly responsive.

Below is the HTML code that I am using for the background:

.bg {
  background: #9359C7;
  color: white;
  display: grid;
  text-align: center;
  height: 764px;
  width: 1280px;
}

.content {
  position: relative;
}

.content img {
  width: auto;
  height: auto;
  position: absolute;
  right: -178px;
  bottom: 0;
}

<div class="bg">
  <div class="content">
    <h1>Lol</h1>
    <img src="https://www.pikpng.com/pngl/m/69-698658_yami-ygi-y-gi-yu-gi-oh.png" alt="Yugi">
  </div>
</div>

EDIT: I have uploaded my entire site on Pastebin because I couldn't upload it directly here. The snippet provided did not work for me.

html css responsive

Answer 1

Answer №1

Here is the solution you're looking for:

body {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
}

.hero {
  position: relative;
  overflow-x: hidden;
}

header {
  position: relative;
  background: black;
  padding: 40px 0;
  z-index: 5;
}

.content {
  position: relative;
  z-index: 5;
  color: white;
  text-align: center;
  width: 70%;
  height: 100vh;
  max-height: 768px;
  background: #9359C7;
  padding: 20px;
}

img {
  width: auto;
  height: 98%;
  position: absolute;
  right: 30%;
  bottom: 0;
  transform: translateX(50%);
  padding-top: 80px;
  z-index: 10;
}

h1 {
  margin: 0;
}

<div class="hero">
  <header></header>
  <div class="content">
    <h1>Lol</h1>
  </div>
  <img src="https://ms.yugipedia.com//c/c4/YamiYugi-DULI.png" alt="Yugi">
</div>

Answer 2

Here is the solution you're looking for:

body {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
}

.hero {
  position: relative;
  overflow-x: hidden;
}

header {
  position: relative;
  background: black;
  padding: 40px 0;
  z-index: 5;
}

.content {
  position: relative;
  z-index: 5;
  color: white;
  text-align: center;
  width: 70%;
  height: 100vh;
  max-height: 768px;
  background: #9359C7;
  padding: 20px;
}

img {
  width: auto;
  height: 98%;
  position: absolute;
  right: 30%;
  bottom: 0;
  transform: translateX(50%);
  padding-top: 80px;
  z-index: 10;
}

h1 {
  margin: 0;
}

<div class="hero">
  <header></header>
  <div class="content">
    <h1>Lol</h1>
  </div>
  <img src="https://ms.yugipedia.com//c/c4/YamiYugi-DULI.png" alt="Yugi">
</div>

Is the image inside a responsive div?

Answer №1

Similar questions

When the user hits the enter key, automatically submit a form without the need for

Text fields do not show a cursor icon

What can you do to prevent a div from taking up the entire page if its height is not specified?

Incorporating a variety of images into this hexagonal design framework

Retain the previously selected option in a PHP combobox even when changing pages

Issue with Bootstrap 5 Carousel not transitioning between slides

Several bootstrap dropdown menus - issue with menu not closing when switching between them

Is there a way to incorporate a click function into this code if the id and xpath methods are ineffective?

What seems to be the issue with my snake game not loading properly?

Using Bootstrap's card component, design a grid layout for your website

jQuery: Automatically scroll to the end of the div based on the height of the content within

Bootstrap: adaptable card design

Placing an item from a "stack" onto a separate line on smaller screens

selenium.common.exceptions.ElementNotInteractableException: Error: the element cannot be interacted with

Move images horizontally next to the height of an element

Tips for maintaining consistent formatting of a div element across various sizes

Is there a way to display x squared as a superscript inside a button element?

Utilizing a dropdown feature in Bootstrap for creating X columns of lists instead of a traditional single list

Utilizing v-data-iterator in Vuetify to display data fetched from an API in a table

Prevent draggable function in jQuery-UI for specific elements