Set maximum size for background image in div

I'm facing some challenges with setting the maximum height of a background image within a div. I want the max height to be equal to the actual height of the image, without stretching it. Ideally, if there is excess content in the div, it should stop at the edge of the image and then continue with a background color for the remaining content. Here's the code snippet that I've experimented with:

<style>
    .profilbg {
        background: url(<?php echo $uin->backgroundimg; ?>);
        background-repeat: no-repeat;
        background-size: cover;
    }
    .profilen {
        width: 100%;
        text-align: left;
        clear: both;
    }
</style>

<div class="profilen">
    <div class="profilbg">
        <?php echo nl2br($uin->profilen); ?>
    </div>
</div>

Currently, the background image zooms in and expands if there is too much content.

javascriptjqueryhtmlcss

Answer №1

If you want to set a background image using CSS, you can follow this rule:

.custombg {
  background: url(<?php echo $uin->backgroundimg; ?>) no-repeat #000; /* Your background color */
  background-size: 100%;
}

By applying this CSS code, your background image will have a width of 100%, while the height will adjust accordingly. The specified background color will also be visible behind the image.

Answer №2

.profilebackground {
    background: url(<?php echo $uin->backgroundimg; ?>) no-repeat #000 ;
    background-size:100%;

}

or

.profilebackground {
    background: url(<?php echo $uin->backgroundimg; ?>) no-repeat #000 ;
    max-height:100%;

}

give it a try......

Answer №3

Although the issue has been resolved, an alternative approach would be to utilize background-size: 100%;. By doing so, instead of using cover which stretches the image to cover the entire page and potentially zoom in, setting it to 100% will fill the page with the background without zooming.

Answer №4

Modify your CSS style to achieve a full-width image with the aspect ratio intact, aligning it at the top while filling the remaining space with red color.

.profilbg {
    background: #f00 url(<?php echo $uin->backgroundimg; ?>);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center top;
}

Alternatively, use the background shorthand property:

.profilbg {
    background: #f00
                url(<?php echo $uin->backgroundimg; ?>)
                no-repeat
                center top / 100% auto;
}

See a sample implementation below:

