How can I resolve the issue of background-size not functioning properly?

Struggling to set a background-image with the 'cover' size property inside a div. Despite trying different values for background-size, the image always shows up in full size within the div.

I've searched for similar answers on SO, but nothing has worked so far.

What am I overlooking?

#page {
  background: #fff;
  width: 100%;
  margin: 0 auto;
  margin-top: 0px;
  display: block;
  /*padding: 40px 40px 50px 40px;
  position: relative;*/
  z-index: 0;
}
.status {
  position: absolute;
  text-indent: -5000px;
  width: 150px;
  height: 61px;
}

.Paid {
  background-image: url(<?php echo base\_url();?>assets/blueline/img/status-paid.png);
  background-position: center;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}


<div id="page">
  <div class="status Paid">
  </div>
htmlcss

Answer №1

#page {
  background: #fff;
  width: 100%;
  margin: 0 auto;
  margin-top: 0px;
  display: block;
  padding: 40px 40px 50px 40px;
  position: relative;
  z-index: 0;
}
.status {
position: absolute;
text-indent: -5000px;
width: 150px;
height: 61px;
}
.Paid {
background-image: url("https://images-na.ssl-images-amazon.com/images/I/51zLZbEVSTL._SX425_.jpg");
background-repeat: no-repeat;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;
}
<div id="page">
<div class="status Paid"></div>
</div>

There could be various reasons why the background image is not displaying as intended. Without specific details, here are some suggestions to troubleshoot:

1. Verify Image Location Check your browser console for any 404 errors related to the background image file path. The issue may lie in the image's location or accessibility.

2. Consider Removing "background-position: center" Disabling this property might help if you're trying to display a full-width background image without centering it within a specific element.

3. Adjust "background-size" Property to "100% 100%" Experiment with setting the background size to cover the entire container using "100% 100%". This can sometimes resolve display issues.

If these tips don't solve your problem, feel free to seek further clarification by leaving a comment. Attached is a functional example for reference.

Answer №2

It appears that the width and height values are incorrect in this snippet. You may want to consider adjusting them accordingly:

.status {
  position: relative;
  text-indent: -9999px;
  width: 200px;
  height: 60px;
}

Alternatively, have you thought about using a combination of text and border styles instead?

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

Tips for increasing the size of a parent div when a child div is displayed with a set width?

Is there a way to make the parent div automatically expand when the child div with a fixed width is displayed onclick? Goal: I want the child div to show up when I click the link, and at the same time, I need the parent div to expand or scale to fit the ...

jqueryhtmlcss

Utilize jQuery to create a dynamic image swapping and div showing/hiding feature

I'm having trouble implementing a toggle functionality for an image and another div simultaneously. Currently, when the image is clicked, it switches to display the other div, but clicking again does not switch it back. Can someone please advise on wh ...

javascriptjqueryhtmlcss

Aligning text in a vertical progress bar using absolute positioning

Currently, I am trying to create a health bar-like element but I am facing difficulties in centering the text within it. Despite exhausting all my options, the text is either off-center when its length changes or extends beyond the borders of the bar. Her ...

htmlcss

Issue with Jquery: Checkbox fails to get checked in Internet Explorer 7

Having trouble with checking a checkbox, I've attempted the following steps: $('#someId').attr('checked','checked'); $('#someId').attr('checked', true); Both of these methods are effective for I ...

javascriptjqueryhtml

Incorporating local JSON data into HTML: A Step-by-Step

I'm completely new to javascript and the utilization of json. What I want to accomplish is quite straightforward, although I am encountering difficulties. My objective is to create a website consisting of two pages: one that showcases artists and ano ...

javascripthtmljson

"Create dynamic tables with AngularJS using ng-repeat for column-specific rendering

I have a model called Item with the following structure: {data: String, schedule: DateTime, category: String} I want to create a report that displays the data in a table format like this: <table> <tr> <th>Time Range</th&g ...

javascripthtmlangularjs

React - using dangerouslySetInnerHTML does not display the expected output

