Maintaining the proportions of divs containing background images

I'm dealing with a background image that features a large blue diagonal line where we want our content to align.

However, I'm encountering difficulties in maintaining the alignment of the content as it resizes (resulting in the background diagonal also changing size and throwing off the alignment).

My current CSS code is:

  background: url('../../../img/bg.png') center no-repeat;
  background-size: cover;

What adjustments should I make to ensure that the aspect ratio remains consistent regardless of resizing?

https://jsfiddle.net/wb166bdo/11/

htmlcsstwitter-bootstrap-3

Answer №1

In order to keep the desired ratio, a simple technique is to apply a padding either at the top or bottom of the element in percentages that correspond to the desired ratio. For example, if the image size is 200px by 100px, then a padding of 50% would be suitable. The percentage value for top and bottom padding is calculated based on the width of the parent container MDN.

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

Is it possible for me to set my HTML body class as ".body" in CSS?

CSS .body { background: linear-gradient(-45deg, rgb(255, 0, 0), rgba(216, 29, 29, 0.856), #fdfdfdd7, #234cd5, #ffffff); background-size: 400% 400%; background-repeat:no-repeat; animation: gradient 35s ease infinite; height: 100vh; } HT ...

htmlcsstagsdocument-body

Ajax - Trouble with Updating DIV Content

As a beginner in AJAX, I am encountering difficulties creating a simple AJAX program. My goal is to have a button that, when clicked, changes the text of the div below it. Despite numerous attempts, I have not been able to identify the issue. Below is the ...

javascriptxmlajaxhtml

Using a `right: 0` value will not be effective when using absolute positioning

Currently, I am in the process of developing a website utilizing Bootstrap 3.3.6. After going through a tutorial on how to create a responsive banner slider, I found this resource helpful: http://www.jqueryscript.net/slider/Full-Width-Responsive-Carousel- ...

csstwitter-bootstrap-3

Content within iframe is failing to load correctly on both Firefox and Internet Explorer browsers

On my website, I have 4 iframes embedded in 4 different tabs. I've noticed that the content is being cropped when viewed on Firefox, but it loads properly when using Chrome. Strangely, if I manually reload the iframe, the content displays correctly. T ...

javascripthtmlcss

The onchange event for the input type=file is failing to trigger on Google Chrome and Firefox

Update: Solved: http://jsfiddle.net/TmUmG/230/ Original question: I am facing an issue with handling image/logo upload alongside a hidden input type=file: <form class="image fit" id="theuploadform"> <input title="click me to chan ...

javascriptjqueryhtmlgoogle-chrome

HTML/JavaScript: Embrace the Power of Dynamic Page

I have a unique element in my HTML code: <image src="http://..." style='...'> Using Python-Flask, I pass on a dynamic source address and save it as window.dynamicEmbedding. Now, during page load, I want to change the image's ...

javascriptpythonhtmldynamicembedding

How to allow users to input strings on web pages with JavaScript

I created a Language Translator using java script that currently translates hardcoded strings in an HTML page. I want to enhance its flexibility by allowing users to input a string into a textbox/textarea for translation. Any assistance would be greatly a ...

javascripthtml

REST, hypertext, and clients other than web browsers

I'm struggling to understand how a REST API can be both hypertext driven, as explained in this article, and still be machine readable. Let's say I create an API where one endpoint lists the contents of a collection. GET /api/companies/ When the ...

htmljsonhttprest

Having trouble displaying the Order List in Tailwind CSS and Next.js?

I am having trouble displaying an ordered list on my page. I have tried using the <ol> tag, but for some reason the numbers are not showing up. Even when I switch to the <ul> tag, it's still not working properly. Take a look at this scree ...

htmlnext.jstailwind-css

transition effect of appearing and disappearing div

Having trouble creating a fade out followed by a fade in effect on a div element. The fade out happens too quickly and the fade in interrupts it abruptly. Here is the JavaScript code: $('#fillBg').stop(true,false).fadeTo(3000, 0); $("#fillBg"). ...

javascriptjqueryhtmlcss

Choose an element by its specific data attribute

I have come across this html code and I am attempting to assign a new class to it using the data attribute: <p class="form-row form-row-wide" data-child-field="child_has_jacket"> </p> Even after trying with jQuery : jQuery( ...

javascriptjquerycsscustom-data-attribute

What causes two identical pages to display fonts in different ways?

Two identical pages, hosted on the same server with the exact same Apache configuration and home directory. Each page contains only one sentence of text, unstyled. The strange thing is, when viewed in Chrome and Safari, the fonts render differently, while ...

css

Customize a web template using HTML5, JavaScript, and jQuery, then download it to your local device

I am currently working on developing a website that allows clients to set up certain settings, which can then be written to a file within my project's filesystem rather than their own. This file will then have some parts overwritten and must be saved ...

javascriptjqueryhtml

Tips for creating a vertical drawer using jQuery and CSS

Hello, I am currently working on developing a drawer component using Ember.js. If you want to view the progress so far, feel free to check out this jsbin http://jsbin.com/wulija/8/edit My goal is to have the drawer look like the following initially: +--- ...

javascriptjqueryhtmlcss

Enhance your React project by incorporating Material-UI card media elements with the ability to add

I am trying to figure out how to create an opaque colored overlay on top of an image using Material-UI. While it is possible with plain HTML, CSS, and JavaScript, I am facing some challenges with Material-UI. <Card> <CardMedia> <im ...

javascripthtmlcssreactjsmaterial-ui

How to create nested nav menus that are optimized for touch-screen devices?

When it comes to creating responsive websites, one challenge I frequently encounter is designing a multi-level nav menu that functions effectively for touch devices. Many plugins and methods exist, but most fall short because they do not allow a second-l ...

htmlcssresponsive-designnavigation

The Wonders of Flex Box and Media Queries

Can a website still be made responsive without relying on media queries when flexbox is already implemented? Are there specific scenarios where the utilization of media queries offers enhanced control? ...

htmlcssflexboxmedia-queries

Eliminate any additional spacing within the pre/code tags

I am currently utilizing prism.js for code highlighting. I have encountered an issue where there are unnecessary white spaces at the top and bottom of my output. You can view a live example here. <pre> <code class="language-css"> &lt ...

javascriptjqueryhtmlcss

I'm missing out on that gray background

input your code hereI am working with the following html/php code snippet: <div class="footerbottom"> <span class="footermenuitem"> <span class="footermenutitle">PRODUCTS</span> <?php $menu = menu_navigation_links('menu-pro ...

phphtmlcsscss-floatbackground-color

Issues occur with Google visualization when the screen is resized

When I resize the browser, an error code google-visualization-errors-8 appears in my Google chart's CSS. https://i.stack.imgur.com/4LX1C.png What could be causing this error to occur? Note: I am redrawing the graph every time the screen is resized. ...

htmlcsschartsgoogle-visualization