Clipping of the background image

http://jsfiddle.net/R82a4/

My attempt at achieving the desired result fell short:

<div style="background-position: -50%; width: 100%; background-image: url('/assets/upload/stab/1/taccos.png'); background-repeat: no-repeat; background-size: 100% auto; height: 885px; width: 792px;">
sdfsf<br />sdfsf<br />sdfsf<br />sdfsf<br />sdfsf<br />sdfsf<br />sdfsf<br />sdfsf<br />sdfsf<br />sdfsf<br />sdfsf<br />sdfsf<br />sdfsf<br />sdfsf<br />
</div>

The desired outcome is structured as follows:

|        IMAGE CENTERED         |
|    IMAGE CENTERED     |
|  IMAGE CENTERED   |
| IMAGE CENTERED |
|IMAGE CENTERED|
|MAGE CENTERE|
|AGE CENTER|
|GE CENTE|

With an increase in screen size, the image should be clipped rather than resized, maintaining vertical centering of its content.

htmlcss

Answer №1

Remove the background-size property, replace it with background-position:center, and remove the width attribute from the div element. If the div has a fixed width, it will not adapt to the screen width, causing the image to be clipped.

<div style="background-position: center; width: 100%; background-image: url('http://t1.gstatic.com/images?q=tbn:ANd9GcSJYVbh_I1DDoLLOxTwZPy0LPNxkZJvp1LmRydhdVcO2WifcnKN'); background-repeat: no-repeat; height:183px;">
sdfsf<br />sdfsf<br />sdfsf<br />sdfsf<br />sdfsf<br />sdfsdfsf<br />sdfsf<br />sdfsf<br />sdfsf<br />sdfsf<br />sdfsf<br />sdfsf<br />

Answer №2

Check out the updated JSFiddle I've made for you: http://jsfiddle.net/R82a4/3/

background-position: center;
width: 100%;
background-image: url('http://t1.gstatic.com/images?q=tbn:ANd9GcSJYVbh_I1DDoLLOxTwZPy0LPNxkZJvp1LmRydhdVcO2WifcnKN');
background-repeat: no-repeat;

Here's a screenshot link for reference: https://i.sstatic.net/nSZqk.png

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

SVGs appear at the forefront of all other elements

is where this issue is arising.... specifically in the date selection feature on the left side of the options panel. When using both Google Charts and Material Icons with the date picker component from https://github.com/nickeljew/react-month-picker, we a ...

htmlreactjssvggoogle-visualizationmaterial-ui

Invalid Value Provided for CSS Clip Path

I'm currently attempting to design a sophisticated clip-path using a logo in CSS, but I keep receiving an error stating "Invalid Property Value." The X and Y coordinates have been computed based on dimensions of 508px x 190px https://i.sstatic.net/Yh ...

htmlcss

Updating the CSS: Using jQuery to modify the display property to none