When I enter the following text in the textbox labeled "Type Here" AAA: <HEllo> BBB: <HE llo> The desired result should be identical to what is entered in the "Type Here" box. However, the actual result box does not display the same output ...

htmlreactjs

The structure becomes disrupted when the Material Ui grid is enclosed within a div container

I currently have a responsive dashboard built with Material Ui's Grid elements. One of the grid items is wrapped in a div element, causing the layout to break. Check out the playground with the div element here: https://codesandbox.io/s/basicgrid-mat ...

javascriptcssreactjsmaterial-uigrid

Utilizing JSON Data with JQuery: A Beginner's Guide

I am using a setTimeout function to reload another function every 5 seconds. The update_list function is responsible for rendering entrances in a view. However, when there are many entrances and you have scrolled down, the list empties and reloads every e ...

javascriptjqueryhtmltwitter-bootstrap

Issues arise when inline elements are not behaving correctly when placed alongside inline-block elements

Among the various types of HTML elements, inline and inline-block elements have their differences. One such difference is that inline elements don't support margin-top or margin-bottom properties like inline-block elements do. However, in a specific e ...

htmlcsswebinline

Set the height of the vertical scroll at a fixed 100% floatValue

Check out my creation at http://jsfiddle.net/ZygnV/ html, body { margin: 0; padding: 0; height: 100%; } .main-content-wrapper { height: 100%; overflow-y: hidden; white-space: nowrap; } .main-sidebar { display: inline-block; height: 1 ...

javascripthtmlcss

Is it one form but with two buttons?

How can I identify which button was clicked in a form without using a hidden input field and JavaScript to set different values for each button? You can check out an example demonstrating this technique here: Is there a more straightforward way to achiev ...

htmlformsjsp

In Chrome, there is a single pixel missing below the <dl> element

While my website's basic list looks great on Firefox and IE, there seems to be one missing pixel line in Chrome. Check out this JsFiddle link shared by Jared in the comments for reference. If you're not seeing the missing line, try adjusting th ...

htmlcsshtml-lists

Using ReactJS to dynamically change styles based on state variables can sometimes cause CSS

Currently delving into the world of React. Learning about states/props and the art of dynamically altering elements. I've set up the component states like this: constructor(props) { super(props); this.modifyStyle = this.modifyStyle.bind(thi ...

javascripthtmlcssreactjsweb-frontend

Issue with web bot functionality

My dynamic database page is filled with an array of hyperlinks. The layout consists of 3 columns: The first column pulls links directly from the database, the second adds a + link to each entry, and the third includes a - link Essentially, every row that ...

asp.netjquerysqlhtmlcss

Create a 3D vertical flip effect for images using CSS

Learning About HTML <div class="container"> <div class="wrapper"> <div class="im-fix"><img src="foo.jpg"></div> <div class="img-closed"><img src="foo-close.jpg"></div> <div class="img- ...

htmlcss

Vibrant diversity in a solitary symbol

I have customized styles to incorporate Fontawesome icons with their brand colors - for instance, the Opera icon appears in red, IE in blue, and Firefox in orange. Chrome, however, presents a unique challenge with its four distinctive colors. I am curious ...

cssfont-awesomefont-awesome-5

What is the best way to reach nested iframes?

I am looking for a solution to send post messages (window.postmessage) to iframes. Currently, it is functioning properly with a single iframe inside the parent page. However, I want it to also work for nested iframes. Here are the criteria: I should on ...

javascriptjqueryhtmldom

Ensure the beginning and ending times are accurate for newly added input fields using jQuery

I've included a JSFIDDLE link here for reference. The validation for start and end time kicks in when the 'Next' button is clicked, located on the same page. I'm looking to validate the start and end times for dynamically generated fiel ...

jqueryhtmlvalidationtimepicker

Turn off padding in material ui card

Currently, I am utilizing a material UI card and upon inspecting the card, I noticed the presence of this unique class: "MulticardContent-root". This class adds padding of 16 which I would like to remove. Strangely, it is not located within the styles co ...

cssmaterial-ui