Is it true that setting the background size to cover does not actually stretch the image?

Hi, I seem to be having trouble stretching an image using the background-size property. Despite setting it to cover, one or two sides of the image are always getting cropped. What I really want is a way to distort the image so that it stretches to fit any screen size responsively. Is that even possible? Below is the code I've been experimenting with:

.carnival {
    background: url(../images/carnival.jpg) no-repeat 50% 50%;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 100%;
    left: 0;
    right: 0;
    position: absolute;
}

Here is how I've added the HTML:

<div class="carnival"></div>

Strangely, if I remove any of the following lines, the background doesn't display at all:

height: 100%;
left: 0;
right: 0;

I would greatly appreciate any help on this issue. It's frustrating how complex setting a background image can be for me.

htmlcssbackground-imagepositioning

Answer №1

For a better result, try using background-size: 100% 100%; instead of cover.

The cover property will resize the background image to fit the block dimensions, potentially cropping parts that do not match the aspect ratio of the image and the block.

body {
    margin:0;
}
.carnival {
    background: url(http://placekitten.com/700/1400) no-repeat;
    background-size: 100% 100%;
    height: 100%;
    left: 0;
    right: 0;
    position: absolute;
}
<div class="carnival"></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

Use PHP to transform an array into JSON format, then access and retrieve the JSON data using either jQuery or JavaScript

I have successfully generated JSON data using PHP: $arr = []; foreach($userinfo as $record) { $arr[] = array( 'BAid' => $record->getBAid(), 'BCid' => $record->getBCid(), 'BA ...

javascriptphpjqueryhtmljson

Incorporating external CSS stylesheets into a custom LESS framework

Is there a reliable method for integrating a third-party CSS file obtained from an external source into my own LESS compile structure without making many changes to it? I anticipate that the external CSS file may be updated periodically, so I would prefer ...

csslessstylesheet

Creating content in HTML that features two div elements centered vertically on a page, with one div aligned to the left and the other aligned to the right

Implementing Bootstrap for styling my HTML page has resulted in the following layout: https://i.sstatic.net/wzsnc.png Currently, both words are positioned at the top of the screen. However, I aim to have them vertically centered. Additionally, they are c ...

htmlcssbootstrap-4

Artwork expanding incorrectly on HTML canvas

I'm encountering an issue while attempting to draw on an HTML canvas. I've specified 50 circles and multiple lines within a canvas of size 1000x1000 px, but not all circles are appearing as expected. My assumption is that the elements are being ...

javascriptcsshtmlcanvas

Obtain pictures from MongoDB for a website using Angular6

I'm currently in the process of developing my website and I want to showcase an image from my database on the header. Each customer is assigned a unique logo based on their ID, but I'm unsure how to use Angular to display it. Below is my code s ...

htmlangularimageangular6

Transforming a Processing (cursor) file into an interactive webpage

I have created a custom cursor using Processing and now I want to incorporate it into my website. Is there a way to convert the cursor into a .java file so that I can include it in my HTML file? ...

javascriptjavahtmlcursorprocessing

Sidebar Masonry - Use Bootstrap for a Unique Layout

My goal is to have the page divided into 4 rows, with Masonry aligning the posts within 3 rows and a sidebar displayed on the right. However, I am facing an issue where Masonry mixes everything up and does not allow me to have a sidebar at the right. HTML ...

jqueryhtmltwitter-bootstrapjquery-masonrymasonry

Is it recommended to include the default declaration in the same stylesheet as the media queries?

In order to optimize my code structure, I placed the default declaration in the style.css file and kept all media queries separated in a stylesheet named enhanced.css. For instance, an example of a code snippet I have in the style.css looks like this: .b ...

cssmedia-queries

Leveraging Laravel's bootstrap CSS to aesthetically enhance a specific section of a webpage

I'm attempting to utilize the default bootstrap css (app.css) provided by Laravel to style a specific section of my webpage - namely, the form section on my registration page. Instead of adding app.css directly to my html header and affecting other a ...

phpcsslaraveltwitter-bootstrapstyles

Does the CSS file load multiple times if it is being used on multiple pages?

I have a question regarding website performance. I am in the process of creating a 7-8 page website with a common CSS file used throughout. My concern is whether this CSS file will get loaded from the server every time I navigate to a new page, or if it ...

htmlcss.htaccess

Unlinking checkbox click event from row in Angular Material table

I am seeking to remove the ability for row selection in my table rows so that clicking anywhere within the row does not check the checkbox. I want the checkbox to only be checked when the box itself is clicked, allowing me to later add expandable rows when ...

htmlangularangular-material

Achieve smooth scaling of font size in CSS according to body width without the need for JavaScript

Can the font size be smoothly scaled in relation to the width of the body or parent element? I am seeking a solution that does not involve javascript. Is it feasible to relate rem to a specific width? ...

cssresponsive-designfont-size

Highest Positioned jQuery Mobile Section

Requesting something a bit out of the ordinary, I understand. I currently have a jQueryMobile page set up with simplicity: <div data-role="page" class="type-home" id="home"> <div data-role="header" data-theme="b"> <h1>Our To ...

javascriptjqueryhtmljquery-mobile

Tips for adding a CSS class to an HTML element on-the-fly

As a newcomer to JavaScript and AngularJS, my question may be considered naive by some. I am currently working on a tutorial project involving AngularJS. Here is the HTML code snippet I am dealing with: <link href="http://netdna.bootstrapcdn.com/boo ...

javascripthtmlcssangularjs

Which HTML element should be used: section or div?

One of the pages on my website is a profile page which currently looks something like this: <h1>Foo bar profile</h1> <div> <h2>Address</h2> <p>Foo bar street, 55</p> <p>Foo city</p> </div> < ...

htmlheadertitle

Does every part have an unidentified index?

Similar Issue: PHP: "Notice: Undefined variable" and "Notice: Undefined index" This dilemma has puzzled me for three days now, and I'm at a loss on how to resolve it as I keep receiving... Notice: Undefined index: surname in C:\xampp\ ...

phphtml

The style attribute transforms the background-image url quotation to become &quot;

I'm currently working on creating a catalog component that will allow me to display images, titles, and descriptions multiple times. Below is the code for this component: import React from "react"; import '../pages/UI.css'; import ...

htmlreactjsjsx

Guide to adding up the radio button values with Javascript

The tutorials I have reviewed include: How might I calculate the sum of radio button values using jQuery? How to find a total sum of radio button values using jQuery/JavaScript? How might I calculate the sum of radio button values using jQuery? Unfortu ...

javascriptjqueryhtml

The browser is unable to display an image file that contains the special character "%" in its name

I have an image file named 'a%1.jpg' that is not appearing in the browser. The code for my image tag is <img src="a%1.jpg" id="Image1" />. Is there a way to properly render the image using escape sequences? ...

html

Using Jquery to Select Start and End Dates

I currently have two date input fields labeled as Start Date and End Date for a specific Project. If the user chooses a start date that is earlier than today's date but does not choose an EndDate, I want to indicate that the project is ongoing. How c ...

jqueryhtml