I am facing an issue with displaying an element that is defined as display:none in CSS. I tried to use the .show() function in jQuery, but it's not working as expected. Here's the code snippet: CSS .element { position: absolute; display: no ...

javascriptjqueryhtmlcsssettimeout

When transitioning from another page, the header will cover a portion of the section

I am facing a specific issue that I need help with. My goal is to have the navigation bar link to different sections of a single page when clicked. For example, clicking on "Contact" should take the user to the contact section, and then if they click on "A ...

javascriptjqueryhtml

What steps can I take to deactivate input and stop it from being accessible on the browser?

insert image description Is there a method to block users from accessing disabled input fields in the browser? Any recommendations or solutions would be greatly appreciated. Vuejs is utilized within my project. Implementing this feature serves as a secu ...

javascripthtmljqueryvue.js

Troubleshooting an Issue with CSS Sliding Doors

I'm having trouble getting the right image to show on my website. The left side of the image is fine, but I can't figure out how to make the right one appear. As a HTML/CSS beginner, I'm still learning the basics. For more information, vis ...

htmlcss

Tips for altering the color of an image using CSS attributes

I am looking to create a male Head component in this design draft and modify the CSS according to the skin prop. I have attempted to use filter and mix-blend-mode properties, but have not found a solution yet. Any guidance on how to achieve this would be ...

cssvue.jsfilterfigmamix-blend-mode

Creating artwork: How to resize images without losing clarity

Struggling to display an image in a canvas element that needs to be a certain percentage of its parent container's width. Despite my efforts, the image seems to blur once added to the canvas, which is not the desired effect. I attempted to disable th ...

javascripthtmlcsscanvas

Bootstrap causing malfunction of JQuery bounce animation

Looking to create a bouncing popup on hover using Bootstrap (v3.0.0) panel, but encountering an issue where the panel changes its width after the bounce effect. For reference: http://fiddle.jshell.net/YxRvp/ If anyone has a solution for this problem, ple ...

jquerycsstwitter-bootstrapbounce

AngularJS, the element being referenced by the directive is empty

Currently, I am in the process of transferring a jQuery plugin to AngularJS simply for the enjoyment of it. Previously, when working with jQuery, my focus was on manipulating the DOM using jQuery functions within the plugin loading function. Now that I am ...

javascriptjqueryhtmlangularjsdom

The code will only detect the browser when accessed from a mobile device, and will display a

I've experimented with various methods to make this work. My website has a streaming radio player at the top of the page, usually using the default script provided: <center> <!--Wavestreaming.com SHOUTcast Flash Player--> <scri ...

jqueryhtmlbrowser-detection

Delete any additional input forms

I have recently developed a function to dynamically add an input field to my form: function add_parameter(){ var d = document.getElementById("content"); d.innerHTML += "<br/><br><div class='custom_search col-md-5'><sp ...

javascripthtmlforms

When the field is clicked into for the second time, the month and year picker values will update

I recently implemented a month and year date picker code I found on a website. While I was able to customize the date format (mm/dd/yy) and successfully select values, I encountered an issue where the selected date changes drastically when clicking away fr ...

javascriptjqueryhtmlforms

Issue with !important keyword taking precedence not resolved

While working on a navigation bar button, I encountered a specificity conflict with the opacity property. I attempted to use the !important override but it doesn't seem to be taking effect. Any insights into why this might be happening? Here is the H ...

htmlcsscss-specificity

Verify if there is a value in at least one of the multiple input fields

I have 4 input fields and I need to check if at least one of them has a value. If none of them are filled out, I want the function to stop. Below is the current code snippet I'm using but it's not working as expected because it doesn't ente ...

javascriptjqueryhtml

"Learn how to position a div element below the header div and above the footer div while maintaining full height in

Recently delving into the world of reactjs, I find myself facing a challenge with a page that contains 3 distinct blocks formed by divs. Have a look at the layout on my page: My Page This is the code snippet I have worked on: return ( <div> ...

javascripthtmlcssreactjs

Ways to obtain the ID of the following element using jQuery

Here is some HTML code, and I am trying to retrieve the ID of the next element from a clicked element with the class name "coba" or to get the ID of an element with the class name "coba2." <div class="dropdown"> <label>Category</label> ...

javascriptjqueryhtml

Enhancing user input with multiple values in a textarea using JSTL

I'm having trouble inputting multiple values into a textarea using JSTL. Here is the coding snippet I am using: <label>Resources</label> : <c:forEach items="${MEETING_ENTITY}" var="resource"> <textarea id ...

javascripthtmlforeachjstl

What is the best way to conceal a div element on a Razor Page depending on the user's input?

How can I display the state field only when the user selects United States in the country field, and hide it otherwise? Here is the code snippet from my cshtml page: <div class="form-group col-sm-4 mt-4"> <label asp-for="Form.Co ...

c#htmlcssasp.net-corerazor-pages

Different ways to style this form using only CSS

Consider the HTML code below: <form> <p> <label for="id_name">Name:</label> <input id="id_name" maxlength="40" name="name" type="text"> </p> <p> <label for="id_format">Fo ...

htmlcss