div {
  background: #f00
              url(http://www.placehold.it/1000x150)
              no-repeat
              center top / 100% auto;

  /* temporary code for testing purposes */
  height: 300px;
}
<div></div>

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

Transferring Arrays to AJAX communication

I am facing an issue with passing both a string array and an array of string arrays to a webservice through AJAX in my ASP.NET application. Unfortunately, I keep encountering the following error: {"Message":"Invalid object passed in, : or } expected. (16) ...

jqueryasp.netajaxjson

Is it normal for e.target.result to only work after two or three tries?

Attempting to resize an image on the client side before sending it to the server has been challenging for me. Sometimes, the image does not align correctly with the canvas used for resizing. I have noticed that I need to send the resized image at least tw ...

javascripthtml

Tips for automatically selecting the day when choosing a date

I had created two fields named HolidayDate and HolidayDay with specific attributes as shown below: [Required] [DataType(DataType.Date)] [DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)] [DisplayName(Constants.DisplayN ...

c#jqueryasp.net-mvcasp.net-mvc-4datepicker

Having trouble with javascript regex for date validation?

I am facing an issue with using JavaScript regex to validate date inputs. It is identifying valid dates as invalid, and I'm not sure what the problem is: /^([0-9]d{2})+(\.|-|\/)+([0-9]d{2})+(\.|-|\/)+([0-9]d{4})+$/ The date forma ...

javascriptregexdatevalidation

The list in the navbar is misaligned and not centered vertically within the flex container

I've been working with flex for a while now, but I'm struggling to vertically align the content of my navbar to the center in the code. <nav className="nav navbar"> <h3> Logo </h3> <ul className= &q ...

htmlcssreactjs

Having difficulty accessing data in a JavaScript file within Odoo 9 platform

I have attempted to extract HTML content from JavaScript declared in my module. However, when I try to retrieve content by class name, all I can access is the header contents and not the kanban view. openerp.my_module = function(instance) { var heade ...

javascriptodooodoo-9

Place a div element directly into a specific cell within the table

How can I place the following div <div class="inner"> <p>The first paragraph</p> <p>The second paragraph</p> </div> into a specific cell within a table? I am open to using either plain JavaScript or jQuery, althou ...

javascriptjquery

Implement a personalized callback function for a specific resource

Currently, I am using angularjs version 1.1.5 and have a service provider for a resource. In one specific use case, the returned response needs to be reprocessed and some information normalized. Although this is a special case, the resource is utilized thr ...

javascriptangularjsangularjs-service

The marriage of Vue 2.0 and Rails 5: Shifting from Reactive to Declarative Rendering

As I make my way through the Vue guide with a Rails 5 app, I've noticed that although I am able to update my Vue js object, the DOM doesn't behave as described in the Declarative Rendering section. The data and the DOM are supposed to be linke ...

javascriptjqueryruby-on-railsvue.jsdeclarative

Instructions for incorporating highcharts sub modules into a React application

I have been utilizing the react-jsx-highcharts library to seamlessly integrate Highcharts into my React application. Everything is functioning perfectly. However, I am now interested in incorporating the boost module. I attempted to add it by simply using ...

javascriptreactjsnpmchartshighcharts

The jQuery blur event triggers only on the first occurrence

Working on a script to handle a shopping cart, I ran into an issue with the blur event on the input field used to modify product quantity. The problem is that the event only triggers once and requires a page refresh to work again. Currently, this is my s ...

jqueryajaxonblur

Developing an interactive web interface with HTML

I've been attempting to design a flexible HTML page that replicates the layout of a Java applet clock, but I'm unsure if my current approach is correct. Below is an example of the three-clock image set that I am currently working on. My method i ...

htmlcsslayout

Running a JavaScript function within a designated div element

I'm currently facing an issue with executing a javascript function - onload only in a specific div. I seem to be stuck on this problem, so if anyone could offer some assistance, I would greatly appreciate it. Thank you very much in advance! functio ...

javascriptjqueryhtml

Creating a function that allows for the dynamic addition of rows in Angular with

I am currently working on implementing search and filter functionality, which requires adding rows dynamically. With hundreds of fields to filter, my boss has decided to organize them in dropdown menus (such as Manager, City, and Name in this example). The ...

javascripthtmlangularangular-material

Express.js encountering an `ERR_HTTP_HEADERS_SENT` issue with a fresh Mongoose Schema

My Objective Is If data is found using the findOne() function, update the current endpoint with new content. If no data is found, create a new element with the Schema. Issue If there is no data in the database, then the first if statement throws an ERR_H ...

javascriptnode.jsexpressmongoosenosql

The error encountered is: "TypeError: req.flash does not exist as a function in NodeJs

When it comes to working with Registration on a Site, the Validation process is key. In this case, mongoose models are being used for validation and an attempt is being made to utilize Flash to showcase error messages within the Form. However, there seems ...

javascriptnode.jsexpressnpm

Using Jquery to switch controls to labels for a read-only form display

Looking for a solution where a form can be displayed in view-only mode without making controls read-only. The requirement is to show the values of text boxes, drop downs, and list boxes (comma delimited) as labels when the user has read-only access to the ...

jqueryasp.netasp.net-mvcpluginsasp.net-mvc-4

Leverage the package.json script without relying on any yarn/npm commands

Can scripts commands be executed within the package.json file without needing to include yarn or npm? For example: "scripts": { "get": "node index.js" } Currently, in order to run this script I have to use yarn get [ar ...

javascriptnode.jsnpmyarnpkg

Save information in a session using html and javascript

I'm having trouble accessing a session variable in my javascript code. I attempted to retrieve it directly but ran into issues. As an alternative, I tried storing the value in a hidden HTML input element, but I am unsure of how to properly do that wit ...

javascriptphphtmlsession

Modify the indentation format in CSS/JS

When the Tab key is pressed in an HTML page and the tabbed link gets highlighted, is it feasible to customize the style of that highlight? ...

javascripthtmlcss