Having trouble implementing responsive image with fixed aspect ratio code

I've tried several tutorials online to make this image responsive with a fixed aspect ratio, but nothing seems to work.

The image is set at 900x400px and I want it to remain fully visible on smaller screens as well.

Here's the codepen link

<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>

<div id="aboutsec1">
<div class="parallaxbg">
<div class="parallaxcontainer">
<div class="parallaxcontent">
<h1>header</h1>
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</div>
</div>
</div>
</div>

<section id="aboutsec2">
<div class="parallaxbg"></div>
<div class="parallaxbg2"></div>
</section>

</body>
</html>

CSS

html,body{
    width:100%;
    height:100%;
  margin: 0;
  padding: 0;
}

/* Basic Parallax Background */
.parallaxbg {
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    height: 100%;
    width: 100%;
    position: relative;
}

/* Basic Parallax Container */
.parallaxcontainer {
    display: table;
    table-layout: fixed;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

/* Basic Parallax Content */
.parallaxcontent {
    max-width: 450px;
    display: table-cell;
    vertical-align: middle;
    padding-left: 10%;
    padding-right: 10%;
    text-align: center;
}

#aboutsec1{
    height: 100%;
}

/* About Page Section 1 */
#aboutsec1 .parallaxbg {
    background: none;
    background-color: #eeeeee;
    text-align: center;
}

/* About Page Section 2 */
#aboutsec2 {
}

#aboutsec2 .parallaxbg2 {
    background-color: #000000;
    background-image: url('http://s16.postimg.org/k5xrwvp7p/900x400.png');
    z-index: 1;
    background-position: center center;
   background-repeat: no-repeat;
    background-attachment: fixed;
    width: 100%;
    background-size: cover;
  padding-bottom: 44.444444444444%; /* 400px/900px */
}

Answer №1

No need to fret, I eventually managed to solve it on my own. For those who may find it helpful, here is the code for creating a responsive background image with a fixed aspect ratio...

<div class="imagecontainer">
    <div class="responsiveimage"></div>
</div>

.imagecontainer {
    margin: 0px auto;
    max-width: 900px; \* Adjust this for different image widths *\
}

.responsiveimage {
    background-image: url('');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    padding-bottom: 44.444444444444%; /* Maintain 900x400 aspect ratio */
}

Make sure to set the padding bottom correctly to maintain the desired aspect ratio of the image.

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

What effect does the addition of a border-top have on the position of the left column, causing it

Currently, I am working on creating a list with each list item having a bottom border of 1px solid. The list is then divided into 3 columns using column-count:3 CSS property. For instance, if there are 8 items, it should display 3 items in the first column ...

The extensive magnetic scrolling functionality in Ionic 2 sets it apart from other frameworks

Hi everyone, I could really use some assistance! I've been working on developing an Ionic 2 App and my navigation setup is not too complex. I have a main menu where clicking on an item opens another menu with a submenu. From there, if I click on an i ...

Assistance with centering elements using pure CSS in responsive web design

Seeking assistance as I am facing a challenge with aligning the sponsors section on the website mentioned below. Despite implementing responsive web design, I am struggling to center the sponsors correctly. Your guidance is appreciated... ...

Customize stroke widths for each individual SVG item

I'm facing an issue with applying consistent stroke width to my CSS on a webpage. Here is the code snippet I am using: path { fill: none; stroke-width: 10pt; stroke: red; } Despite this, the rendering appears differently on certain SVGs. You c ...

Choosing "grandoffspring"

I have a complex inquiry! Let's examine three potential scenarios Situation 1 <div class="entry-content"> <p><a href="#"><img src="#"></a></p> </div> Situation 2 <div class="entry-content"> &l ...

Implementing icon display upon click in a Meteor application

Currently, I am in the process of developing an application using meteor and within one of the templates, I have the following code snippet. <h3> <b> <a class="viewed" href="/jobdetails/{{_id}}">{{title}}</a> </b> ...

Bringing in LESS variables to Rails 3

In my assets folder, I have a global.less file where I have defined various site-wide variables. Currently, in order to use these variables in other less files, I have to add this line at the beginning of each file: @import 'global'; While thi ...

Troubleshooting: Scrollspy Bootstrap 4 functionality not functioning properly on Codepen

I’ve been experimenting with the Scrollspy feature in Bootstrap 4 for my Portfolio Page, but I’m facing some issues getting it to work properly on Codepen. After doing some research on StackOverflow, I came across a working example on Codeply, here’ ...

The min-height property in CSS appears to be ineffective on Jelly Bean

In my current project developing an Android application, I have incorporated Webviews in certain activities and fragments. However, I encountered a perplexing issue when running the app on Jelly Bean (api 16 and 18) emulator - the css property min-height ...

HTML - Link to enable automatic printing of the page

Assignment: Develop a hyperlink (HTML <a> tag) that triggers the printing of the webpage without the user manually pressing CTRL + P. My search for information on this topic has not yielded a definitive answer. Some sources suggest using JavaScript ...

Using HTML to place an image tag close to an input element

I'm experiencing a strange issue where adding an img tag alongside an input and a span causes the input and span to shift downwards. <div> <span>Credit Points</span> <input type="text" name="credit_points" value="2.25"/> ...

Struggling to properly set up the hamburger and close icons

When the menu appears on the right side with right: 0;, I change it to right: -200px; when closing it so that the mobile page does not show the menu on the right. My goal is to display the fa-bars symbol when the menu is closed (right: -200px;), and the fa ...

Cube area to be filled

I am struggling to fill a cube with colors as it is only getting half of the figure filled. I suspect there might be an issue with the cubeIndices, but I'm having trouble figuring out how to make it fill everything. While I know I could use a cylinder ...

Steps for modifying material-ui timepicker to display time in a 24-hour format

Presently, I am utilizing a Timepicker from material-ui. It is currently configured with type="time", allowing me to select times throughout the day in 12-hour increments with an AM / PM choice. However, I wish to adjust my picker to a 24-hour format, elim ...

Conceal Tooltips with Materialize CSS

I'm trying to figure out how to hide the tooltip that appears when hovering over this element using Materialize CSS. <li><a class="btn-floating green" onclick="window.print();return false;"><i class="material-icons tooltipped" data-pos ...

Swap out original source files in HTML with minified versions

I have successfully utilized a maven plugin to create a minified and compressed version of my CSS and JavaScript files. Now, I am looking to update the section in my main HTML page that currently loads all those individual files. Here is what it looks lik ...

Video HTML autoplay feature malfunctioning

I have been attempting to use the <embed> tag in order to showcase a video on my webpage. However, I have encountered an issue where the video begins playing automatically when the page loads. In an effort to remedy this situation, I included autost ...

Ways to categorize items using JQuery based on their hierarchical structure

I am looking to organize the following HTML content: <h2>State the Issue  </h2> <h3>Provide information about your objective</h3> <h3>Share any error messages received</h3> <h2>Outline Your Attempts  ...

Optimizing CSS for printing by eliminating unnecessary white space with media queries

Appreciate your assistance! I'm currently working on a solution to print a specific div using CSS Media queries. When the user clicks on print, I want to hide all other elements except for the body div they chose. However, I'm facing an issue whe ...

Place the image in the middle of a div

Struggling to horizontally center an image in a div, but for some reason it's just not working. I've centered images many times before, so why is it different this time? Here's what I've attempted... CSS #cabeca{ position: relative; f ...