How to add dimensions to a background image using CSS3

I would like the background image to have a size of 636px by 1140px instead of applying it to the div element directly. This is because I want to avoid scrollbars due to the height of the div.

When I specify the width and height for the parent div, the background image displays properly. However, when I try to set the background size, it does not work as expected.

.custom_app_phone_div {
  margin: 5% auto 0 auto;
  height:auto;
  width:auto;
}
.custom_app_phone_div .custom_app_phone_bg_image_div {
  background: url("http://i.imgur.com/jIE5Bf7.png") no-repeat;
  background-position-x: center;
  background-size:636px 1140px;;
  
  width: 100%;
  height: 100%;
  padding: 10px;
}
<div class="custom_app_phone_div">
            <div class="custom_app_phone_bg_image_div">
              
            </div>
          </div>

Any assistance on this matter would be highly appreciated.

Many thanks!

htmlcss

Answer №1

If no specific height is specified, the div will adjust to the height of its content.

To ensure a minimum height for the div, you can use the min-height property.

Answer №2

I'm not entirely sure about the specifics of your request. However, if you wish to adjust the size of the background image without altering the size of the containing div, you have a couple of options available. You can either utilize an <img/> tag for the image or create a helper div specifically for the background image (refer to the example below).

If your goal is to eliminate the scroll bar, you can assign a fixed height/width to the parent container .custom_app_phone_div and apply overflow: hidden.

We recommend trying out these suggestions and informing us of their effectiveness.

.custom_app_phone_div {
    margin: 5% auto 0 auto;
    height:auto;
    width:auto;
}
.custom_app_phone_div .bgHelper{
    background: url("http://i.imgur.com/jIE5Bf7.png") no-repeat;
    background-position-x: center;
    background-size: contain;
    height: 1140px;
    width: 636px;
}
.custom_app_phone_div .custom_app_phone_bg_image_div {

}
<div class="custom_app_phone_div">
    <div class="bgHelper"></div>
    <div class="custom_app_phone_bg_image_div">
    </div>
 </div>

Answer №3

To set the dimensions of background pictures to 636px x 1140px, simply use any photo editing software and then add this code:

background: url("http://i.imgur.com/jIE5Bf7.png") center no-repeat;

View a demo on fiddle here

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

Gathering Servlet details from non-form elements

I am currently in the process of developing an application that is capable of parsing JSON strings. At this stage, I am able to input a JSON string using Java, write it to an HTML document, and then have a JavaScript program read and parse it before ultima ...

javascriptjavahtmljsonservlets

Implementing a background image layered over a background color using CSS

Currently, I am in the process of converting a webpage from PSD format. The main content of the page is designed with a solid background color, but there is also a separate layer that features a glow effect on top of the background. However, when implement ...

htmlcssbackgroundpsd

Having trouble with Javascript not detecting when it's empty?

Recently, I have been attempting to modify the color of a submit button when a form is empty. As a beginner in this area, I am somewhat puzzled as to what mistake I might be making. I will share the current code with you in hopes of receiving some guidance ...

javascriptjqueryhtmlforms

Using jQuery to create a div that animates when scrolling

