Adjust the image size to match the background image proportionally

My website has a background defined in CSS as follows:

body{
background-image:url(BackgroundImage.jpg);
background-size: 100%;
background-repeat: no-repeat;

I also have several other images positioned on top of the background, like this example:

#Logo{
position: absolute;
top:92px;
left:95px;
}

However, I need the logo image to scale according to the background image.

Essentially, I want to instruct the logo image that its current size is equal to 100% and should adjust accordingly whenever the window is resized.

Thank you in advance for any help!

css

Answer №1

<body>
    <div id="logo"></div>
</body>

#logo {
  display: block;
  position: absolute;
  top:10%;
  left:5%;
  width: 15%;
  height: 18%;
  background-image: url(logo.jpg);
  background-size: cover;
  background-position: center center;
}

https://jsfiddle.net/michaelyuen/h2am5zkg/

Ensure all dimensions are set in percentage for optimal layout adjustments.

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

Adjust the size of CSS boxes based on the window dimensions

I am facing an issue with two divs placed side by side. They appear fine when the page is viewed in full-screen mode. However, upon resizing the window, the right div overlaps the left one and causes a messy layout. . -I want to prevent these boxes fro ...

htmlcss

Having Trouble Scooting Down the Page on Mobile?

Hello there! I'm having a bit of trouble trying to figure out why the scrolling functionality isn't working on my small web app when it reaches the media breakpoint for mobile devices. If you'd like to take a look, here's the link to ...

htmlcssscroll

Unusual Display of Mantine Radio Button

I am currently using Mantine v7.0.0 in combination with Next.js v13.5.2 and Tailwind v3.3.3. In my setup, when I create <Radio /> elements, the svg of the element is appearing separately from the radio button instead of replacing it. This issue can b ...

cssnext.jstailwind-cssmantine

What could be the reason that my Bootstrap dropdown menu is not appearing on my website

I am currently utilizing Angular in my project. I have incorporated bootstrap and jQuery via NPM install, and specified them as dependencies in angular.json. The navbar on my site contains a dropdown menu. When I hover over the dropdown menu, it should di ...

htmlcssangulartwitter-bootstrapbootstrap-5

What is the best way to preload a font with a hashed filename and style hosted on a CDN?

Is there a way to preload the Material Icons font in advance? <link rel="preload" href="https://fonts.gstatic.com/s/materialicons/v125/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2" as="font" type="font/woff2" crossorigin=&q ...

htmlcssfont-facecdnwebfonts

Discover the method to adjust the position of elements, such as images, using radio buttons

I have an image positioned in a container along with 3 radio buttons. I want to make additional images appear over the main image when specific radio buttons are selected. Each button will trigger different positions for the additional images. So far, thi ...

javascriptjqueryhtmlcss

What is causing the extra space on the right side of the box?

I've been struggling to align text next to an image inside a box. Desired outcome CSS: #roundedBox { border-radius: 25px; background: #363636; width: auto; height: auto; margin: 10%; display: flex; position: relative; ...

javascriptcsstextnext.jstheme-ui

Conceal or reveal buttons using JavaScript

I am struggling with a function that is supposed to hide certain buttons and create a new button. When I click on the newly created button, it should make the previously hidden buttons visible again. However, the function does not seem to work properly. ...

javascriptjqueryhtmlcss

Restoring the background color to its original shade following alterations made by jQuery

In my table, I have multiple rows with alternating white and grey backgrounds achieved through CSS. .profile tr:nth-child(odd) { background:#eee; } .profile tr:nth-child(even) { background:none; } However, I now want to allow users to select a row ...

jquerycssbackground-color

The flex grow animation fails to activate when the Bootstrap 4 style sheet is added

Trying to implement transitions with flex grow has been a challenge. It works smoothly without any issues, but as soon as I add the bootstrap 4 style sheet, the transitions stop working. I haven't even started using the bootstrap 4 classes yet, it&apo ...

cssflexboxbootstrap-4transition

Designing Material UI Button Styles

Hello, I recently started using Material UI and I'm facing some challenges in styling the components. Right now, I'm working on a sign-in page and trying to position the Submit button all the way to the bottom right corner. Any help or advice wou ...

cssreactjsmaterial-ui

What is the best way to keep an image centered in the nav-bar as it decreases in size?

As I work on building a website using a template (https://github.com/learning-zone/web-templates/tree/master/victory-school-free-html5-bootstrap-template), I encountered an issue with the navigation bar. The original design appears like this: Before shrin ...

javascripthtmlcss

Creating a dynamic table with columns of fixed width in Angular on the fly

I am struggling to create a data table with fixed column widths (20% each). I have incorporated div elements in my table structure to enable dynamic row creation using Angular, but this has caused some design issues. My goal is for all rows to occupy 100% ...

cssangularhtml-table

Gather data from various HTML elements with JavaScript when submitting a form

How can I extract values from HTML elements and send them for processing through a form? I'm attempting to compile a menu item list with the individual items' structure in place, but I'm struggling to figure out how to fetch the values upon ...

javascripthtmlcss

The horizontal layout for the Bootstrap 3 sub menu is not displaying beneath the dropdown as expected

Check out my testing site here. I envision the navigation of my website to look like this in the near future, albeit at a lower resolution. While experimenting with the inspector tool, I noticed that changing the display property to inline-block causes t ...

csswordpresstwitter-bootstraptwitter-bootstrap-3submenu

Despite utilizing the .img-fluid class, the image remains incompatible with the parent div and does not fit properly

So, I'm currently working on a test code where my aim is to fit an image into the parent div using Bootstrap 5. However, I'm facing a challenge where the image leaves a noticeable gap width-wise, despite using the .img-fluid class. You can see th ...

htmlcssflexbox

Automated email formatting for a polished presentation

Aspiring to create automated emails upon user registration on my website, the aesthetic appeal of these emails is crucial to me. I have meticulously crafted an email template using HTML. You can view a snapshot here: https://i.sstatic.net/MpjfP.png Howev ...

htmlcssemail

Is there a way to align my two <div> elements together?

I am looking to align "Login" and "Register" with the height of the top, as shown in the example below for better clarity. https://i.sstatic.net/OArTq.png Here is how I want it: https://i.sstatic.net/MeI83.png Although I use Bootstrap 4, I prefer to ac ...

htmlcssbootstrap-4

What is the best way to conceal text while retaining icons on a compact screen?

How can I hide the text links for Home, Reservations, My Reservations, About, and Settings on smaller screens while still keeping the icons visible? Currently, I am using the following resources: http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.1 ...

htmlcssangularjsangular-ui-bootstrap

Is the dragging behavior of a rotated image different than that of the original image when using CSS rotation?

While working on a CSS grid to showcase images rotated at 60 degrees for a diagonal view, I encountered an issue. I wanted users to have the ability to drag and drop images within the grid, but when they drag an image, it moves as if it weren't rotate ...

javascriptjqueryreactjscss