Background- all-in-one with background-size

For technical support and bug reports for all editions of CSS HTML Validator, including htmlval for Linux and Mac.
User avatar
RSteinwand
Rank VI - Professional
Posts: 596
Joined: Mon Jun 09, 2008 2:12 pm
Location: Fargo, ND

Background- all-in-one with background-size

Post by RSteinwand »

Hi Albert,

I'm having trouble with this one.

This code works, but CSE complains about dupe declarations.

Code: Select all

#slider{background:url(/images/dc_slider_bg.jpg) 0 0 no-repeat;background-size:cover}
The "background" shorthand property and the "background-size" property have both been used. The "background" shorthand property already defines the following properties: "background-attachment", "background-color", "background-image", "background-origin", "background-position", "background-repeat", and "background-size". Therefore, the "background-size" property has been defined twice. Use of the "background" shorthand property is encouraged over the other background properties because it's more widely supported and it's quicker to type.
This validates, but does not work (it's the only place I figure where to put it):

Code: Select all

#slider{background:url(/images/dc_slider_bg.jpg cover) 0 0 no-repeat}
Adding quotes doesn't help either.

Code: Select all

#slider{background:url('/images/dc_slider_bg.jpg' cover) 0 0 no-repeat}
The quoted value for "url" contains the extra text "cover" between the quoted value and the right parenthesis. This extra text is not allowed (but optional whitespace is allowed).
Looks like it needs to be two separate statements based on what I'm finding to work.

This isn't much help: http://www.w3schools.com/css/css3_backgrounds.asp
Rick
User avatar
Albert Wiersch
Site Admin
Posts: 3785
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX

Re: Background- all-in-one with background-size

Post by Albert Wiersch »

Hi Rick,

Don't forget you can hit F1 in CSE HTML Validator for a help page. If you press F1 near "background:" then CSE HTML Validator should bring up this help page on the background CSS property:
https://www.htmlvalidator.com/help.php?m=1&h=background

Since "cover" is a <bg-size> value then something like this should work:

Code: Select all

#slider{background:url(/images/dc_slider_bg.jpg) 0 0 / cover no-repeat}
I didn't test it but does that work? Notice the placement of the "cover" value with is after the <position> value and just before a "/" character.

But now CSE HTML Validator will let you know you are using a CSS3 value which may be less compatible (but I would think by now that the vast majority of browsers should support it).
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
User avatar
RSteinwand
Rank VI - Professional
Posts: 596
Joined: Mon Jun 09, 2008 2:12 pm
Location: Fargo, ND

Re: Background- all-in-one with background-size

Post by RSteinwand »

I wasn't aware of the F1 key.

Yes, this syntax works (thanks):

Code: Select all

#slider{background:url(/images/dc_slider_bg.jpg) 0 0/cover}
However this also validates, I suspect because of the missing quotes:

Code: Select all

#slider{background:url(/images/dc_slider_bg.jpg cover) 0 0 no-repeat}
Rick
User avatar
Albert Wiersch
Site Admin
Posts: 3785
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX

Re: Background- all-in-one with background-size

Post by Albert Wiersch »

RSteinwand wrote:Yes, this syntax works (thanks):

Code: Select all

#slider{background:url(/images/dc_slider_bg.jpg) 0 0/cover}
You're welcome. Glad it works.
RSteinwand wrote:However this also validates, I suspect because of the missing quotes:

Code: Select all

#slider{background:url(/images/dc_slider_bg.jpg cover) 0 0 no-repeat}
The link checker should find that that ("/images/dc_slider_bg.jpg cover") is a bad link. I'll also make a note to check (for a future update) whether it might make sense to generate some type of validator message about it.
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
User avatar
RSteinwand
Rank VI - Professional
Posts: 596
Joined: Mon Jun 09, 2008 2:12 pm
Location: Fargo, ND

Re: Background- all-in-one with background-size

Post by RSteinwand »

I would think it should fail without quotes, since there's a space in it and no extension.
Rick
User avatar
Albert Wiersch
Site Admin
Posts: 3785
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX

Re: Background- all-in-one with background-size

Post by Albert Wiersch »

I've improved this for the next minor update. It should now generate an error message for the space character:
Using the legacy (no quotation marks) <url> syntax means that parenthesis, whitespace characters, single quotes, and double quotes in a URL must be escaped with a backslash. This message is displayed for the first character in a URL that must be escaped but isn't.

And as a "bonus" message you should also get this message if the URL isn't in single or double quotes:
It is recommended that URLs be enclosed in single or double quotes. Unquoted URLs are technically allowed, but only for legacy reasons. This message is displayed up to 3 times.
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
User avatar
RSteinwand
Rank VI - Professional
Posts: 596
Joined: Mon Jun 09, 2008 2:12 pm
Location: Fargo, ND

Re: Background- all-in-one with background-size

Post by RSteinwand »

Thanks Albert!
Rick
User avatar
Albert Wiersch
Site Admin
Posts: 3785
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX

Re: Background- all-in-one with background-size

Post by Albert Wiersch »

RSteinwand wrote:Thanks Albert!
You're welcome! As usual, if you have any other suggestions or encounter any other issues like this then please let me know. I'm always looking for new ways to improve the program so that it points out as many issues as possible.
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial