(Background-sizing: Full) encompassing margins

Can anyone assist me with the background-size: cover; issue?

I'm facing a problem where the background image I set in the CSS is covering the padding of my image box instead of staying inside the padding. Is there a way to use background: url() and background-size to keep the image inside the padding?

Here's what I have so far:

.image-container {
  background: #eee;
  width: 100%;
  height: 120px;
}

.image-container div.image {
  background: #ee1;
  height: 100%;
  width: 50%;
  display: inline-block;
  float: left;
  padding: 4px 0px;
  background: url("https://static.pexels.com/photos/14621/Warsaw-at-night-free-license-CC0.jpg");
  background-size: cover;
}
<div class="image-container">
  <div class="image"></div>
  <div class="image"></div>
</div>
htmlcss

Answer №1

Instead of using padding, consider utilizing a border for your image container.

For example:

.image-container div.image {
  padding: 4px 0px; /* remove this */
  ...
  border-top: 4px solid transparent; /* or any desired color */
  border-bottom: 4px solid transparent; /* or any desired color */
  box-sizing: border-box;
  background-size: cover;
}


.image-container {
  background: #eee;
  width: 100%;
  height: 120px;
}

.image-container div.image {
  background: #ee1;
  height: 100%;
  width: 50%;
  display: inline-block;
  float: left;
  border-top: 4px solid green; /* just a demo color */
  border-bottom: 4px solid green; /* just a demo color */
  box-sizing: border-box;
  background: url("https://static.pexels.com/photos/14621/Warsaw-at-night-free-license-CC0.jpg");
  background-size: cover;
}
<div class="image-container">
  <div class="image"></div>
  <div class="image"></div>
</div>

The demo snippet above illustrates that the border is positioned above the 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

The problem with the Image Gallery carousel not functioning properly in a right-to-left direction arises when attempting to modify

I have been developing an image gallery that functions perfectly in the English version of the website. Now, I am tasked with replicating the same functionality for another version of the website that requires right-to-left (RTL) direction. However, when I ...

javascriptjqueryhtmlcss

Is there a way for the remaining divs in a column to match the width of the widest div?

I'm attempting to ensure that the divs in a column take the width of the widest element, with the exception of the top div which should span 100% of the screen. How can this particular layout be achieved? Please refer to the image below for a clear ex ...

htmlcss

Modifying paragraph content with JavaScript based on selected radio button values and troubleshooting the onclick event not triggering

I am working on implementing a language selection feature on my website where users can choose between English and Spanish. The idea is to have two radio buttons, one for each language, and a button. When the button is clicked, the text of the paragraphs s ...

javascripthtmlbuttononclick

Tips to prevent elements from overlapping in Angular applications

I am facing an issue with my Angular-based app where I dynamically populate the page with table rows. There is an app-console element below the page that has a fixed position. Whenever I click the button to add a new row, it overlaps with the app-console. ...

javascripthtmlcssangular

I am facing difficulties with the header in CSS as it is not resizing properly

I'm having trouble getting my mobile-first design to work properly because the header doesn't resize in mobile view. I'm satisfied with how it looks in full-screen, but I haven't been able to make any media queries work. You can downloa ...

javascripthtmlcss

Converting HTML code into executable PHP code

I'm having trouble embedding PHP into an HTML file. I modified my .htaccess to recognize HTML files as PHP, but when I attempt to open the .html file in my browser, it gets downloaded instead of being processed and shown. UPDATE: Here is what's ...

phphtml.htaccess

The form data should persist even if the user switches screens or logs out of the session, ensuring that the information remains intact

As a user fills out data in form input fields, ensuring that the entered values persist even if the user navigates to other pages or logs out of the session can be a challenge. How can we achieve this functionality in vue.js? Despite my attempts, I have no ...

htmlvue.js

Validating phone numbers using AngularJS

Seeking validation for phone numbers based on specific conditions: - If all 10 digits are identical, show an error message. - If it begins with the number 1, display an error message. Have you encountered a similar scenario? Please share your sug ...

htmlangularjsvalidation

How can I retrieve XML through a URL using HTML5 and JavaScript?

Currently, I am looking to access an XML file through a URL link. My main goal is to retrieve the file automatically and extract its contents for further processing. However, I am facing difficulties in finding the appropriate method to obtain and read t ...

jqueryxmlajaxhtml

Struggling with getting the local slick slider to run smoothly

After installing the slick slider plugin and trying out some basic examples on jsfiddle, I encountered an issue when running it locally. For some reason, the results I get when testing it on my local environment are different from what I see on jsfiddle. ...

jqueryhtmlcssslick.js

The alignment of margins appears as intended in Opera, Chrome, and IE, but unfortunately it does not

I have exhausted all possible options, but I am still struggling to get this page to appear correctly in Firefox. When you click inside the square, a menu with images should display on the right side. It is properly aligned in every browser except for Fire ...

cssfirefoxmargin

Loading content onto a webpage using AJAX

I am currently facing a challenge while attempting to incorporate a file on my server using AJAX. The issue I am encountering is that it disrupts the functionality of my PHP code. The AJAX is implemented on the following page: <div id="content&quo ...

javascriptphphtmljqueryajax

Field for text input enclosed within the <select> tag

I have a project where I am implementing a dropdown using AngularJS. Here is the code snippet: <div class="col-md-9"> <input type="text" placeholder="Enter Module" list="names" ng-model="data.Name" /> <select id="names" class ...

htmlangularjscomboboxhtml-select

When attempting to utilize drag and drop functionality in HTML5, the error message "DndSimulator is not

Currently, I am using selenium webDriver in C# on a Windows platform to automate tests involving HTML5 drag and drop. In my approach, I rely on the dragTo method from Selenium for achieving this functionality successfully in one test. However, when I attem ...

c#htmldrag-and-dropselenium-chromedriver

Iterating over a table and selecting a specific button on the rows that meet a specific condition

I'm having a bit of trouble and would really appreciate your help. I'm attempting to write a script that will scan through this table and delete any row that contains the word "active". The script needs to check every row in the table. The code ...

pythonhtmlseleniumpytest

CSS - Issues with transition smoothness on Safari

I am facing an issue with a simple font-size transition in Safari, causing stuttering while it works smoothly in Chrome and Firefox. I'm not sure if this is a Safari problem, a Webkit issue, or something else entirely. Any workaround suggestions would ...

htmlcsssafaritransition

Creating a standalone card using Bootstrap

Trying to create this... https://i.stack.imgur.com/PMRSI.png However, I'm unsure of how to achieve it. <div class="row justify-content-center"> <div class="col-3 me-3" style="background-color: #F1F3F8; border-r ...

htmlcssbootstrap-5

What is causing the horizontal misalignment of these divs? Why are they breaking onto separate lines?

This HTML code snippet contains a div element with nested divs styled with different border properties. The red divs are not displaying in the same horizontal row. What could be causing this issue and how can it be resolved to ensure that all red divs are ...

htmlcssalignment

Is there a way to activate the autoplay feature for this?

I'm really new to Jquery and most of this code isn't mine, I'm just using it as a learning tool for creating sliders. If someone could give me some guidance on how to make this slider work automatically when the page loads, that would be gre ...

javascriptjqueryhtmlcss

Make the height of the input element equal to 100% of its parent

I am struggling with setting the height of input (type text) to fit 100% of its parent element (td). I attempted to individually adjust the height of each input using jQuery, but this method is time-consuming, especially since the site I am working on ha ...

htmlcssinputhtml-table