Expand the background of CSS (only altering its width)

I am looking to place an image, intended as a background, at the bottom of a container while maintaining its current height and stretching it to the width of the container.

Currently, my CSS looks like this:

background:url('images/poll-graph.svg') no-repeat center bottom;

And my HTML structure is as follows:

<section id="sec-feature-polling">
    <div class="container">
        <h2>This is a heading</h2>
        <p class="subheading">This is a subheading</p>

    </div>
</section>

Adding background-size: 100% caused the image to scale proportionally, increasing its height. I am using Bootstrap 4.0.0.

If anyone has suggestions on how to achieve this effect without distorting the image, I would greatly appreciate it :-)

twitter-bootstrapcssbootstrap-4

Answer №1

It would be greatly appreciated if you could provide your HTML structure, but I will offer some guidance anyway.

Begin by creating a div container with a class, let's call it xyz.

In your CSS file, add the following code:

.xyz {
    background-image: url("paper.gif");
    background-repeat: no-repeat;
    max-width: 100%;
}

This CSS will adjust the height of the xyz container based on its content.

If you prefer to place the image at the bottom of the container, consider using this one-liner in your CSS:

background:url('images/poll-graph.svg') no-repeat center bottom;

[Update] Given the provided HTML structure and your desire to position the image at the bottom of the container, follow these steps:

  1. Close all container div classes (bootstrap may add padding)
  2. Create a new div class below the current container for the background image
  3. Add the desired content within this new div class

Then apply the following CSS to the newly created div class:

background-image: url('../images/college-cover.jpeg');
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
min-height: 750px;

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

Nested divs with scrollable content - height limited to 100%

I've browsed similar posts, but haven't come across one that addresses my specific issue. The layout I'm working with has a left and right column. Within the left column, there are two rows. My goal is to make the bottom row of the left co ...

htmlcss

jQuery Mobile panel buttons are functioning properly within a maximum width of 300 pixels

I have constructed a panel that adjusts its size based on the device's screen using responsive design techniques. The code for this panel is as follows: <div data-role="panel" data-position="right" data-display="overlay" data-theme="a" id="add-for ...

jqueryhtmlcssjquery-mobilejquery-mobile-panel

Encountering dependency tree resolution issues when integrating Bootstrap into Angular version 12.1.4

I've been attempting to set up Bootstrap in a new Angular application, but unfortunately, I'm facing some issues. ng add @ng-bootstrap/ng-bootstrap Upon running the above command, I encountered the following error. Can someone guide me on how to ...

angularbootstrap-4

Gallery of Flickr Photos

I have integrated Flickr code to showcase a photostream on my HTML page: <!-- Start of Customized Flickr Badge --> <style type="text/css> #flickr_badge_source_txt {padding:0; font: 11px Arial, Helvetica, Sans serif; color:#666666;} #flickr_bad ...

javascriptasp.netcssflickr

Having trouble switching tabs on Bootstrap 4.3 beyond the first tab?

I have integrated bootstrap tabs into my web app by following the documentation provided on the bootstrap website. While I have successfully achieved the fade animation for the first tab, I am facing issues with getting the other two tabs to function prop ...

htmlasp.netbootstrap-4

Can a Chrome extension display a webpage in a separate window using only JS, HTML, and CSS?

I am currently working on creating a custom Google Chrome extension. My goal is to have a small window appear when the user clicks on the extension button, without using window.open or traditional pop-ups, to display a specific web page. I have a basic un ...

javascripthtmlcssgoogle-chromegoogle-chrome-extension

Tips for incorporating transition animations into route changes in next.js

On the homepage, there are 2 links that I want to have distinct transition animations for. For example, if I click the link on the left, the animation should start from the left and move towards the right when changing routes. ...

cssreactjsanimationnext.js

selection menu and advancement gauge

While working on my code, I have a task where I need to make the progress bar move a specific amount when a name is clicked based on the option's value. <!DOCTYPE html> <html> <head> <title>testinggg</title> &l ...

javascriptjqueryhtmlcss

Issues encountered in loading JavaScript with jQuery script

I am facing an issue with my jQuery script not loading correctly. When I click on the calculate button, nothing happens as expected. I made sure to copy and paste jQuery directly into the file for offline use, and also created a personal console due to res ...

javascriptjqueryhtmlcss

HTML min-width is not being considered by the media query breakpoint

After resizing the browser window to less than 480px, my site reverts back to its original style (the css not defined inside the mixins). I attempted to limit the html with min-width, but despite the browser displaying a horizontal scrollbar, the css still ...

htmlcssmedia-queriescontainer-queries

What can be done to prevent an image from vanishing along with its containing div?

I recently created a website/application where users can interact with elements by dragging them around the page. However, I encountered an issue where one element disappears when dragged outside of its original container. How can I prevent this from happe ...

javascriptjqueryhtmlcss

Choosing a Span Class Tag

Currently employing Selenium with C# I am working on an automated test scenario that involves a user logging in as 'jonpark2'. Once the user successfully logs in, their username is stored within a span element's text. My task is to locate t ...

c#htmlcssselenium

Ensuring Uniform Card Sizes in Bootstrap 4 for Multiple or Single Cards

Having trouble creating a page with N cards (single or multiple): https://i.sstatic.net/20WXc.png A single card appears like this: https://i.sstatic.net/01bP0.png I am unsure why the single card is not rendering correctly compared to multiple cards. T ...

cssangularjstwitter-bootstrapbootstrap-4

Could you assist me in setting up a loop for this Slideshow that times out and then resets back to the beginning?

Currently, I am in the process of developing a slideshow using jQuery. My main struggle lies in creating a loop that will timeout the slideshow for a specific duration, say 10 minutes, before it reappears and resumes indefinitely. Unfortunately, my attempt ...

jqueryhtmlcss

Interactive Video Effect

Seeking to create a unique video hover effect on an image where, when the mouse hovers over it, a video pops up similar to examples found on this website. I have been grappling with finding a solution for this issue over the past few months. Does anyone ...

jqueryhtmlcss

Animating Angular ng-template on open/close state status

I am looking to add animation when the status of my ng-template changes, but I am unable to find any information about this component... This is the code in my report.component.html <ngb-accordion (click)="arrowRotation(i)" (panelChange)="isOpen($even ...

htmlcssangulartypescript

What is the method for connecting the text to its parent element in SVG?

I have put together a demo at https://codepen.io/anon/pen/rzLEQX, but I am trying to figure out how to ensure that the text is contained within the 'g' container with the id of "g12". Do I need to use variables x and y for this? <g id="g12" ...

csssvg

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 search filter on the bootstrap card failed to display the intended image

When I am searching for a specific image by name, the rest of the row's name keeps showing up. However, I only want to display the data relevant to my search. See the image below: Display: Select all data from the database. <?php $checkQuery = &qu ...

phphtmlcssanimation

The Bootstrap flip-card front and back are positioned side by side, not on top of each other

As a beginner in HTML/CSS/Bootstrap, I'm hoping someone can help me with my issue. I'm working on creating a flip card that features a colored table on both the front and back, with different information displayed on each side. To add "axis labe ...

htmlcssbootstrap-4