Struggling to adjust the size of my background image to fit my vision using HTML and CSS

I needed a way to auto-resize an image based on the screen resolution it's being viewed on. After some searching, I came across this code that did the trick:

<!DOCTYPE html>
<head>
<style>
html,body {
    height: 100%;
    margin: 0;
    padding: 0;
    background-color : black;
}

img {
    padding: 0;
    display: block;
    margin: 0 auto;
    max-height: 100%;
    max-width: 100%;
}
</style>
</head>
<body>
<img src="kara.jpg" align="right" />
</body>
</html>

Now, I want to overlay a video onto the center of this image. However, since it's not a background image, I ran into some complications. I tried using CSS background-image property but couldn't achieve the same effect as with the previous code. No matter how many properties like background-size and background-position I experimented with, I couldn't replicate the desired output. Any suggestions would be greatly appreciated!

htmlcss

Answer №1

If you want the container to have the same width and height as the image, you can use the following HTML and CSS code: 

<!DOCTYPE html>
<html>
<head>
<style>
html,body {
    height: 100%;
    width : 100%;
    margin: 0;
    padding: 0;
    background-color : black;
}
.image {
    padding: 0;
    margin: 0 auto;
    max-height: 100%;
    max-width: 100%;
    background : url(https://via.placeholder.com/150) no-repeat center center;
}
.image img{
    opacity : 0;
    padding: 0;
    display: block;
    margin: 0 auto;
    max-height: 100%;
    max-width: 100%;
}
</style>
</head>
<body>
  <div class="image">
    <img src="https://via.placeholder.com/150" />
  </div>
</body>
</html>

Alternatively, you can use position absolute for the container like this: 

<!DOCTYPE html>
<html>
<head>
<style>
html,body {
    height: 100%;
    width : 100%;
    margin: 0;
    padding: 0;
    background-color : black;
}
.image {
    padding: 0;
    margin: 0 auto;
    height: 100%;
    width: 100%;
    position : absolute;
    top : 0px;
    left : 0px;
    background : url(https://via.placeholder.com/150) no-repeat top center;
}
</style>
</head>
<body>
  <div class="image"></div>
</body>
</html>

Here is an example of a container with an image and a video using CSS styling: 

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
body{
    padding : 0px;
    margin : 0px;
}
.container{
    width : 100vw;
    height : 100vh;
    position : relative;   
}
.container img{
    width : 100%;
    height : 100%;
    display : block;
    margin : 0px auto;
}
.container video{
    width : auto;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%) 
}
</style>
</head>
<body>

<div class="container">
<img src="https://via.placeholder.com/300" />
    <video width="400" controls>
      <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
      <source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
      Your browser does not support HTML5 video.
</video>
</div>

</body>
</html>

Answer №2

One way to ensure your image is not constrained by a container is to wrap it in a div and center the video within that new container:

<style>
html,body {
    height: 100%;
    margin: 0;
    padding: 0;
    background-color : black;
}

section {
    padding: 0;
    display: inline-block;
    margin: 0 auto;
    max-height: 100%;
    max-width: 100%;
  width: fit-content;
  height: fit-content;
  position: relative;
  padding:0;
}
// This example includes styling for a video element
video {
  position: relative;
  display: inline-block;
  width: 800px; // adjust as needed
  margin: 0 auto;
  height: 500px;. // adjust as needed
  top: calc(50% - 250px); // positioning based on height
}
</style>
</head>
<body>
<section>
<img src="kara.jpg" align="right" />
<video />
</section>
</body>
</html>

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

CSS Conflict with jQuery Tools Overlay causing the image to be hidden beneath the overlay

First, let me explain what I am currently using and attempting to achieve: I started with the basic setup for this effect found at flowplayer.org/tools/demos/overlay/index.html Then, I implemented the Apple Leopard Preview Effect from flowplayer.org/tool ...

cssjquery-tools

Transmit a JSON object while simultaneously receiving the corresponding response

As part of a school project, I need to work with JSON. The server will process the file and send back a response in JSON format. This entire exchange needs to be done using JavaScript. I recently learned about the XMLHttpRequest object, but I'm still ...

javascripthtmljson

What are some techniques for creating a distinct layout using a list of items with CSS grid?

My goal is to create a unique layout for a list of posts using an array. The layout involves different columns rather than simply wrapping them into rows outside of the while loop. I have almost everything working except for the section inside the red bor ...

htmlcsswordpresswhile-loopcss-grid

Display a tooltip when the cursor hovers close to a line in D3 visualizations

Currently, I have a D3js line chart with SVG circles added to the points. When users hover over these circles, they can see a tooltip. https://i.sstatic.net/kYpeg.png https://jsfiddle.net/jhynag08/38/ However, I would like the tooltip to appear when user ...

javascripthtmlcssd3.jscharts

Is there a way to detect when a CSS background image has finished loading? Does an event trigger upon completion?

I am facing an issue with my sidebar widget where there is an image background in place. On top of this, I have a search input form but I don't want the input to display until the image has fully loaded. Is there a way to add a load event handler to ...

javascriptjquerycssbackground-imagedom-events

Hovering over the paragraph will now allow you to shine a spotlight on

Can we highlight only the line being hovered over by the mouse pointer? For instance, if I have this paragraph: <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam in nisi eleifend, efficitur ligula vel, scelerisque risus. ...

jqueryhtmlcss

Verifying that the class name prefix aligns with the folder name using Stylelint

Currently, I am utilizing the "selector-class-pattern" rule from stylelint. My chosen pattern enforces the ECSS naming convention. The specific rule configuration is outlined below: "selector-class-pattern": ["^[a-z]([a-z0-9]){1,3}-[A-Z][a-zA-Z0-9]+(_[A-Z ...

cssstylelint

Styling a rectangle in p5.js: Tips and tricks

In my p5.js code, I created a rectangle using rect(): rect(10, 10, 10, 10); Now, I want to add some style to it with a box-shadow effect: box-shadow: 20px 20px 50px #00d2c6, -30px -30px 60px #00ffff; However, when I tried to apply the style using the doc ...

javascriptcssp5.js

Show using foreach, with a modification of the spacing between rows and columns

For my project, I need to display the same image 24 times with a 3x8 matrix on an A4 size page using a foreach method. The issue I'm encountering is that I have to manually add space between each row and column, but it cannot cause the page to break. ...

htmlcss

Expanding Bootstrap 5 dropdown menu dynamically using Javascript

Is there a method to achieve this goal? I am currently attempting to implement a dropdown menu that dynamically populates with year numbers starting from the current year. Unfortunately, the solutions I have come across only work with native HTML and not B ...

javascripthtmlbootstrap-5

Utilizing AngularJS to Modify CSS Upon Clicking a Different Button

I want to create a navigation menu with three buttons: "Home", "About", and "Contact". When the page loads, only the "Home" button will be active. Upon clicking the "About" button, it should become the only active button, while deactivating the rest. The s ...

cssangularjs

Having trouble properly implementing variable updates when creating a multi-theme website

I have a Next.js app and a globals file containing all the themes: body { margin: 0; font-family: Inconsolata, monospace; background-color: var(--bg-color); } :root { --bg-color: #262a33; --main-color: #43ffaf; --sub-color: #526777; --sub-al ...

javascriptcssreactjsnext.js

How to dynamically inject HTML content from a child component into a different component using Angular 5

Is it possible to customize the content of a reusable header section based on the current route data in Angular? The header currently displays a title and description pulled from the route data property. My concern is how to dynamically inject different H ...

htmlangulartypescriptangular-components

Increased dropdown extending over current items or text

Whenever I expand my dropdown, the items and existing controls seem to be getting mixed up. I am looking to completely hide background items and have the dropdown nested within another set of divs. Here is the code snippet: dropdown.component.css .par ...

htmlcssangular

Struggling to display the sorted array items on the screen?

Within the realm of my jsfiddle experiment, my aim is to organize items based on price from highest to lowest by utilizing the following function: function mySortingFunction() { var elements = [].slice.call(document.getElementsByClassName("price")); e ...

javascriptjqueryhtmlsorting

Modifying properties through JavaScript is not possible

I created an HTML form and I'm trying to change the attributes of a div and a button but for some reason, it's not working <form> <button type='button' id='other'>Sub</button> <select id="prop"> &l ...

javascripthtml

Have you ever wondered why Vue 3 imports all JS files for every page upon the initial project load?

Is there a way to make Vue 3 import only the necessary js files for each component instead of loading all files at once when the project is first loaded? For example, if I navigate to the contact page, Vue should only import the contact.js file, rather tha ...

javascripthtmlvuejs3

Issue with JQuery CSS Height not functioning properly in Chrome and Safari browsers

Our website displays a list of items in table format. The number of items varies daily, affecting the height of the table. A vertical bar next to the table should resize based on the table's height each day. The HTML structure we use is as follows: ...

jquerycssipad

Incorporating Ajax comments into an Ajax-powered status feature

I'm currently in the final phase of implementing ajax in my feed. Originally, I thought it would be a simple matter of pasting the comment input, but it turned out to be more complex than I anticipated. I placed the input below the main ajaxed status ...

phpjqueryhtmlajax

Automated static file versioning in Google App Engine/Python

Recently, I've been experimenting with Google's page speed service, and it has inspired me to implement automatic versioning of static files in my GAE/P application. This way, I can fully utilize longer caching times. Developing a script to perf ...

javascriptcssgoogle-app-enginecache-control