Is CSS3 Background Specification Still Incomplete?

Currently in Chrome, the background style specification is:

background: color position/size repeat origin clip attachment image|initial|inherit;

However, I am having trouble making the position/size fragment work;

I should be able to use 

red top left 100% 100% no-repeat url()
or red top left contain url() or even red contain url() -- but none of these combinations are producing the desired results.

Naturally, I can achieve it by specifying each individual background-* attribute. Is there an issue with the specification itself or is it a problem specific to Chrome?? O_o

css

Answer №1

The syntax for the CSS background attribute is structured as follows:

background: [  <background-color>    ||  <background-image>       ||
               <background-repeat>   ||  <background-attachment>  ||
               <background-position>
            ]   |   inherit ;

For instance:

background: red url("../images/image.jpg") no-repeat scroll top left;

Concerning the background-size attribute, it is part of CSS3 and should be utilized separately.

Answer №2

The solution lies within your very question. What seems to be missing is the / between position and size:

background: #FFF url("/image/path/img.jpg) no-repeat scroll top left / 100% 100%;
                                                                     ^

Here's an illustrative example:

html, body {
    height: 100%;
    min-height: 100%;
}

body {
    background: #FFF url(http://placehold.it/400x400) no-repeat scroll top left / 100% 100%;
}

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 CSS is not functioning properly on the admin page of a Django application hosted on AWS

After following a tutorial on setting up Python Django on AWS Elastic Beanstalk, everything seemed to be working fine except for the CSS on the administration page. I tried troubleshooting by looking at various Stack Overflow threads like Default Django 1 ...

pythoncssdjangoamazon-web-servicesamazon-ec2

Issues with boxes showing or concealing depending on the chosen option

I am encountering an issue with a dynamic dropdown feature. The secondary box is supposed to appear based on the selection of the first box. However, as soon as I select an option in the second box, it disappears immediately. I suspect the problem lies wit ...

javascripthtmlcssdynamic

Expanding SVG Button Overlay in ChakraUI

I am trying to design a uniquely shaped button that sits on top of an image, but I am encountering some challenges with the scaling of the button mask. Both the image and masks were created at the same base dimensions for easy alignment at 0,0. Here is a ...

cssreactjssvgscalechakra-ui

Layering numerous backgrounds (Regular, Expanded, Regular) atop one another

After experiencing an issue with the background image not fitting the content properly at different resolutions, I attempted to divide the background into three parts and automatically stretch the middle section to fill the space between the top and bottom ...

htmlcssbackground-image

CSS Flexbox - Choose all elements that appear at the start of a new line (Wrap)

Is there a CSS selector that can prevent content insertion on new lines when using the wrap feature in CSS-Flexbox? I am utilizing CSS-Flexbox for a layout with the wrap option, but I do not know the number of lines beforehand. I need a solution where the ...

cssflexbox

Oops! Looks like we hit a roadblock trying to access the file at ../src/web/views/index.htm. The system

Encountering some peculiar file path issues in my Go project. Here's how the file structure is laid out: C:/ProjectName/ -------------->bin/ -------------->pkg/ -------------->src/web/ ---------------------->main.go ---------------------- ...

htmlcssgofilepath

Building a scrollable dropdown menu with Bootstrap 5: A step-by-step guide

The search for suitable code examples for scrollable dropdown menus compatible with Bootstrap 5 has been challenging. Are there any contemporary methods available to achieve this functionality seamlessly? ...

javascripthtmlcssbootstrap-5

In order to ensure proper coverage for phones, tablets, and standard screens across various widths, it is essential to implement the

As I delve into my project focused on responsive design and media queries, I have been studying resources like Aaron Gustavson's book, Adaptive Web Design, and Ben Frain's Responsive Web Design with HTML5 and CSS3, along with various online sourc ...

htmlcssresponsive-designmedia-queries

Enable divs to be interactively chosen

I have created two selectable divs that function like buttons. By using the left and right arrow keys, I am able to select one of the divs with this code: document.addEventListener("keydown", keyDownDocument, false); function keyDownDocument(e) { var k ...

javascripthtmlcss

Customize the User Agent Stylesheet to improve text readability and accessibility

I am trying to make a simple, standalone page with menus that populate the text box (the one with "Left 1"). The text in the box is way to small on mobile and on desktop computers. https://i.sstatic.net/PX3tB.png I am trying to make this text b ...

htmlcssinline

Unusual problem detected with scrolling fixed div upwards

I have encountered a peculiar issue while attempting to fix a div containing other nested divs. My goal is to have the .menu div remain visible and fixed at the top of the page while scrolling, hiding the .slideshow_head div. However, despite fixing the . ...

javascriptcsshtml

Unlocking new perspectives with a click

Currently exploring Angular development, I have encountered a question here but couldn't find the solution I was looking for. I am seeking suggestions and ideas on how to approach this issue. Essentially, my HTML includes buttons like the ones shown ...

htmlcssangulartypescript

The background color appears to be fixed in place even after attempting to switch it to

I've been using a plugin for my camera functionality and I need to set the background color to transparent in order to display it properly. However, when I close the camera preview, the background remains transparent which is causing an issue. Is the ...

htmlcsscordovaionic-frameworkionic2

Show submenu upon hovering and make sure it remains visible

Is there a way to keep a submenu displayed and the background color changed even after moving the mouse away from the menu item onto the submenu? This is my HTML: <div class="shoplink"><a>Online Shop</a></div> <div id="shop-men ...

jquerycss

Sticky header and a sidebar gallery with consistently sized thumbnails

Hello everyone, I'm stepping into the world of HTML and CSS with my first question. As a beginner, I find myself facing a challenge that seems to be beyond my current skill level. Here's the scenario: I want to create a webpage with a fixed left ...

htmlcssfixednavbar

Failure to apply Bootstrap Stylesheet

On certain pages, I have included Bootstrap. On one particular page, I have an alert styled with Bootstrap. This is how it's defined: $('#wrongPasswordDiv').html('<br/><div class="alert alert-danger" id="wrongPWAlert" role= ...

htmlcsstwitter-bootstrapbootstrap-4

Adding / Deleting a Row in a sequence of floated divs

I have a group of div elements arranged side by side with the float:left style as shown below: <div id="container"> <div id=0" style="float:left">> Stuff </div> <div id=1" style="float:left">> Stuff </div> < ...

javascriptjqueryhtmlcssdom

Looping through Jquery mouse over and mouse out events

I'm a beginner with jquery and I stumbled upon this piece of code that changes the background of a div when you hover over it and revert to the original color on mouse out: (document).ready(function(){ $(".t8").mouseover(function(){ ...

jquerycsshtmlfor-loop

Loading screen for specific content within the current WordPress theme

I am trying to display a preloader only in the 'content' div, but it ends up hiding the entire page. The structure of the site is as follows: Title Menu Content (where I want the preloader) Footer I'm having trouble figuring out where exa ...

javascriptjquerycsswordpresspreloader

Utilize Flexbox's column direction to ensure that all flex items within the same column have uniform height

Having trouble creating a responsive web page. Here are the specifics: Sharing my HTML and CSS code below: - <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA ...

htmlcssflexboxresponsive-designmedia-queries