Recently, I came across this interesting code snippet: $(document).ready(function(){ $(window).scroll(function(){ if($("#1").offset().top < $(window).scrollTop()); $("#1").animate({"color":"#efbe5c","font-size":"52pt", "top":"0", "position":"fix ...

jquerycss

In Python using Selenium, the text property of a WebElement may cut off duplicate whitespaces

Today, I came across an interesting observation regarding the text property of WebElement. Here is a PDF link that sparked my curiosity: https://i.stack.imgur.com/1cbPj.png Upon closer inspection, I noticed that the file name contains triple whitespace. W ...

pythonhtmlseleniumdomselenium-webdriver

Repairing a broken link to the search engine results page (SERP) of an instant JSON search script

I have developed a search script inspired by Google Instant search, which shows relevant results as the user types. The script is written in JSON and utilizes JavaScript to create a URL for the result based on user input. However, there seems to be an issu ...

javascriptjqueryhtmljson

how to handle form submission using JavaScript's return method

As a developer, I have created a single page that fetches data from a registration page. On this page, each data row has an "add" and "unfriend" button, with the latter initially disabled. When a user clicks the "add" button, a prompt box appears asking ...

javascriptphphtmlforms

Ways to align items in the middle of a list

I'm having trouble figuring this out. How can I properly center list items within the ul? body {margin: 0} ul { width: 1000px; margin: 0 auto; padding: 0; list-style-type: none; margin-top: 30px; overflow: hidden; background-color: # ...

htmlcsshtml-listslistitem

Tips for concealing select options after choosing with select picker?

Our establishment features three distinct rooms, each offering three identical options that users can choose from. https://i.sstatic.net/Jx4Me.png To illustrate, if a user named John selects option one in the first room, that same option will be hidden w ...

javascripthtmljquerybootstrap-5bootstrap-selectpicker

What is the best way to save data in order to effectively showcase a collection of images that together form a single entity in a game

Apologies for the unclear title, I struggled to find the right words. Recently, I delved into the world of 2D game development and was amazed by the capabilities of HTML5's Canvas element. Currently, I am working on my first basic project to grasp th ...

javascripthtmlcanvas

Displaying information in a drop-down list based on the selection made in a previous drop

Hey fellow developers, I could really use your expertise on a project I'm working on for attendance management. I've hit a roadblock with a specific feature - my goal is to dynamically display departments based on the selected block without requi ...

phpjquerycssajaxhtml

Unique Pie Chart Designs

As I attempt to create a dynamic arc-shaped pie graph using CSS, representing 100% of the data, I find myself facing challenges. Despite extensive research and Google searches, I have yet to come across a suitable solution. The following reference appears ...

csshtmlgraphchartssvg

I'm a complete programming newbie and I want to start learning JavaScript, jQuery, and other programming languages. Where should I

Coming from a design background with zero programming knowledge, I have recently learned XHTML and CSS. Now, I am eager to expand my skills by mastering JavaScript, jQuery, and more. Where should I begin? This will be my first foray into programming. Whil ...

javascriptjquerycssxhtml

Is it permissible for H2 heading to resemble H1 visually, and vice versa, in compliance with WCAG guidelines?

My expertise lies in Accessibility testing. Currently, we are dealing with Two headings <h1 class="CssPropertywithSmallFontSize">Heading One</h1> <h2 class="CssPropertywithBiggerFontSize">Heading Two</h2> From a visual standpoint, ...

htmlcsswcag2.0

What is the best way to retrieve information from a webpage I have created using an express backend and an HTML frontend

I designed a login page named index.html that prompts users to enter their email and password, followed by a submit button with the label "Log In": <input type="submit" value="Log In" id="loginbutton"> Within my app.js ...

javascripthtmlexpressfrontendbackend

Unable to "clean up" the HTML document

Struggling with utilizing tidy to produce clean html code. My attempt looks like this: tidy -i -utf8 output/page_1530597755.html -b -o test.html However, no output file is being created! Instead, there are numerous warnings and an error message popping u ...

htmlselenium

The Angular ng-style feature is responsible for applying a style attribute that is subsequently not maintained in proper sync

My angular website retrieves data from a Web API as its back end. Initially, a generic background is displayed. However, after the user logs in, the background image URL specific to the customer is fetched and utilized in the ng-style attribute. Upon the ...

htmlcssangularjsng-style

Designing a slider to display a collection of images

I am currently working on a slider project using HTML, javascript, and CSS. I'm facing an issue where only the first two images (li) are being displayed and it's not transitioning to the other (li) elements. Below is the HTML code snippet: <se ...

javascriptcsshtml

Modify the color of the footer area and eliminate any underlines present

In the footer section, the tags are displaying in blue color and I would like to remove the line under the li tags. If necessary, I can provide additional HTML or CSS code for reference. Below is the snippet of HTML and CSS related to the footer: My HTML ...

htmlcss

Why is my md-button in Angular Material displaying as full-width?

Just a quick question, I created a simple page to experiment with Angular Material. On medium-sized devices, there is a button that toggles the side navigation, but for some reason, it expands to full width. There's no CSS or Material directives causi ...

javascriptcssangularjsmaterial-designangular-material