Adjustable header: resizing images and text overlay on images

Is there a way to make the images and text resize based on the size of the div or screen? I don't want the text to overflow the images when resizing. I've tried using the object-fit attribute but it hasn't worked. Any suggestions?

    <div class="row" id="bannerDiv">
      <img class="img-fluid" src="img/10045731_open-space-office.jpg" alt="banner">
      <div id="bannerText">
         <h3>Live webinar</h3>
         <h1>Veeam Virtual Labs: Begginer to Advanced</h1>
      <input type="button" id="regButton" value="REGISTER NOW">
      </div>
     </div>
cssdomresponsive-design

Answer №1

To enhance the design, consider utilizing absolute positioning for the text and button elements. Adjusting the font size of the header can be achieved through the implementation of a media query.

#bannerDiv {
position: relative;
}
#bannerText {
position: absolute;
left: 50px;
top: 25px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row" id="bannerDiv">
  <img class="img-fluid" src="https://via.placeholder.com/900x300" alt="banner">
  <div id="bannerText">
    <h3>Live webinar</h3>
    <h1>Veeam Virtual Labs: Begginer to Advanced</h1>
    <input type="button" id="regButton" value="REGISTER NOW">
  </div>
</div>

Answer №2

Since there is uncertainty about utilizing scss/mixins for media queries or using JS, I can only offer a jQuery solution that may serve as a hint. However, without the entirety of your code, my assistance is limited. Providing a Fiddle would be greatly helpful.

if (window.matchMedia('(min-width: 768px) and (max-width: 1024px)').matches) {
  //perform actions on text or 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

How does adding padding cause two horizontal divs to become vertical?

I noticed that when I remove the padding from the code below, two vertical divs become horizontal. This is confusing to me because I thought padding only affects internal spacing. I was expecting the two divs to be aligned horizontally. <style> #w ...

htmlcss

How can I customize a CSS media class?

In my project, I am using a CSS library that includes the following class: @media only screen and (max-width: 480px) { .nav-tabs>li { margin-bottom:3px; } .nav-tabs>li, .nav-tabs>li>a { display:block !important; ...

htmlcss

What is the process for utilizing Angular's emulated encapsulation attributes on HTML elements that are dynamically added to an Angular component?

Within my custom Angular component, a third-party library is dynamically adding an HTML element. I am seeking a solution that can apply Angular's encapsulation attributes to these elements regardless of the specific third-party library being used. If ...

cssangularangular-components

Enhance the aesthetics of material-ui tooltips by utilizing @emotion/styled

Can material-ui tooltips be customized using the styled function from @emotion/styled? import { Tooltip } from '@material-ui/core'; import styled from '@emotion/styled'; const MyTooltip = styled(Tooltip)` // customize the tooltip ...

cssreactjsmaterial-uiemotion

Discover the secret to applying a gradient shade to the "border" element when it reaches full capacity with Vue's innovative Custom CSS package

Utilizing the package https://www.npmjs.com/package/vue-css-donut-chart#usage-with-all-the-available-props to create a "border" effect around images based on progress has presented a challenge. Specifically, achieving a gradient color for the border when i ...

javascripthtmlcssvue.js

A see-through section with a border that fades in transparency

Can anyone help me with creating a box with a unique design using CSS only? I want the box to have a rounded border that starts at 80% opacity at the top and gradually fades to 20% opacity at the bottom. Additionally, the border should start at 80% opaque ...

htmlcss

Fundamental CSS Selector

I'm encountering an issue with CSS selectors while using Foundation 5: I am having trouble selecting the desired element, which seems strange to me. The specific problem I am facing is related to changing the background-color of the "Right Button Act ...

htmlcsscss-selectorszurb-foundation

Is it possible to conceal a form field until a previous field has been completed?

Looking for a way to hide a form field until another field is properly completed? I have a divided registration form and want the second field to appear only when the first one is valid. Preferably using CSS3, with HTML5 and maybe some JavaScript if necess ...

javascripthtmlformscss

Is there a way to turn off alerts from Aspx files for HTML and CSS?

Dealing with annoying warnings in my aspx files has been a constant struggle. The "CSS Value is not defined" message pops up when I reference CSS files from different projects, causing unnecessary frustration. Even more frustrating are the warnings about i ...

asp.netjavascripthtmlcssvisual-studio-2008

Activate animation when a user clicks on a link

Hey there, I'm a bit unsure about how to word this and I'm still getting the hang of StackExchange so I hope I've posted in the correct place. Currently, I am developing a mobile HTML5 app that utilizes Phonegap/Cordova (as well as Bootstra ...

csstwitter-bootstrapanimationcordova

Leveraging IPFS to host a CSS stylesheet

I've been trying to load a css stylesheet using this link... I attempted adding the link tag to both the main and head tags. <link type="text/css" rel="stylesheet" href="https://ipfs.io/ipfs/Qmdun4VYeqRJtisjDxLoRMRj2aTY9sk ...

javascripthtmlcssipfs

After several interactions, the CSS files fail to load

I'm currently utilizing jQuery Mobile with 3 pages, and I've noticed that after navigating between the pages, the CSS is not being rendered properly. LoadCss.js $(document).on("pageinit",function(event) { $("#categoriesPage").on('pages ...

javascriptcssangularjsjquery-mobile

Implement CSS to globally style material.angular's mat-card by customizing the background color

Looking for a way to globally change the background of mat-card on material.angular.io. I attempted adding the following code snippet to styles.css with no success. mat-card { background-color: purple; } ...

cssangularangular-material

What is the reason why modifying a nested array within an object does not cause the child component to re-render?

Within my React app, there is a page that displays a list of item cards, each being a separate component. On each item card, there is a table generated from the nested array objects of the item. However, when I add an element to the nested array within an ...

javascriptreactjsarraystypescriptdom

Strategies for making a child div fade out when the parent div is hovered over

I have a div with the class name ordershape and inside it, there is another div called fad-res. My goal is to display the corresponding fad-res when I hover over a specific ordershape, while hiding the other divs. <div class="ordershape"> & ...

javascripthtmlcss

Styling tip: Distance the tooltip from its parent element when scrolling through a list

I have a table inside li tag, and I want to display the description on :hover inside td. However, when scrolling through the list, the description content starts to appear with a distance from its parent. Despite trying various combinations of position se ...

htmlangularjscssangularjs-ng-repeat

Tips for updating the background color of a specific row

I have a piece of code that I am trying to modify with a specific condition. If {row.BB} is less than or equal to 100, I want to change the background color of the row with this value to red. Can someone help me achieve this? The code is linked to a data ...

javascripthtmlcssnode.jsfrontend

Creating a CSS dropdown menu with absolute positioning and setting the left position to auto

Just laying out my usual HTML menu structure: <div id="page"> <h1>Home</h1> <ul id="nav"> <li><a href="http://example.com/">Home</a> <ul> <li><a href="http://examp ...

htmlcssdrop-down-menu

Is it possible to align images vertically with text in a multi-column Bootstrap 4 container?

Inquiring on how to achieve vertical center alignment of text and images for a website section similar to the one shown in this image: https://i.sstatic.net/s8gNh.jpg. The intention is to align the logos and the corresponding text of company names situated ...

htmlcsstwitter-bootstrapbootstrap-4

What is the best way to move the numerical range value into a span element?

How can I implement the "update" function to retrieve the current slider value and transfer it to a Meter element with the message "Value: [current value]". The indicator color should be #ffff00 if the current value is at least 85, otherwise, it should b ...

javascripthtmlcssrange