[Fix] Background image CSS not working fixes

How to fix background images not appearing in CSS. A common issue is images not loading when we are messing around with relative paths. The post will go over various fixes for that!

🔔 Table of contents

Introduction.

One of the frustrating with setting background images in CSS is that the image does not turn up.

So many times something this simple should of been pretty straight forward even when the HTML and CSS seems like it is correct.

In this post, we will go over several ways (or a checklist) on how to fix this type of issue.

How do we use background image?

As the name suggests, the background-image property, sets a background image (or multiple images) for an element.

When you have multiple images, you will need to consider the stacking order. The first image defined will be the top image.

Fix 1 - check that the image path is correct

The most likely issue with your background image not working is that the image path that was provided is not correct. Below are a few tips you can go through to check for issues:

👉 Check your relative path

Commonly, the background image is not appearing is because the relative path provided did not resolve.

  • / - This means the root directory
  • ../ - This means going up on directory
  • ./ - This means the current directory
  • ../../ - This means going up two directories

Relative paths depend on the location of the CSS styling. As an example, lets say we include CSS in our HTML file (index.html) like so:

We also have a bunch of pictures in the following main folder:

  • pictureA.png
  • images/pictureY.png

To get pictureA.png , we can use the following command. Notice that since pictureA.png is in the same directory, we can just specify the filename or ./pictureA.png

To get pictureY.png , since it is located in the images folder, we can use the following command.

As another more complex example, lets say we have the following folder structure with the CSS file as an external file that is referenced by the HTML index.html file.

So our HTML looks something like this:

And the folder structure looks like the following:

  • styles/main.css
  • styles/sample-images/pictureX.png

Now, since our main.css is in the styles folder, if we want to load pictureA.png then we need to move up one directory level using ../ . The code is as follows:

Additionally, in this case, since pictureA.png is also in the root folder, the following code will work using / .

If we want to acess pictureX.png , then its a matter of going down one level to the sample-images folder.

If we need to load pictureY.png , then we will need to go up one directory and then down to the images folder like so:

👉 Using quotes

Earlier versions of CSS and browser implementations, there has been confusion on whether we need quotes or no quotes. According to the official CSS spec, quotes are optional ( https://www.w3.org/TR/CSS2/syndata.html#value-def-uri )

So the following code will be the same.

One exception is that if your image file name contains special characters. In this case, url needs to be URI-escaped (where “(” = %28, “)” = %29, etc.)

👉 Check your image file name and extension

One issue that can trip some people up is that the file names are case insensitive depending on the server that you are hosting the files. With most Unix based servers (Linux, or OSX), the files are case sensitive. While on Windows servers, they are not.

In the example below, lets say we have image called pinkish.png , the second line will not load the image due to the all caps PNG extension

Additionally for newer extensions such as WebP , browser support common across the latest versions. It will have no or partial support on older browsers. For example Safari 14.0 – 15.6 has full support of WebP, but requires macOS 11 Big Sur or later.

IE 11 or below will have no support for WebP . WebP images displays as a broken image icon in Microsoft Edge v18 in Application Guard mode even when an alternative image source format is available.

👉 Tip: Use absolute paths

While theres benefits of using relative paths for urls() with background-image , my preference would be to use absolute paths.

👉 Tip: Use Live Server in VS Code!

If you are coding with VS Code, then using the Live Server extension is a must. When you are just coding locally without a local server running, references to images can get a bit confusing.

For example, if you use the root directory / - this could mean your actual C:/ root folder instead of the current folder!

Fix 2 - check the height and width of the element

Lets say we have the following div element with class of .card and we want to set the background-image as below:

In the above case, the div does not have any content so you will not see anything. The div will have a width of 0 and height of 0 . To fix this, we need to explictily set the width and height:

Fix 3 - check the syntax is correct

The syntax for creating background images is pretty straight forward. You can apply multiple images to be layted on top of each other. As an example, the below, we have a catfront.png to be under a gradient image.

We can also set the background-image using the background shorthand property:

The background shorthand covers the following CSS properties:

  • background-attachment
  • background-clip
  • background-color
  • background-image
  • background-origin
  • background-position
  • background-repeat
  • background-size

In some instances, when using the shorthand, it would seem like the background-image is not working correctly. This might be due to other properies and not the background image itself.

For example, take the following:

This will not work, however if we try to break it down to the explicit CSS properties, it will:

The reason why its not working with the shorthand background property is because we need to specify the position and size as well. So it had nothing to do with our background-image property.

Fix 4 - check other styles for overrides

There could be instances where our background image is not working correctly. Consider the following css:

Now if the catfront.png does not exist, this would mean our card element would not have a background image. The above is not immediately obvious that we are having conflicting background-image set on our card class since we are mixing shorthand vs explicity CSS.

Browser support and bugs

Background-image is generally supported across most browsers so there is not a concern or any weird browser specific hacks or prefixs we need to cater for.

However we should be careful on the type of image we are using. If we are using WebP , Safari 14.0 – 15.6 has full support of WebP, but requires macOS 11 Big Sur or later.

Additionally, there is no support for WebP on IE. As for Edge browsers, WebP images displays as a broken image icon in Microsoft Edge v18 in Application Guard mode even when an alternative image source format is available.

In this post we went over four possible fixes for when a background-image CSS property is not working. This can be due to using incorrect relative paths, the width and height not being specifified explicitly, incorrect use of the syntax, there are other styles that is overriding the background-image style.

Additionally the type of image format needs to be checked - WebP not supported on older browsers like Safari version 16-15.6, IE 11 or lower.

👋 About the Author

G'day! I am Huy a software engineer based in Australia. I have been creating design-centered software for the last 10 years both professionally and as a passion.

My aim to share what I have learnt with you! (and to help me remember 😅)

Follow along on Twitter , GitHub and YouTube

👉 See Also 👈

  • CSS important Not Working - and Fixes
  • [Fixed] CSS :after element is not working
  • [5 FIXES] for CSS z-index not working - Updated for 2023
  • CSS pulse animation on hover
  • Creating gradient animation with CSS
  • CSS case insensitive attribute selector

How to fix CSS background-image not working | HTML/CSS

Working with background images in CSS can be tricky. Because even if you set it in the code, there are other factors that may prevent the background-image from showing up on the page.

To help with that, here are four ways to fix your background-image not working, using HTML and CSS:

1. Check that your CSS file is linked correctly in your HTML file.

In order for your CSS styles to get loaded in your website, you need to add a  <link>  tag in your HTML file. This tag should be located inside the  <head></head>  tags, and should look something like this:

How can you tell if your CSS file is loaded correctly or not?

One sign is if you load your website and the background is white, all the text looks like Times New Roman font, and there are no colors or other styles.

You can also check your browser’s inspector tool by right-clicking anywhere in the page and selecting “Inspect Element” or pressing Ctrl-Shift-I. In the inspector, if you see an error that says  404 not found  for the CSS file, or  The resource... was blocked due to MIME type mismatch , that tells you that there was a problem loading the CSS file.

Error showing: The resource was blocked due to MIME type mismatch

If you see one of these errors and your website looks unstyled, the first thing to check is In the  <link>  tag. Make sure that the  href  attribute is loading the same filename as your actual CSS file, and that the path is correct.

The path needs to be relative to where your HTML file is. If the CSS file is in the same directory as your HTML file, you can set  href  to be  style.css  (or whatever your CSS filename is).

I usually put a forward slash  /  before the path, for example:  href="/style.css" . This will make sure that the path will start at your website root.

You may need this if you have pages in different subfolders that are all loading the same  <head>  code. For example, if you’re using a templated CMS (content management system) where there is shared code.

2. Make sure the image path is set correctly in the background-image url.

Once you have made sure that your CSS file is linked correctly, also check that the image itself is set correctly. Again, you will want to open your code inspector in the browser to check.

How to tell if the background-image is loaded correctly or not?

If the background image doesn’t seem to be loading, and you see a 404 error in the inspector for the image, that’s a good indicator that there’s an issue with the image itself.

Error showing CSS file 404-ing

If this is happening, double-check that the image filename matches the actual file, and that the path in the  background-image: url()  is going to the correct location.

The location of the image file needs to be relative to the location of the CSS file itself, not your website root. So if your CSS file is in a subfolder, the path may need to be different than if the CSS file was in your root.

To help explain this, let’s say you have a website file structure like this:

This website contains the  index.html  file in the project root, a  css  folder that contains the  style.css  file, and an  img  folder that contains the image  cat-pic-1.jpg .

In your CSS styles, if you want to load  cat-pic-1.jpg  as a background image, the  file path  needs to:

  • Go up one level out of the  css  folder,
  • Navigate into the  img  folder,
  • Then load the image file itself.

The  background-image  property in the CSS file should look like this:  background-image: url('../img/cat-pic-1.jpg') .

The  ../  symbols mean that you will go up one level in the file structure.

You can do the same thing by setting:  background-image: url('/img/cat-pic-1.jpg') .

This approach uses the forward slash ( / ) to start from the website root, then going into the  img  folder to load the image file.

So whether you navigate up through parent folders or start at the website root, don’t forget to utilize your code inspector to test and check if the image is loading or giving you a 404 error.

3. Explicitly set the element’s width and/or height.

If the image isn’t showing up, but you aren’t getting any 404 errors, go into the code inspector and check the element itself.

If there is no HTML content in the element, it might have zero width or height (or both!). This means that even though the background image is technically loaded correctly, the element itself is essentially invisible if it’s  0px  in size.

Code inspector showing image has 0 pixels in height

Check out the above example showing a website and the code inspector. If you hover over the  .card__image  element on the right pane, a label will appear over the element on the left pane, telling you that it has  354px  width and  0px  height.

That  0px  height means the element won’t be visible.

To fix it, explicitly set the height of the  .card__image  element to  height: 120px . If the element might have text content of varying length, you can set it to  min-height: 120px  instead, so it will be a minimum of  120px  tall but can be taller if the text content needs more space.

Card showing the background image correctly now

4. Make sure you are using correct syntax in CSS background properties.

One last thing you can check is if you are using the correct syntax for the background CSS properties.

Here are some common ones you might be using, along with possible values:

  • background-color: #000000;
  • background-image: url("/landscape1.jpg");
  • background-position: center;
  • background-repeat: no-repeat;
  • background-size: cover;

You can also use the shorthand  background  property that lets you combine all those different values in one style rule:

If you are using this shorthand property with a lot of values, make sure that the syntax is correct. The order of the different background properties shouldn’t matter, but there is one tricky pitfall if you are setting  background-size .

The  background-size  value can only be used if it  immediately follows  the  background-position  value, with a forward slash ( / ) between them. In our example it is written like this:  center/cover , where  center  is the  background-position  and  cover  is the  background-size .

You can use the  background-position  value by itself, but if you try to use just  cover  by itself, the CSS rule will be invalid and  none  of the background properties will work at all.

If that happens, you will be able to see the invalid rule in the code inspector like this:

Error showing invalid CSS rule

I'm making a course that will teach you how to build a real-world responsive website from a Figma design!

Looks like no one’s replied in a while. To start the conversation again, simply ask a new question.

AnthonyDrake098

CSS: Background not showing up iPhone or iPad but works on iMac ( Safari )

I've got a full width hero background that is working properly on every browser we tested except for Safari on iPhone and iPad. It does work on iMac Safari . On iPhone and iPad it doesn't appear. Here's the code:

padding: 0;

height: 600px;

background-image: url('../images/heroFullScreen.jpg');

background-attachment: fixed;

background-position: center;

background-repeat: no-repeat;

background-size: cover;

You can view the site here: sanitonplastic.ca to recreate the problem if you've got one of the devices.

Really hope someone can help, we're supposed to be going live tomorrow.

iPad Pro 10.5-inch, Wi-Fi, Cellular

Posted on Jan 15, 2021 4:59 AM

Similar questions

  • Safari not rendering images in Canvas Learning Management System When I use Canvas, very often embedded images do not render. They look like this: When they should look like this: In Chrome, there's no problem. The images render just fine. The problem is that many of my students use Safari (and are using the latest version of Safari). The folks at Canvas said to disable the "Prevent cross-site tracking" preference (Privacy). And then clear the Safari Cache. This works...but you have to clear the cache constantly...and that's a pain. The weird part—I'm having this issue using an Apple-created Canvas Commons course. But I've seen it happen in other Canvas courses that I've been part of. Anyone know how to get Safari (13.1.2) to play nice with Canvas? 3061 2
  • google meet video background not working :( I using a safari version 14.1.2 and when I want to change background it keep saying that this browser does not support. What can I do :( 2292 1
  • How to improve looks of Safari? Safari is so blahh looking. Is there any was to change the background and make it more interesting. Chrome has so many background pics to chose from to make it more eye appealing. Roy 118 1

Loading page content

Page content loaded

VikingOSX

Jan 17, 2021 6:30 AM in response to AnthonyDrake098

You may need to invoke the CSS3 @media wrapper for the CSS that you have shown, in order for it to view properly on iPhone and iPads, or via an HTML link reference.

DEV Community

DEV Community

Tobias Röder

Posted on Jan 8, 2020 • Updated on Jun 21, 2023 • Originally published at blog.tobias-roeder.de

iPhone Safari – fixed background image

In this blog post i will explain how to make your background image fixed in the safari browser on an iphone.

In this Codepen example you'll find a solution how to make the background image fixed in the Safari browser on an iPhone only with CSS.

Shortly explained: for the background image we'll be using an <img> , fixing it with the help of postition: fixed and to ensure to be behind the default level we'll set z-index: -1 . With the help of top: 0 , right: 0 , bottom: 0 and left: 0 we say the image thanks to the postition: fixed that it has to be full screen. For more legacy support I will not use the new inset: 0 . To make sure that the image will be the full background, we need so set the with and the height to 100% .For that it is required to use display: block because the <img> is not a block element by nature. Last but not least we set the object-fit: cover to get the typical unstretched full size background image.

Top comments (0)

pic

Templates let you quickly answer FAQs or store snippets for re-use.

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink .

Hide child comments as well

For further actions, you may consider blocking this person and/or reporting abuse

rudransh61 profile image

NEED CONTRIBUTORS 🙏

Rudransh Bhardwaj - Feb 18

pixelgig profile image

Building a Simple Weather App with HTML, CSS, JavaScript & OpenWeather Api

Gaurav Chaudhary - Feb 7

devluc profile image

Best Websites to Find Free Tailwind CSS Templates

Devluc - Feb 14

taheralam profile image

Best 20 CSS Libraries for Developers and Designers [2024]

Tahera Alam - Feb 16

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Position Is Everything

CSS Background Image Not Working: How to Resolve and Avoid Bugs

  • Recent Posts

Melvin Nolan

  • PHP Array_shift: Learn to Plug-Out the First Array Element - February 29, 2024
  • PHP in_array: An Exciting Journey Around a Vital Inbuilt Function - February 29, 2024
  • PHP Directories: Get Familiar With PHP Project Directories - February 29, 2024

This post may contain affiliate links. If you make a purchase through links on our site, we may earn a commission.

Not working background image in css

However, these problems are not necessarily due to coding mistakes. Even if your code is correct, many other factors can prevent a website’s background image from appearing on a page. Here are some ways to fix the problem of background-image not working.

JUMP TO TOPIC

Make Sure Your CSS File Is Properly Embedded in Your HTML File

Set the path of the image correctly to the background image url, use accurate syntax in css background images properties, explicitly set the height and width of background images, fix css background images not working issue with background-attachment property, – preload background-images, – use the object fit and the img tag together, – responsive images, – inline background images, how to fix css background cover image not working.

The CSS file must be linked to the HTML file for the background images to be displayed or loaded correctly on the website. Furthermore, you must include the link tag in the HTML file to fix a problem such as a background-image URL not working. The link tag should always be something like this  <link rel=”stylesheet” href=”text/style.css”> inside the <head> tag.

If the CSS file is not properly linke d to the HTML file, the background would be white and not show any style or color as soon as the website loads. To diagnose this error, you can check with the inspector element by right-clicking on the inspector tool page of your browser. If you see a 404 not found or resource error due to a MIME type mismatch, it means that your CSS file is not loaded correctly.

If you face such types of errors, check the <link> tag first. Make sure the href attribute is loading the same file as the actual CSS file. Also, make sure that the file’s path is correct and relative to the HTML file. If the HTML and CSS files are in the same directory, you can set href as style.css. The forward slash is usually put before the path. Such as href = “/style..css”.

This will confirm that the path will start from the root of the website . If your pages are in different subfolders and you want to load them all with <head> code, then you have to take special care to put forward-slash put. Furthermore, if the CSS background image is not loading, try this code to solve the issue.

If the CSS background-image is not working, then there are several reasons for this. It often happens that you are not setting the path of the background image correctly, due to which your website background-image not working CSS.

If you are specifying the background image of your website in the body of the CSS style sheet and still the background of your website is showing white, then instead of just typing the name of the image in the body such as body {background: url(‘background_image.jpeg’);}. You should have to upload the full path of the background image like this:

body{background:url(‘http://www.backgroundimage.com/pw-content/uploads/home/background_image.jpeg);}.

This will solve the issue of CSS background-image not working.

It is important to use correct syntax to set the background-images perfectly. Even a small mistake in your syntax can cause problems with the display of the background-image. These are the most commonly used syntax with background-image:

  • background-image:     url(“images/background_image.jpg”);
  • background-color:       #000002;
  • background-repeat:    no-repeat;
  • background-position: center;
  • background-size:        cover;
  • background-size:        10px 20p;
  • background-image:     linear-gradient (white, black);

Instead of setting these properties separately, you can use the shorthand feature . With this feature, you combine all the different values ​​into one style, such as:

background:    no-repeat: #center/cover url(“/images/background_image.jpg”)       #0000;

When using the shorthand feature, the syntax must be perfect. It doesn’t matter if you set the background features in a different order. You can customize the features. However, changing the background size can be a daunting task.

The background-size feature is used only when it immediately follows the background-position feature with a forward slash {/}. For example, there are center or cover features, where the cover indicates the size of the background and the center suggests the background’s position .

You can use the background-position feature separately . However, if you only use the cover feature and do not use the background-position feature with it, the CSS file will create an error. Due to which the error of generating invalid code will also appear in the rest of the background features.

If you are not getting a 404 error, but the background image is not showing , then you should check the element entirely in the code inspector . If there is no HTML content in the element, its height or width is zero, or both are set to zero, meaning that the background image of your website is technically loaded correctly but is hidden because its element is 0px.

0px height means that the element will not be visible like background-image etc. To fix this type of problem, you set the height of the image element to 120px and width 300px. You can set the min-height to 125px if you want to display text content along with the image.

How to set background-image width and height?

Example 1: Auto Set

Example 2: Set manually

The background-attachment feature is used to scroll or fix the background image in CSS because the scroll is its default value. This property has the following values.

Local: In this value, the background images are scrolled along with the content.

Fix: Using this value fixes the background image with the page.

Scroll: The background image is scrolled along with the page using this value.

Syntax: background-attachment: local | fix | scroll |initial

Overcome the Issue of CSS Background-Image Not Working by Speeding up the Background Images

Background images don’t work or load in CSS is a common problem . One way to overcome this problem is to speed up the background images . Background images are commonly used as featured images or sliders. It often takes time for these images to load, leading to problems such as images not loading or not working.

However, the easiest way to overcome these problems is to increase your website’s background image speed. The following methods are handy for speeding up background images.

With pre-loading, background-images from your fold are already loaded. Under this method, the priority value of the background-image is set. In which the browser is commanded to download background-images on top priorities .

Object Fit is a new CSS property . This property is used with IMG tags without resizing the background-image. Due to the use of this property, the background-image is uploaded quickly and its quality remains intact.

You can deliver responsive images by adding size and srcset to normal images .

Suppose the background image of your website is in an external CSS file, inline that image with the HTML file . This way, the browser will download the image directly from the HTML, and the browser will not have to wait to download the image from the CSS file. As a result, loading of background-image will speed up, and the problem of css background-image not working will be solved.

You can fix background cover image not working issue by using this code

Consequently, it is crucial to address all the following points in order to set the background images in CSS perfectly:

Css background image not working

  • Use correct syntax of CSS and HTML code
  • Speed up background-images
  • Set path of images correctly
  • Clearly fix the height and width of background-images

As you know, images play a vital role in making our website attractive . If you find your website’s CSS background-image not working, background-image URL not working, background-image CSS not working, and CSS background-images are not loading. You can follow the techniques we have mentioned in this article. All of these techniques are extremely useful and efficient.

Related posts:

  • CSS List Style: The Best Guide On How to Style CSS Lists
  • CSS Border: Easy Guide to Create and Style Borders For Your Website
  • CSS Border Collapse: Tips To Create the Best Table Borders
  • Hide Scrollbar CSS: How To Hide Scrollbar From HTML Element
  • CSS Animation Easing: What It Is and How To Use It In 7 Examples
  • CSS Button: The Best Button Styling Guide for Developers
  • CSS Rounded Corners: How To Create Rounded Corners in CSS
  • CSS White-space: More Control Over the Whitespace in Your Text
  • CSS Center Button: Easy Methods of Centering the Buttons
  • CSS Z-index: A Guide on How To Create and Control Stacked Elements
  • CSS Wildcard: Complete Tutorial on Use of Wildcards in CSS
  • CSS Search Box: Maximize the Ease for Your Website Users

Leave a Comment Cancel reply

Save my name, email, and website in this browser for the next time I comment.

Safari CSS Reference

  • Table of Contents
  • Jump To…
  • Download Sample Code

Supported CSS Properties

Safari and WebKit implement a large subset of the CSS 2.1 Specification defined by the World Wide Web Consortium (W3C), along with portions of the CSS 3 Specification. This reference describes the supported properties and provides Safari availability information. If a property is not listed here, it is not implemented by Safari and WebKit.

The CSS attributes in this article are divided according to the groups defined by the W3C CSS Specification:

Box Model describes properties specific to the bounding boxes of block elements, including borders, padding, and margins. Additional box-related properties specific to tables are described separately in Tables .

Visual Formatting Model describes properties that set the position and size of block elements.

Visual Effects describes properties that adjust the visual presentation of block elements, including overflow behavior, resizing behavior, visibility, animation, transforms, and transitions.

Generated Content, Automatic Numbering, and Lists describes properties that allow you to change the contents of an element, create automatically numbered sections and headings, and manipulate the style of list elements.

Paged Media describes properties associated with controlling appearance attributes specific to printed versions of a webpage, such as page break behavior.

Colors and Backgrounds describes properties that control the background of block-level elements and the color of text content within elements.

Fonts describes properties specific to font selection for text within an element. It also describes properties used in downloadable font definitions.

Text describes properties specific to text styles, spacing, and automatic scrolling (marquee).

Tables describes layout and styling properties specific to table elements.

User Interface describes properties that relate to user interface elements in the browser, such as scrolling text areas, scroll bars, and so on. It also describes properties that are outside the scope of the page content, such as cursor style and the callout shown when you touch and hold a touch target such as a link in iOS.

Defines a variety of border properties for an element within one declaration.

The width of the border on all sides.

The style of the border.

The color of the border.

border-color

Border-style, border-width, border-bottom.

Defines a variety of properties for an element’s bottom border within one declaration.

The width of the bottom border.

border-bottom-color

border-bottom-style

border-bottom-width

Defines the color of the bottom border of an element.

The color of the bottom border.

The value of the element’s color property.

The default color of a hyperlink that is being clicked.

The color that surrounds a UI element, such as a text field, that has focus.

The default color of a hyperlink that has been visited.

The default text color.

activeborder , activecaption , appworkspace , aqua , background , black , blue , buttonface , buttonhighlight , buttonshadow , buttontext , captiontext , fuchsia , gray , graytext , green , grey , highlight , highlighttext , inactiveborder , inactivecaption , inactivecaptiontext , infobackground , infotext , lime , maroon , match , menu , menutext , navy , olive , orange , purple , red , scrollbar , silver , teal , threeddarkshadow , threedface , threedhighlight , threedlightshadow , threedshadow , transparent , white , window , windowframe , windowtext , yellow

Changes to this property can be animated.

Defines the style of the bottom border of an element.

The style of the bottom border.

dashed , dotted , double , groove , hidden , inset , none , outset , ridge , solid

Defines the width of the bottom border of an element.

Length units

medium , thick , thin

Defines the color of an element’s border.

border-left-color

Border-right-color, border-top-color, border-left.

Defines a variety of properties for an element’s left border within one declaration.

The width of the left border.

The style of the left border.

The color of the left border.

border-left-style

border-left-width

Defines the color of the left border of an element.

Defines the style of the left border of an element.

Defines the width of the left border of an element.

border-right

Defines a variety of properties for an element’s right border within one declaration.

The width of the right border.

The style of the right border.

The color of the right border.

border-right-style

border-right-width

Defines the color of the right border of an element.

Defines the style of the right border of an element.

Defines the width of the right border of an element.

Defines the style for an element’s border.

border-top-style

Defines a variety of properties for an element’s top border within one declaration.

The width of the top border.

The style of the top border.

The color of the top border.

border-top-width

Defines the color of the top border of an element.

Defines the style of the top border of an element.

Defines the width of the top border of an element.

Defines the width of the border of an element.

The width of the border.

Defines the width of an element’s outer-element margin.

The width of the margin.

The width of the top margin.

The width of the right margin.

The width of the bottom margin.

The width of the left margin.

margin-bottom

Margin-left, margin-right.

Defines the width of the bottom margin of an element.

Numbers as a percentage, length units

Defines the width of the left margin of an element.

Defines the width of the right margin of an element.

Defines the width of the top margin of an element.

Defines the width of an element’s inner-element padding.

The width of the padding on all sides.

The width of the top padding.

The width of the right padding.

The width of the bottom padding.

The width of the left padding.

padding-bottom

Padding-left, padding-right, padding-top.

Defines the width of the bottom padding of an element.

Defines the width of the left padding of an element.

Defines the width of the right padding of an element.

Defines the width of the top padding of an element.

-webkit-border-bottom-left-radius

Specifies that the bottom-left corner of a box be rounded with the specified radius.

The radius of the rounded corner.

The horizontal radius of the rounded corner.

The vertical radius of the rounded corner.

-webkit-border-bottom-right-radius

-webkit-border-radius

-webkit-border-top-left-radius

-webkit-border-top-right-radius

This property takes either one or two parameters. If one parameter is specified, it controls both the horizontal and vertical radii of a quarter ellipse. If two parameters are specified, the first parameter normally represents the horizontal radius and the second parameter represents the remaining radius. (Compatibility note: In Internet Explorer, if writing-mode is specified as tb-rl , these parameters are reversed.)

Available in Safari 3.0 and later.

Available in iOS 1.0 and later.

Experimental CSS 3.

Specifies that the bottom-right corner of a box be rounded with the specified radius.

-webkit-border-image

Specifies an image as the border for a box.

The method of which to produce the image. This could be expressed by the url() syntax, which contains the URI of the image (in the same fashion as the background-image property), or by a procedural function such as gradient() .

The distance from the top edge of the image.

The distance from the right edge of the image.

The distance from the bottom edge of the image.

The distance from the left edge of the image.

The horizontal repeat style.

The vertical repeat style.

The image is tiled.

The image is stretched before it is tiled to prevent partial tiles

The image is stretched to the size of the border.

The specified image is cut into nine pieces according to the length values given. This property applies to any box, including inline elements, but does not apply to table cells if the border-collapse property is set to collapse .

The first five fields are required. The four inset values that follow method represent distances from the top, right, bottom, and left edges of the image. If no unit is specified, they represent actual pixels in the original image (assuming a raster image). If a unit (such as px ) is specified, they represent CSS units (which may or may not be the same thing). The values may also be specified as a percentage of the size of the image as well as vector coordinates.

After the required fields, you can optionally include a border width field or fields, preceded by a slash ( / ). You can specify all four border widths individually or specify a single value that applies to all four fields. If these values are not the same size as the inset values, the slices of the original image are scaled to fit. Note that border-width constants like thick are not valid.

Finally, you can specify a repeat style in each direction. These values affect how the top, bottom, left, right, and center portions are altered to fit the required dimensions, and can be any of the following: repeat (tiled), stretch , or round (the round style is like tiling, except that it stretches all nine pieces slightly so that there is no partial tile at the end).

Specifies that the corners of a box be rounded with the specified radius.

The radius of the rounded corners.

The horizontal radius of the rounded corners.

The vertical radius of the rounded corners.

Specifies that the top-left corner of a box be rounded with the specified radius.

Specifies that the top-right corner of a box be rounded with the specified radius.

-webkit-box-sizing

Specifies that the size of a box be measured according to either its content (default) or its total size including borders.

The model by which the size of the box is measured.

The box size includes borders in addition to content.

The box size only includes content.

Available in iOS 1.1 and later. (Called box-sizing in iOS 1.0.)

-webkit-box-shadow

Applies a drop shadow effect to the border box of an object.

The horizontal offset of the shadow.

The vertical offset of the shadow.

The blur radius of the shadow.

The color of the shadow.

The box has no shadow.

This property takes four parameters. The first two are horizontal and vertical offsets—down for horizontal, and to the right for vertical. The third value is a blur radius. The fourth value is the color of the shadow. Changes to this property can be animated.

Available in iOS 2.0 and later.

-webkit-margin-bottom-collapse

Specifies the behavior of an element’s bottom margin if it is adjacent to an element with a margin. Elements can maintain their respective margins or share a single margin between them.

The behavior of the bottom margin.

Two adjacent margins are collapsed into a single margin.

The element’s margin is discarded if it is adjacent to another element with a margin.

Two adjacent margins remain separate.

This property allows you to emulate the behavior of some browsers in quirks mode where table cell margins are collapsed into the borders of vertically adjacent cells.

Available in Safari 3.0 and later. (Called -khtml-margin-bottom-collapse in Safari 2.0.)

Apple extension.

-webkit-margin-collapse

Specifies the behavior of an element’s vertical margins if it is adjacent to an element with a margin. Elements can maintain their respective margins or share a single margin between them.

The behavior of the vertical margins.

-webkit-margin-top-collapse

Available in Safari 3.0 and later. (Called -khtml-magin-collapse in Safari 2.0.)

-webkit-margin-start

Provides the width of the starting margin.

The width of the starting margin.

The margin is automatically determined.

If the writing direction is left-to-right, this value overrides margin-left . If the writing direction is right-to-left, this value overrides margin-right .

Available in Safari 3.0 and later. (Called it is -khtml-margin-start in Safari 2.0.)

Specifies the behavior of an element’s top margin if it is adjacent to an element with a margin. Elements can maintain their respective margins or share a single margin between them.

The behavior of the top margin.

Available in Safari 3.0 and later. (Called -khtml-magin-top-collapse in Safari 2.0.)

-webkit-padding-start

Provides the width of the starting padding.

The width of the starting padding.

If the writing direction is left-to-right, this value overrides padding-left . If the writing direction is right-to-left, this value overrides padding-right .

Available in Safari 3.0 and later. (Called -khtml-padding-start in Safari 2.0.)

Visual Formatting Model

Defines the location of the bottom edge of the element for both absolute and relative positioning.

The location of the bottom edge of the element.

Available in Safari 1.0 and later.

Available in iOS 1.0 and later

Defines the sides of an element on which no floating elements are permitted to be displayed.

The sides of the element on which no floating elements can be displayed.

both , left , none , right

Sets the direction in which text is rendered.

The direction of the text.

Defines how an element is displayed onscreen.

The display mode.

The element is displayed in its own flex box.

The element is displayed inline in its own flex box.

block , compact , inline , inline-block , inline-table , list-item , none , run-in , table , table-caption , table-cell , table-column , table-column-group , table-footer-group , table-header-group , table-row , table-row-group

Indicates whether an element (often a graphic) should be pulled out of the normal text flow and floated toward a particular horizontal position within its enclosing element.

The position for the element to be floated toward.

center , left , none , right

If float is set to none , the element is displayed inline wherever it appears within the text flow.

If float is set to a positional value, the element is laid out as it normally would be within the flow, then is moved as far as possible towards the specified position. If an element is vertically positioned such that it would run into another element that is part of the same float, it stops at the point of contact. Thus, in effect, this causes these floating elements to stack up at the specified horizontal position.

If the width of a series of stacked floating elements exceeds the width of the enclosing box, further elements wrap to a new row. You can force an element to always wrap to a new row by setting the clear property on that element. (See clear for more information.)

Note:  With the exception of elements with intrinsic width (an img tag, for example), you should always set the width property on floating elements to ensure consistent behavior across browsers.

Defines the height of a structural element.

The height of the element.

Numbers as a percentage, length units, nonnegative values

auto , intrinsic , min-intrinsic

This property has no effect on inline elements. Changes to this property can be animated.

Defines the location of the left edge of the element for both absolute and relative positioning.

The location of the left edge of the element.

line-height

Defines the vertical interline spacing of lines within the text of an element.

The interline spacing value.

Floating-point numbers, Numbers as a percentage, length units

Defines the maximum height of a structural element.

The maximum height.

intrinsic , min-intrinsic , none

Available in Safari 1.3 and later. (Positioned elements require Safari 2.0.2 and later.)

Defines the maximum width of a structural element.

The maximum width.

Available in Safari 1.0 and later. (Positioned elements require Safari 2.0.2 and later.)

Defines the minimum height of a structural element.

The minimum height.

intrinsic , min-intrinsic

Defines the minimum width of a structural element.

The minimum width.

Specifies how to blend the offscreen rendering into the current composite rendering.

The opacity.

Floating-point numbers

Available in Safari 2.0 and later. (Called -khtml-opacity in Safari 1.1.)

Specifies how an element is positioned.

The positioning model for the element.

absolute , fixed , relative , static

This property affects the behavior of positional properties such as float and left / right / top / bottom .

Defines the location of the right edge of the element for both absolute and relative positioning.

The location of the right edge of the element.

Defines the location of the top edge of the element for both absolute and relative positioning.

The location of the top edge of the element.

unicode-bidi

Defines the Unicode bidirectional text algorithm used to display text.

The bidirectional text algorithm.

bidi-override , embed , normal

This property must be set if you intend to change the direction of inline text.

vertical-align

Defines the vertical alignment of elements inline with text.

The vertical alignment of the text.

The center of the element is aligned with the baseline of the text.

baseline , bottom , middle , sub , super , text-bottom , text-top , top

Defines the width of a structural element.

The width of the element.

Overrides the default stacking order of elements.

The z-index of the element.

Formally, the z-index property sets the height of an element above the drawing plane (in pixels). Its primary use is to override the default stacking order of elements.

By default, elements are stacked in the order in which they appear within the DOM tree; later elements appear on top of earlier elements. If you set a z-index value for an element, that element is displayed on top of all elements with a lower z-index value, underneath all elements with a higher z-index value, and stacked according to its position in the DOM tree relative to all elements with the same z-index value.

By default, elements are assigned a z-index value of auto , which is equivalent to zero ( 0 ).

Specifies the magnification of an element.

The magnification of the element.

Numbers as a percentage, floating-point numbers, nonnegative values

A zoom level of 100% .

Specifies that an element not scale at all when a zoom is applied.

Children of elements with the zoom property do not inherit the property, but they are affected by it. The default value of the zoom property is normal , which is equivalent to a percentage value of 100% or a floating-point value of 1.0 .

Available in Safari 4.0 and later.

Visual Effects

Defines the clipping region.

The clipping region.

A clipping region is the portion of an element in which its content will be rendered. The default is to render content within the entire element size.

If you do not use the constant auto , the value should be in the form of a supported shape (currently limited to rect ).

For example, clip: rect(3px 20px 5px 8px); defines a rectangular clip region with a top edge 3 pixels from the top of the element, a right edge 20 pixels from the left edge of the element, a bottom border 5 pixels from the top of the element, and a left border 8 pixels from the left edge of the element.

Defines the treatment of content that overflows the element’s bounds.

The overflow behavior.

This property allows you to choose the behavior for content that overflows the element bounds, such as providing scroll bars or hiding the overflowed content.

Defines the treatment of content that overflows the element’s horizontal bounds.

The content behaves like a marquee.

auto , hidden , overlay , scroll , visible

Stable CSS 3.

Defines the treatment of content that overflows the element’s vertical bounds.

Specifies the directions in which resizing is allowed.

The directions in which resizing is allowed.

auto , both , horizontal , none , vertical

Defines whether or not an element is visible onscreen.

collapse , hidden , visible

Note that elements made invisible using this property still take up space onscreen. Changes to this property can be animated.

Available in Safari 1.0 and later. (All supported except for collapse .)

-webkit-animation

Combines common animation properties into a single property.

See -webkit-animation-name for details.

See -webkit-animation-duration for details.

See -webkit-animation-timing-function for details.

See -webkit-animation-delay for details.

See -webkit-animation-iteration-count for details.

See -webkit-animation-direction for details.

Refer to the respective property for details of each property and default values.

-webkit-animation-delay

Defines when an animation starts.

The time to begin executing an animation after it is applied. If 0 , the animation executes as soon as it is applied. If positive, it specifies an offset from the moment the animation is applied, and the animation delays execution by that offset. If negative, the animation executes the moment the property changes but appears to begin at the specified negative offset—that is, begins part-way through the animation. Nonzero values must specify a unit: s for seconds, ms for milliseconds. The default value is 0 .

The animation begins immediately.

This property allows an animation to begin execution some time after it is applied.

-webkit-animation-direction

Determines whether the animation should play in reverse on alternate iterations.

The direction to play. The default value is normal .

Play each iteration of the animation in the forward direction.

Play even-numbered iterations of the animation in the forward direction and odd-numbered iterations in the reverse direction.

When an animation is played in reverse, the timing functions are also reversed. For example, when played in reverse, an ease-in animation appears as an ease-out animation.

-webkit-animation-duration

Specifies the length of time that an animation takes to complete one iteration.

The duration of an animation. If 0 , the animation iteration is immediate (there is no animation). A negative value is treated as 0 . The default value is 0 .

-webkit-animation-fill-mode

Specifies whether the effects of an animation are apparent before the animation starts and after it ends.

The animation’s fill mode. Can be none , forwards , backwards , or both .

The effects of the animation are apparent only during the defined duration of the animation.

The animation’s final keyframe continues to apply after the final iteration of the animation completes.

The animation’s initial keyframe is applied as soon as the animation style is applied to an element. This only affects animations that have a nonzero value for -webkit-animation-delay .

The animation’s initial keyframe is applied as soon as the animation style is applied to an element, and the animation’s final keyframe continues to apply after the final iteration of the animation completes. The initial keyframe only affects animations that have a nonzero value for -webkit-animation-delay .

By default, an animation starts as soon as the style that describes the animation is applied to an element; however, the -webkit-animation-delay property can delay the start of an animation. Specifying a value of backwards or both for this property overrides the -webkit-animation-delay property and tells the animation to start as soon as the style is applied.

Available in Safari 5.0 and later.

Available in iOS 4.0 and later.

-webkit-animation-iteration-count

Specifies the number of times an animation iterates.

The number of iterations. If 1 , the animation plays from beginning to end once. A value of infinite causes the animation to repeat forever. Noninteger values cause the animation to end partway through an iteration. Negative values are invalid. The default value is 1 .

Repeats the animation forever.

This property is often used with a -webkit-animation-direction property set to alternate , which causes the animation to play in reverse on alternate iterations.

-webkit-animation-name

Specifies the name of an animation.

The name of the animation.

The name is used to select the -webkit-keyframe at-rule that provides the keyframes and property values for the animation. If the name does not match any -webkit-keyframe at-rule, there are no properties to be animated and the animation is not executed. See @-webkit-keyframes for a description of this rule.

If "none" , no animation is executed even if there is a -webkit-keyframe at-rule with that name. Setting this property to "none" explicitly disables animations.

The default value is "" .

-webkit-animation-play-state

Determines whether the animation is running or paused.

The state of an animation.

Plays the animation.

Pauses the animation.

A running animation can be paused by setting this property to paused . Set this property to running to continue running a paused animation. A paused animation continues to display the current value of the animation in a static state. When a paused animation is resumed, it restarts from the current value, not from the beginning of the animation.

The default value is running .

-webkit-animation-timing-function

Defines how an animation progresses between keyframes.

The function to apply between keyframes. The default value is ease .

Equivalent to cubic-bezier(0.25, 0.1, 0.25, 1.0) .

Equivalent to cubic-bezier(0.0, 0.0, 1.0, 1.0) .

Equivalent to cubic-bezier(0.42, 0, 1.0, 1.0) .

Equivalent to cubic-bezier(0, 0, 0.58, 1.0) .

Equivalent to cubic-bezier(0.42, 0, 0.58, 1.0) .

Equivalent to steps(1, end) .

Available in iOS 5.0 and later.

Available in Safari 5.1 and later.

Equivalent to steps(1, start) .

The timing function is specified using a cubic Bezier curve. Use the constants to specify preset points of the curve or the cubic-bezier function to specify your own points. See cubic-bezier for a description of the parameters for this function. See Timing Functions for additional information about timing functions.

This property applies between keyframes, not over the entire animation. For example, for an ease-in-out timing function, an animation eases in at the start of the keyframe and eases out at the end of the keyframe. A -webkit-animation-timing-function defined within a keyframe block applies to that keyframe; otherwise, the timing function specified for the animation is used.

-webkit-backface-visibility

Determines whether or not a transformed element is visible when it is not facing the screen.

Determines whether or not the back face of a transformed element is visible. The default value is visible .

The element is always visible even when it is not facing the screen.

The element is invisible if it is not facing the screen.

Use this property to specify whether or not an element is visible when it is not facing the screen. For example, if the identity transform is set, an element faces the screen; otherwise, it may face away from the screen. For example, applying a rotation about y of 180 degrees in the absence of any other transforms causes an element to face away from the screen.

This property is useful when you place two elements back to back, as you would do to create a playing card. Without this property, the front and back elements could at times switch places during an animation to flip the card. Another example is creating a box out of six elements whose outside and inside faces can be viewed. This is useful when creating the backdrop for a three-dimensional stage.

-webkit-box-reflect

Defines a reflection of a border box.

The position of the reflection relative to the border box. Can be above , below , left , or right .

The distance of the reflection from the edge of the border box, in length units or as a percentage. The default value is 0 .

Used to overlay the reflection. If omitted, the reflection has no mask.

The reflection appears above the border box.

The reflection appears below the border box.

The reflection appears to the left of the border box.

The reflection appears to the right of the border box.

Reflections will update automatically as the source changes. Specifying a reflection has the effect of creating a stacking context (like opacity, masks, and transforms). The reflection is non-interactive, and as such, it has no effect on hit testing. The reflection has no effect on layout, other than being part of a container’s overflow; it is similar to -webkit-box-shadow in this respect.

-webkit-mask

Defines a variety of mask properties within one declaration.

See -webkit-mask-attachment for details.

See -webkit-mask-clip for details.

See -webkit-mask-origin for details.

See -webkit-mask-image for details.

See -webkit-mask-repeat for details.

See -webkit-mask-composite for details.

As with most composite properties, all arguments are optional.

-webkit-mask-attachment

Defines the scrolling or fixed nature of the image mask.

If fixed , the mask does not move when the page scrolls; if scroll , the image moves when the page scrolls.

-webkit-mask-box-image

Defines an image to be used as a mask for a border box.

The file path of the image.

The uri field contains the URI for the image. The four inset values that follow represent distances from the top, right, bottom, and left edges of the image. If no unit is specified, they represent actual pixels in the original image (assuming a raster image). If a unit (such as px ) is specified, they represent CSS units (which may or may not be the same thing). The values may also be specified as a percentage of the size of the image.

You can specify a repeat style in each direction. These values affect how the top, bottom, left, right, and center portions are altered to fit the required dimensions, and can be any of the following: repeat (tiled), stretch , or round (the round style is like tiling, except that it stretches all nine pieces slightly so that there is no partial tile at the end).

-webkit-mask-clip

Specifies whether the mask should extend into the border of a box.

The clipping behavior of the mask.

-webkit-mask-composite

Sets a compositing style for a mask.

The compositing style of the mask.

The default value is border , which means that the background extends into the border area. Specifying a value of padding limits the background so that it extends only into the padding area enclosed by the border.

-webkit-mask-image

Defines an image to be used as a mask for an element.

-webkit-mask-origin

Determines where the -webkit-mask-position property is anchored.

The origin of the mask position.

The mask’s position is anchored at the upper-left corner of the element’s border.

The mask’s position is anchored at the upper-left corner of the element’s content.

The mask’s position is anchored at the upper-left corner of the element’s padding.

-webkit-mask-position

Defines the position of a mask.

The x-coordinate of the position of the mask.

The y-coordinate of the position of the mask.

Position can be specified in terms of pixels or percentages of the viewport width or using the keywords top , left , center , right , or bottom .

Changes to this property can be animated in Safari 4.0 and later.

-webkit-mask-position-x

Defines the x-coordinate of the position of a mask.

-webkit-mask-position-y

Defines the y-coordinate of the position of a mask.

-webkit-mask-repeat

Defines the repeating qualities of a mask.

The repeating behavior of the mask.

This property controls whether tiling of an element’s mask should occur in the x direction, the y direction, both, or neither.

-webkit-mask-size

Overrides the size of a mask.

The width and height of the mask.

The width of the mask.

The height of the mask.

-webkit-perspective

Gives depth to a scene, causing elements farther away from the viewer to appear smaller.

The distance in pixels from the viewer’s position to the z= 0 plane. The default value is none .

No perspective transform is applied.

The -webkit-perspective property applies the same transform as the perspective(<number>) transform function, except that it applies only to the children of the element, not to the transform on the element itself.

The use of this property with any value other than none establishes a stacking context. It also establishes a containing block (somewhat similar to position:relative ), just as the -webkit-transform property does.

This transform alters the effect of other transforms. In the absence of additional transforms, this transform has no effect.

Available in Safari 4.0.3 and later running on Mac OS X v10.6 and later.

-webkit-perspective-origin

Sets the origin of the -webkit-perspective property described in -webkit-perspective .

The x-origin as a percentage or value.

The y-origin as a percentage or value.

Sets the y-origin to the top of the element’s border box.

Sets the x or y origin to the center of the element’s border box. If this constant appears before left or right , specifies the y-origin. If it appears after top or bottom , specifies the x-origin. If appears alone, centers both the x and y origin.

Sets the y-origin to the bottom of the element’s border box.

Sets the x-origin to the left side of the border box.

Sets the x-origin to the right side of the border box.

This property effectively sets the x and y position at which the viewer appears to be looking at the children of the element. The default value is 50% for both x and y coordinates.

-webkit-transform

Specifies transformations to be applied to an element.

A transform function. Possible values are described in Transform Functions

No transforms are applied.

The -webkit-transform property specifies a list of transformations, separated by whitespace, to be applied to an element, such as rotation, scaling, and so on.

The set of transform functions is similar to those allowed by SVG, although there are additional functions to support 3D transformations. If multiple transforms are applied, the transform is generated by performing a matrix concatenation of each transform in the list.

For example, the following div element is rotated 45 degrees clockwise:

If a list of transforms is provided, the net effect is as if each transform is specified separately in the order provided.

The default value is none (no transforms applied).

Available in Safari 3.1 and later.

-webkit-transform-origin

Sets the origin for the -webkit-transform property.

The x origin as a percentage or value.

The y origin as a percentage or value.

Sets the y origin to the top of the element’s border box.

Sets the x or y origin to the center of the element’s border box. If this constant appears before left or right , specifies the y origin. If this constant appears after top or bottom , specifies the x origin. If it appears alone, centers both the x and y origin.

Sets the y origin to the bottom of the element’s border box.

Sets the x origin to the left side of the border box.

Sets the x origin to the right side of the border box.

The -webkit-transform-origin property establishes the origin for transforms applied to an element with respect to its border box.

The values may be expressed either as a CSS length unit or as a percentage of the element’s size. For example, a value of 50% 50% causes transformations to occur around the element’s center. Changing the origin to 100% 0% causes transformation to occur around the top-right corner of the element. The default value is 50% 50% .

If only one argument is provided, it is interpreted as the horizontal position.

Available in Safari 3.1 and Later.

-webkit-transform-origin-x

The x coordinate of the origin for transforms applied to an element with respect to its border box.

-webkit-transform-origin-y

The y coordinate of the origin for transforms applied to an element with respect to its border box.

-webkit-transform-origin-z

The z coordinate of the origin for transforms applied to an element with respect to its border box.

The z origin as a percentage or value.

-webkit-transform-style

Defines how nested, transformed elements are rendered in 3D space.

The transform style.

Flatten all children of this element into the 2D plane.

Preserve the 3D perspective.

If -webkit-transform-style is flat , all children of this element are rendered flattened into the 2D plane of the element. Therefore, rotating the element about the x or y axes causes children positioned at positive or negative z positions to appear on the element’s plane, rather than in front of or behind it. If -webkit-transform-style is preserve-3d , this flattening is not performed, so children maintain their position in 3D space.

This flattening takes place at each element, so preserving a hierarchy of elements in 3D space requires that each ancestor in the hierarchy have the value preserve-3d for -webkit-transform-style . But -webkit-transform-style affects only an element’s children; the leaf nodes in a hierarchy do not require the preserve-3d style.

The default value is flat .

-webkit-transition

Combines -webkit-transition-delay , -webkit-transition-duration , -webkit-transition-property , and -webkit-transition-timing-function into a single property.

See -webkit-transition-property for details.

See -webkit-transition-duration for details.

See -webkit-transition-timing-function for details.

See -webkit-transition-delay for details.

-webkit-transition-delay

Defines when the transition starts.

The time to begin executing a transition after it is applied. If 0 , the transition executes as soon as the property changes. Otherwise, the value specifies an offset from the moment the property changes, and the transition delays execution by that offset. If the value is negative, the transition executes the moment the property changes but appears to begin at the specified negative offset—that is, begins part-way through the transition. Nonzero values must specify a unit: s for seconds, ms for milliseconds. Negative values are invalid. The default value is 0 .

The transition begins immediately.

-webkit-transition-duration

Defines how long the transition from the old value to the new value should take.

If 0 , the transition is immediate (there is no animation). A negative value is treated as 0 . Nonzero values must specify a unit: s for seconds, ms for milliseconds. Negative values are invalid. The default value is 0 .

-webkit-transition-property

Specifies the name of the CSS property to which the transition is applied.

The name of the transition. You can list multiple properties. Property names should be bare, unquoted names. The default value is all .

No transition specified.

The default transition name.

-webkit-transition-timing-function

Specifies how the intermediate values used during a transition are calculated.

The timing function.

This property allows for a transition to change speed over its duration. These effects, commonly called easing functions, are mathematical functions that produce a smooth curve.

The timing function is specified using a cubic Bezier curve. Use the constants to specify preset points of the curve or the cubic-bezier function to specify your own points. See cubic-bezier for a description of the parameters for this function.

The timing function takes as its input the current elapsed percentage of the transition duration and outputs a percentage that determines how close the transition is to its goal state.

The default value is ease .

Generated Content, Automatic Numbering, and Lists

Embeds an arbitrary batch of content (such as a movie or a specially formatted string) to be embedded alongside a CSS property.

The file path of the content.

A function that procedurally generates an image, such as gradient .

counter-increment

Increments a numerical counter for auto-numbering.

The name of the counter.

The amount by which the counter increments.

This property is commonly used in conjunction with the content property to create section numbers or other auto-numbered containers. For example:

This snippet inserts “Section 1:” at the beginning of the first heading, “Section 2:” at the beginning of the second, and so on.

Important:  You must use the counter-reset property to reset the counter on some element that appears in the DOM tree prior to the first element where you use counter-increment on that counter. Otherwise, this call increments a nonexistent counter and all of your sections will be numbered "Section 1”.

counter-reset

Resets a counter used by the counter-increment property and the counter function.

For an example of this property, see the documentation for counter-increment .

Defines the display style for a list and list elements.

The type of list.

The position of the list marker.

The file path of an image to be used as the list marker.

list-style-image

List-style-position, list-style-type.

Defines an image to use as the opening symbol of a list element.

Defines the position of the marker of a list element.

The position of the marker.

The marker is placed inside the text. Wrapping text appears directly below the marker.

The text of the list item is indented from the marker.

Defines the type of marker of a list element.

The type of marker.

armenian , circle , cjk-ideographic , decimal , decimal-leading-zero , disc , georgian , hebrew , hiragana , hiragana-iroha , katakana , katakana-iroha , lower-alpha , lower-greek , lower-latin , lower-roman , none , square , upper-alpha , upper-latin , upper-roman

Paged Media

Defines the minimum number of lines in a paragraph that must be left at the bottom of a page (before a page break).

The number of lines.

Available in Safari 1.3 and later.

page-break-after

Defines the page break behavior following an element's definition.

The page break behavior.

always , auto , avoid , left , right

Safari 1.2 and later.

page-break-before

Defines the page break behavior before an element's definition.

page-break-inside

Defines the page break behavior within an element.

auto , avoid

Safari 1.3 and later.

Defines the minimum number of lines in a paragraph that must be left at the top of a page (after a page break).

Colors and Backgrounds

Defines a variety of background properties within one declaration.

The background color.

The file path of the background image.

The repeating behavior of the background image.

If fixed , the background image does not move when the page scrolls; if scroll , the image moves when the page scrolls.

The position of the background image.

background-attachment

Defines the scrolling or fixed nature of the page background.

scroll , fixed

background-color

Defines an element’s background color.

background-image

Defines an element’s background image.

background-position

Defines the origin of a background image.

The x-coordinate of the origin of the background image.

The y-coordinate of the origin of the background image.

background-position-x

Defines the x-coordinate of the origin of a background image.

background-position-y

Defines the y-coordinate of the origin of a background image.

background-repeat

Defines the repeating qualities of the background image.

This property controls whether tiling of an element’s background image should occur in the x direction, the y direction, both, or neither.

Defines the color of the text of an element.

The color. Colors can be specified with a constants, an RGB value, or a hexadecimal value.

-webkit-background-clip

Specifies the clipping behavior of the background of a box.

The clipping behavior of the background.

The background clips to the border of the box.

The background clips to the content of the box.

The background clips to the padding of the box.

The background clips to the text of the box.

-webkit-background-composite

Sets a compositing style for background images and colors.

The compositing style of the background.

Under development.

-webkit-background-origin

Determines where the background-position property is anchored.

The origin of the background position.

The background position can be anchored at the upper-left corner of the border, the upper-left corner of the padding area inside the border, or the upper-left corner of the content inside the padding area.

-webkit-background-size

Overrides the size of a background image.

The width and height of the background image.

The width of the background image.

The height of the background image.

Defines a variety of properties for an element’s text font within one declaration.

The style of the font.

The variant of the font.

The weight, or boldness, of the font.

The size of the font.

The distance between lines.

The family of the font.

The user interface style to replicate.

The style of the text of a standard size UI element, such as a button.

The style of the text of a miniature size UI element, such as a button.

The style of the text of a small size UI element, such as a button.

caption , icon , menu , message-box , small-caption , status-bar

In addition to declaring a font style explicitly by characteristics, you can also specify a user interface style using constants such as caption . These constants represent the default font style for the specified user interface element, and as such, their specific values are dependent on the browser, the operating system, and user configuration options.

Using the font property resets all related font properties that are not explicitly specified.

font-family

Defines a list of fonts for element styling or downloadable font definitions.

The font-family property has two different meanings, depending on context.

In the context of an element style, it defines a font to use for text within an element. Because not all computers have the same fonts available, this property to specify multiple acceptable fonts in descending order of preference. In addition, constants such as serif or sans-serif provide generic fallback fonts in case a browser does not have any of the listed fonts available.

In the context of a downloadable font definition, this property provides the name of the font that the font definition describes. In this form, you may specify multiple family names for the font, but generally only a single family name (optionally, specify that it should match against generic font names like serif ).

For more information about downloadable font definitions, see @font-face .

Available in Safari 1.0 and later. Downloadable fonts supported in Safari 3.1 and later.

Defines the font size for the text in an element or in a downloadable font definition.

large , larger , medium , small , smaller , -webkit-xxx-large , x-large , x-small , xx-large , xx-small

Changes to this property can be animated in Safari 4.0 and later. For more information about downloadable font definitions, see @font-face .

Defines the font style for the text in an element or a downloadable font definition.

italic , normal , oblique

font-variant

Defines special font properties for the text in an element or for a downloadable font definition.

normal , small-caps

Available in Safari 1.0 and later. (The value small-caps is not supported.) Downloadable fonts supported in Safari 3.1 and later.

font-weight

Defines the font weight of the text in an element or for a downloadable font definition.

Integers, nonnegative values

100 , 200 , 300 , 400 , 500 , 600 , 700 , 800 , 900 , bold , bolder , lighter , normal

Provides a list of locations for a downloadable font definition.

This property takes a comma-delimited list of font locations which may be locally installed font family names or HTTP URLs.

unicode-range

Describes the unicode characters supported by a downloadable font definition.

The range of supported characters.

The first character in a range of supported characters.

The last character in a range of supported characters.

This property takes a comma-delimited list of Unicode character ranges. There are two supported formats: singleton ranges and pair ranges.

A singleton range is in the form U+xxxx where xxxx is a hexadecimal number. For example, the range U+2150 indicates that Unicode character 0x2150 is supported. Leading zeroes may be omitted, so U+300 is the same as U+0300 . The following snippet shows a singleton range: unicode-range: U+2150;

A singleton range may also contain wildcards in the form of a question-mark character. For example, U+36?? contains two wildcard characters. This range matches any value in which the first two digits are 36 , without regard to the value for the last two digits. The following snippet shows a wildcard range that represents the Unicode characters 0x2160 through 0x216f, inclusive: unicode-range: U+216?;

A pair range is in the form of a hyphen-separated pair of hexadecimal values in the form U+xxxx-yyyy where xxxx and yyyy are hexadecimal numbers. For example, the following pair range represents the Unicode characters from 0x2164 through 0x2156 , inclusive: unicode-range: U+2154-2156;

letter-spacing

Defines the horizontal interletter spacing of characters within the text of an element.

The size of the character spacing.

Defines the alignment for inline content within an element.

The inline content alignment.

Text is aligned to the default alignment.

Text is aligned to the center.

Text is aligned to the left.

Text is aligned to the right.

center , end , justify , left , right , start

text-decoration

Defines special styling for text, such as underlines.

The type of decoration.

line-through , none , overline , underline

text-indent

Defines the amount to indent the first line of text within an element.

The amount to indent.

text-overflow

Controls overflow of non-wrapped text.

clip , ellipsis

This property controls how Safari displays text that exceeds the specified width of the enclosing paragraph if the overflow property is set to hidden and style rules or nowrap tags prevent the text from wrapping (or if a single word is too long to fit by itself).

text-shadow

Defines a variety of properties for an element’s text shadow within one declaration.

Although the CSS specification allows it, multiple shadows are not supported in Safari. Changes to this property can be animated.

text-transform

Defines a capitalization transformation for the text in an element.

The capitalization transformation.

capitalize , lowercase , none , uppercase

white-space

Defines how whitespace characters in an element are handled onscreen.

The policy for displaying whitespace in the element.

normal , nowrap , pre , pre-line , pre-wrap

Specifies the level of strictness when breaking lines of text in ideographic languages such as Chinese, Japanese, and Korean.

The level of strictness.

break-all , break-word , normal

word-spacing

Defines the amount of space between words.

The amount of spacing.

Specifies word-splitting behavior for wrapping lines that are too long for the enclosing box and contain no spaces.

The wrapping behavior.

break-word , normal

Available in Safari 2.0 and later.

-webkit-marquee

Defines properties for showing content as though displayed on an electronic marquee sign.

The direction of the marquee.

The distance the marquee moves in each increment

The number of times the marquee repeats.

The style of the marquee’s motion.

The scroll or slide speed of the marquee.

-webkit-marquee-direction

-webkit-marquee-increment, -webkit-marquee-repetition, -webkit-marquee-speed, -webkit-marquee-style.

Available in Safari 3.0 and later. (Called -khtml-marquee in Safari 2.0.)

Available in iOS 1.0.

Specifies the direction of motion for a marquee box.

The marquee moves from bottom to top.

The marquee moves in the default direction.

The marquee moves from right to left.

The marquee moves from left to right.

The marquee moves from top to bottom.

Available in Safari 3.0 and later. (Called -khtml-marquee-direction in Safari 2.0.)

Defines the distance the marquee moves in each increment.

The marquee moves a large amount in each increment.

The marquee moves a medium amount in each increment.

The marquee moves a small amount in each increment.

Available in Safari 3.0 and later. (Called -khtml-marquee-increment in Safari 2.0.)

Specifies the number of times a marquee box repeats (or infinite ).

The marquee repeats infinitely.

Available in Safari 3.0 and later. (Called -khtml-marquee-repetition in Safari 2.0.)

Defines the scroll or slide speed of a marquee box.

The distance term in the speed equation.

The time term in the speed equation.

Integers, time units, nonnegative values

The marquee moves at a fast speed.

The marquee moves at a normal speed.

The marquee moves at a slow speed.

This property can either take one speed parameter ( slow , for example) or a measure of distance and a measure of time separated by a slash ( / ).

Available in Safari 3.0 and later. (Called -khtml-marquee-speed in Safari 2.0.)

Specifies the style of marquee motion.

The marquee shifts back and forth.

The marquee does not move.

The marquee loops in its specified direction.

The marquee moves in its specified direction, but stops either when the entirety of its content has been displayed or the content reaches the opposite border of its box, whichever comes second.

The values scroll and slide both cause the content to start outside the box and move into the box, but if the value scroll is specified, the content stops moving once the last content is visible. The value alternate causes the content to shift back and forth within the box in the specified direction.

Available in Safari 3.0 and later. (Called -khtml-marquee-style in Safari 2.0.)

-webkit-text-fill-color

Specifies a fill color for text.

The fill color. Colors can be specified with a constant, an RGB value, or a hexadecimal value.

If not specified, the color specified by the color property is used. -webkit-fill-color is commonly used in combination with -webkit-text-stroke . Changes to this property can be animated.

-webkit-text-security

Specifies the shape to use in place of letters in a password input field.

The shape to use in place of letters.

A circle shape.

A disc shape.

No shape is used.

A square shape.

-webkit-text-size-adjust

Specifies a size adjustment for displaying text content in Safari on iOS.

The size at which to display text in Safari on iOS.

The text size is automatically adjusted for Safari on iOS.

The text size is not adjusted.

Apple extension—Safari on iOS only.

-webkit-text-stroke

Specifies the width and color of the outline (stroke) of text.

The width of the stroke.

The color of the stroke.

-webkit-text-stroke-color

-webkit-text-stroke-width.

This property is commonly used in combination with -webkit-text-fill-color .

Specifies the color of the outline (stroke) of text.

If not specified, the color specified by the color property is used. -webkit-text-stroke-color is commonly used in combination with -webkit-text-fill-color . Changes to this property can be animated.

Specifies the width for the text outline.

A medium stroke.

A thick stroke.

A thin stroke.

This property is significant only in combination with -webkit-text-stroke-color .

-webkit-line-break

Specifies line-breaking rules for CJK (Chinese, Japanese, and Korean) text.

The line-breaking setting.

The line breaks after white space.

A standard line-breaking rule.

Available in Safari 3.0 and later. (Called -khtml-line-break in Safari 2.0.)

-webkit-appearance

Changes the appearance of buttons and other controls to resemble native controls.

The appearance of the control.

The indicator that appears in a password field when Caps Lock is active.

Available in iOS 2.0 and later

button , button-bevel , caret , checkbox , default-button , listbox , listitem , media-fullscreen-button , media-mute-button , media-play-button , media-seek-back-button , media-seek-forward-button , media-slider , media-sliderthumb , menulist , menulist-button , menulist-text , menulist-textfield , none , push-button , radio , searchfield , searchfield-cancel-button , searchfield-decoration , searchfield-results-button , searchfield-results-decoration , slider-horizontal , slider-vertical , sliderthumb-horizontal , sliderthumb-vertical , square-button , textarea , textfield

The following constants are unsupported in Safari 4.0:

scrollbarbutton-down , scrollbarbutton-left , scrollbarbutton-right , scrollbarbutton-up , scrollbargripper-horizontal , scrollbargripper-vertical , scrollbarthumb-horizontal , scrollbarthumb-vertical , scrollbartrack-horizontal , scrollbartrack-vertical

-webkit-nbsp-mode

Defines the behavior of nonbreaking spaces within text.

The behavior of nonbreaking spaces.

Nonbreaking spaces are treated as usual.

Nonbreaking spaces are treated like standard spaces.

Available in Safari 3.0 and later. (Called -khtml-nbsp-mode in Safari 2.0.)

-webkit-rtl-ordering

Overrides ordering defaults for right-to-left content.

The order of the content.

Raw content is in mixed order (requiring a bidirectional renderer).

Right-to-left content is encoded in reverse order so an entire line of text can be rendered from left to right in a unidirectional fashion.

The distinction between these two character orders is normally handled automatically as a side effect of character set. This property allows you to override whether the browser should treat the content as being in logical or visual order.

-webkit-user-drag

Specifies that an entire element should be draggable instead of its contents.

The dragging behavior of the element.

The default dragging behavior is used.

The entire element is draggable instead of its contents.

The element cannot be dragged at all.

Available in Safari 3.0 and later. (Called -khtml-user-drag in Safari 2.0.)

-webkit-user-modify

Determines whether a user can edit the content of an element.

The user modification policy.

The content is read-only.

The content can be read and written.

The content can be read and written, but any rich formatting of pasted text is lost.

This is closely related to the contentEditable attribute.

Available in Safari 3.0 and later. (Called -khtml-user-modify in Safari 2.0.)

-webkit-user-select

Determines whether a user can select the content of an element.

The user selection policy.

The user can select content in the element.

The user cannot select any content.

The user can select text in the element.

Available in Safari 3.0 and later. (Called -khtml-user-select in Safari 2.0.)

Available in iOS 3.0 and later.

border-collapse

Defines the model of an element’s border.

collapse , separate

border-spacing

Defines the spacing between an element’s border and the content within.

The size of the spacing.

-webkit-border-horizontal-spacing

-webkit-border-vertical-spacing, caption-side.

Defines the side of a table on which its caption appears.

The side of the table that will have a caption.

bottom , left , right , top

empty-cells

Sets the border behavior for cells with no content.

The behavior for cells with no content.

hide , show

table-layout

Specifies whether to use automatic or fixed table layout.

If auto , layout is determined by all cells in the table; if fixed , layout is determined by the first row of content only.

auto , fixed

Automatic table layout, specified by the value auto , is the default table layout behavior. In this mode, the table layout is calculated based on the contents of every cell in every row of the table.

Fixed table layout, specified by the value fixed , is a faster (but more restrictive) layout behavior. In this layout mode, the layout of the table is calculated based only on the first row of tabular content (not including any heading rows). This mode allows the layout to be calculated much earlier in the page load process and greatly simplifies the calculations, but can cause content in later rows to overflow the table’s boundaries.

Defines the spacing between the horizontal portion of an element’s border and the content within.

The amount of horizontal spacing.

Length units, nonnegative values

Equivalent to the horizontal portion of the border-spacing property. Changes to this property can be animated.

Available in Safari 3.0 and later. (Called -khtml-border-horizontal-spacing in Safari 2.0.)

Defines the spacing between the vertical portion of an element’s border and the content within.

The amount of vertical spacing.

Equivalent to the vertical portion of the border-spacing property. Changes to this property can be animated.

Available in Safari 3.0 and later. (Called -khtml-border-vertical-spacing in Safari 2.0.)

-webkit-column-break-after

Determines whether a column break can and should occur after an element in a multicolumn flow layout.

The column break policy.

A column break is always inserted after the element.

A right column break is inserted after the element where appropriate.

Column breaks are avoided after the element.

A left column break is inserted after the element.

A right column break is inserted after the element.

-webkit-column-break-before

Determines whether a column break can and should occur before an element in a multicolumn flow layout.

A column break is always inserted before the element.

A right column break is inserted before the element where appropriate.

Column breaks are avoided before the element.

A left column break is inserted before the element.

A right column break is inserted before the element.

-webkit-column-break-inside

Determines whether a column break should be avoided within the bounds of an element in a multicolumn flow layout.

A right column break is inserted within the element where appropriate.

Column breaks are avoided within the element.

-webkit-column-count

Specifies the number of columns desired in a multicolumn flow.

The number of columns in the multicolumn flow.

The element has one column.

-webkit-column-gap

Specifies the space between columns in a multicolumn flow.

The width of the gap.

Columns in the element have the normal gap width between them.

-webkit-column-rule

Specifies the color, style, and width of the column rule.

The width of the column rule.

The style of the column rule.

The color of the column rule.

-webkit-column-rule-color

-webkit-column-rule-style, -webkit-column-rule-width.

The column rule appears in the middle of the column gap in a multicolumn flow layout.

Specifies the color of the column rule.

Specifies the style of the column rule.

The column rule has a dashed line style.

The column rule has a dotted line style.

The column rule has a double solid line style.

The column rule has a grooved style.

The column rule is hidden.

The column rule has an inset style.

The column rule has no style.

The column rule has an outset style.

The column rule has a ridged style.

The column rule has a solid line style.

Specifies the width of the column rule.

The column rule has a medium width.

The column rule has a thick width.

The column rule has a thin width.

-webkit-column-width

Specifies the width of the column in a multicolumn flow.

The width of the column.

Columns in the element are of normal width.

-webkit-columns

A composite property that specifies the width and number of columns in a multicolumn flow layout.

The width of each column.

The number of columns.

User Interface

Defines the cursor to display onscreen when the pointer is over an element.

The type of cursor.

An open hand cursor indicating the element can be grabbed.

A closed hand cursor indicating the element has been grabbed.

A zoom-in cursor.

A zoom-out cursor.

alias , all-scroll , auto , cell , col-resize , context-menu , copy , crosshair , default , e-resize , ew-resize , hand , help , move , n-resize , ne-resize , nesw-resize , no-drop , none , not-allowed , ns-resize , nw-resize , nwse-resize , pointer , progress , row-resize , s-resize , se-resize , sw-resize , text , vertical-text , w-resize , wait

Although the CSS specification allows it, Safari does not support custom cursors.

Available in Safari 1.2 and later.

Defines a variety of properties for an element’s outline (drawn outside the element’s border) within one declaration.

The color of the outline.

The style of the outline.

The width of the outline.

outline-color

Outline-style, outline-width.

Defines the color of an element’s outline.

outline-offset

Defines the offset of an element’s outline from its border.

The size of the offset.

Defines the style of an element’s outline.

Defines the width of an element's outline.

pointer-events

Defines the parts of an element that responds to pointer events, such as a click, mouse over, or hover.

The parts of the element that respond to pointer events.

The entire element responds to pointer events.

The element does not respond to pointer events.

Providing a value of none does not disable the Inspect Element option that appears when the element is Control-clicked, however the option may return the wrong element.

-webkit-box-align

Specifies the alignment of nested elements within an outer flexible box element.

The alignment of nested elements.

Elements are aligned with the baseline of the box.

Elements are aligned with the center of the box.

Elements are aligned with the end of the box.

Elements are aligned with the start of the box.

Elements are stretched to fill the box.

This property specifies the horizontal alignment if the box direction is vertical, and vice versa. This property applies only to flexible box layouts. For more information about flexible boxes, see http://www.w3.org/TR/css3-layout/ .

Available in Safari 3.0 and later. (Called -khtml-box-align in Safari 1.1 through Safari 2.0.)

-webkit-box-direction

Specifies the direction in which child elements of a flexible box element are laid out.

The layout direction.

Elements are laid out in the default direction.

Elements are laid out in the reverse direction.

This applies only to flexible box layouts. For more information about flexible boxes, see http://www.w3.org/TR/css3-layout/ .

Available in Safari 3.0 and later. (Called -khtml-box-direction in Safari 1.1 through Safari 2.0.)

-webkit-box-flex

Specifies an element’s flexibility.

The flexibility of the element.

Flexible elements can stretch or shrink to fit the size of the bounding box of their parent element. The amount of stretching or shrinkage of an element is determined by its flex value relative to the flex values of other elements within the same parent element.

This property applies only to flexible box layouts. For more information about flexible boxes, see http://www.w3.org/TR/css3-layout/ .

Available in Safari 3.0 and later. (Called -khtml-box-flex in Safari 1.1 through Safari 2.0.)

-webkit-box-flex-group

Specifies groups of dynamically resizing elements that are adjusted to be the same size.

The group number of the flexible element.

During size adjustment of flex boxes, any boxes with the same group number are adjusted to be the same size.

Available in Safari 3.0 and later. (Called -khtml-box-flex-group in Safari 1.1 through Safari 2.0.)

-webkit-box-lines

Specifies whether a flexible box should contain multiple lines of content.

If multiple , the flexible box can contain multiple lines of content; if single , only one line is allowed.

The box can contain multiple lines of content.

The box can contain only one line of content.

Available in Safari 3.0 and later. (Called -khtml-box-lines in Safari 1.1 through Safari 2.0.)

-webkit-box-ordinal-group

Specifies a rough ordering of elements in a flexible box.

The ordinal group number of the element.

Elements with lower ordinal group values are displayed first.

Available in Safari 3.0 and later. (Called -khtml-box-ordinal-group in Safari 1.1 through Safari 2.0.)

-webkit-box-orient

Specifies the layout of elements nested within a flexible box element.

The orientation of elements nested in the flexible box.

Elements are oriented along the box’s axis.

Elements are oriented horizontally.

Elements are oriented along the inline axis.

Elements are oriented vertically.

Available in Safari 3.0 and later. (Called -khtml-box-orient in Safari 1.1 through Safari 2.0.)

-webkit-box-pack

Specifies alignment of child elements within the current element in the direction of orientation.

The alignment of child elements.

Child elements are aligned to the center of the element.

Child elements are aligned to the end of the element.

Child elements are justified with both the start and end of the element.

Child elements are aligned to the start of the element.

For elements whose children are aligned horizontally, a packing value of start indicates left alignment with extra space towards the right side, a value of end indicates right alignment with extra space to the left, a value of center indicates center alignment with extra space split evenly on either side, and a value of justify indicates that the outer elements should be aligned on the left and right, with space added evenly between the elements.

Similarly, for elements whose children are aligned vertically, a value of start indicates that the elements should be aligned to the top, a value of end indicates that the elements should be aligned to the bottom, and so on.

This property is similar to -webkit-box-align , which specifies alignment in the opposite direction from the direction of orientation.

Available in Safari 3.0 and later. (Called -khtml-box-pack in Safari 1.1 through Safari 2.0.)

-webkit-dashboard-region

Specifies the behavior of regions in a Dashboard widget.

No behavior is specified.

This property is described in more detail in Declaring Control Regions in Dashboard Programming Topics .

Available in Safari 3.0 and later. (Called -apple-dashboard-region in Safari 2.0.)

Apple extension—Dashboard only.

-webkit-overflow-scrolling

Specifies whether to use native-style scrolling in an overflow:scroll element.

The style of scrolling.

One finger scrolling without momentum.

Native-style scrolling. Specifying this style has the effect of creating a stacking context (like opacity, masks, and transforms).

The default value is auto .

-webkit-tap-highlight-color

Overrides the highlight color shown when the user taps a link or a JavaScript clickable element in Safari on iOS.

The tapped link color.

This property obeys the alpha value, if specified. If you don’t specify an alpha value, Safari on iOS applies a default alpha value to the color. To disable tap highlighting, set the alpha value to 0 (invisible). If you set the alpha value to 1.0 (opaque), the element is not visible when tapped.

Available in iOS 1.1.1 and later.

-webkit-touch-callout

Disables the default callout shown when you touch and hold a touch target.

The touch callout behavior.

On iOS, when you touch and hold a touch target such as a link, Safari displays a callout containing information about the link. This property allows you to disable that callout.

The current allowable values are none and inherit .

Additional Unsupported Properties

WebKit provides partial support for a number of properties that are not supported for developer use. This list may include:

Properties designed for Apple internal use, such as properties specific to the way Mail and other applications use WebKit.

Properties that are in a very early stage of development and are not really usable yet.

Properties that are used within WebKit itself and cannot be parsed in a CSS file.

Properties that are parsed for historical reasons, but that are not actually used.

Because these properties are unsupported, they are not documented in detail. However, they are listed here so that if you find them in the source code, in test cases, and so on, you will be able to determine their status.

WebKit-Specific Unsupported Properties

-webkit-border-fit

-webkit-font-size-delta

-webkit-highlight

-webkit-line-clamp

-webkit-match-nearest-mail-blockquote-color

-webkit-text-decorations-in-effect

-webkit-transition-repeat-count

Unsupported Properties from the CSS Specification

font-size-adjust —Describes the font aspect ratio to preserve proportionality in the event of font substitution. Unsupported CSS 2 property; removed in CSS 2.1; reintroduced in CSS 3.

font-stretch —Selects a normal, condensed, or extended variant of a font in an element or describes availability of these variants in a font definition. Declared in CSS 2.1/CSS 3.

marker-offset —Sets the offset of a marker (a bullet in a bulleted list, for example). Unsupported CSS 2 property; removed in CSS 2.1.

marks —Sets what type of crop marks to use on paged media. Unsupported CSS 2 property; removed in CSS 2.1.

page —Used for named page support. Unsupported CSS 2 property; removed in CSS 2.1.

quotes —Sets the quotation mark characters used for nested <q> tags.

size —Sets page dimensions for paged media. Unsupported CSS 2 property; removed in CSS 2.1.

speak-header —Sets whether a browser should speak the contents of the corresponding table heading cell before speaking the contents of each cell. Unsupported CSS 2 aural media property. Aural media deprecated in CSS 2.1. Property reintroduced in CSS 3

text-line-through —Composite property describing overstrike color, style, and mode. Declared in CSS 3.

text-line-through-color —Describes color for overstrike. Declared in CSS 3.

text-line-through-mode —Describes the mode for overstrike. Declared in CSS 3.

text-line-through-style —Describes the style for overstrike. Declared in CSS 3.

text-line-through-width —Describes the width for overstrike. Declared in CSS 3.

text-overline —Composite property describing overline color, style, mode, and width(like underline, but above the text). Declared in CSS 3.

text-overline-color —Describes the color of overline (like underline, but above the text). Declared in CSS 3.

text-overline-mode —Describes the mode of overline (like underline, but above the text). Declared in CSS 3.

text-overline-style —Describes the style of overline (like underline, but above the text). Declared in CSS 3.

text-overline-width —Describes the width of overline (like underline, but above the text). Declared in CSS 3.

text-underline —Composite property describing underline color, style, mode, and width. Declared in CSS 3.

text-underline-color —Describes the color of underline. Declared in CSS 3.

text-underline-mode —Describes the mode of underline. Declared in CSS 3.

text-underline-style —Describes the style of underline. Declared in CSS 3.

text-underline-width —Describes the width of underline. Declared in CSS 3.

Unsupported Properties Specific to Other Browsers

scrollbar-3dlight-color —Microsoft Internet Explorer property.

scrollbar-arrow-color —Microsoft Internet Explorer property.

scrollbar-darkshadow-color —Microsoft Internet Explorer property.

scrollbar-face-color —Microsoft Internet Explorer property.

scrollbar-highlight-color —Microsoft Internet Explorer property.

scrollbar-shadow-color —Microsoft Internet Explorer property.

scrollbar-track-color —Microsoft Internet Explorer property.

Copyright © 2016 Apple Inc. All Rights Reserved. Terms of Use | Privacy Policy | Updated: 2016-10-27

Sending feedback…

We’re sorry, an error has occurred..

Please try submitting your feedback later.

Thank you for providing feedback!

Your input helps improve our developer documentation.

How helpful is this document?

How can we improve this document.

* Required information

To submit a product bug or enhancement request, please visit the Bug Reporter page.

Please read Apple's Unsolicited Idea Submission Policy before you send us your feedback.

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › Safari not displaying background colour correctly

  • This topic is empty.
  • Author Posts

' src=

I am hoping this should be a fairly simple fix !

there is an issue in Safari only on the following site:

http://www.3terraces.com

the background colour should be grey (the background of the actual content area is white). This displays correctly in all browsers EXCEPT Safari, which displays it as white. The CSS for the body is as follows:

body { font: 100% Verdana, Arial, Helvetica, sans-serif; margin: 0; /* it’s good practice to zero the margin and padding of the body element to account for differing browser defaults */ padding: 0; text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */ color: #000000; background-color: #CCC;

In theory this should work fine because I have exactly the same code in another site: http://www.ayamonte-apartment.com and this is displaying fine in Safari!.

I have attached the entire CSS if anyone wants to take a look. any suggestions greatly appreciated

' src=

The background color is showing fine for me in Safari.

(Safari 4.0.3, Mac, OS 10.6)

' src=

Seems fine to me to. I’m running Safari 4.0.5 on a Mac.

I managed to find this CSS hack for Safari which did the trick:

# @media screen and (-webkit-min-device-pixel-ratio:0) { #safari { background-color:#CCC } }

  • The forum ‘CSS’ is closed to new topics and replies.

safari background image css not working

IMAGES

  1. Background image not showing in safari

    safari background image css not working

  2. html

    safari background image css not working

  3. safari

    safari background image css not working

  4. How to Fix CSS When It’s Not Working in Safari Browser

    safari background image css not working

  5. CSS Background Image Not Working: Detailed Guide on Troubleshooting

    safari background image css not working

  6. html

    safari background image css not working

VIDEO

  1. Remove White Background From Image CSS

  2. CSS

  3. How to make responsive background image in css

  4. Responsive background image using HTML and CSS #shorts

  5. How to set background image on html web page

  6. HOW TO CHANGE SAFARI BACKGROUND PICTURE ON IPHONE |CHANGE SAFARI BACKGROUND|SAFARI BACKGROUND IOS 15

COMMENTS

  1. CSS Background Image Doesn't Appear in Safari

    I have the following CSS which sets the background image, but it doesn't work in Safari. It doesn't even set the background color, even though that should be a fallback. I can't install Safari on Windows so I can't even test it! .oops-body {. background: url('/img/oops-bg.jpg') center/cover no-repeat #1b1d37; min-height: 100vh; overflow: hidden;

  2. html

    46. Safari has an apparent bug where it won't show some jpg/JPEG images of a certain type in backgrounds if some criteria are met. For online use there is a type of jpg image called Progressive JPEG. Regular jpg images encode the image data from top to bottom, and you can see them load that way online.

  3. How to Fix CSS Issues on Safari

    Displaying properties in Safari. There is a CSS appearance property used to display an element using a platform-native styling based on the users' operating system's theme. To make it work on Safari, we must set the appearance property to its "none" value. Also, use -WebKit-and -Moz-vendor prefixes.. Let's see an example, where we use this trick to make the border-radius property work on ...

  4. The Fixed Background Attachment Hack

    Before I show you the fix, let's examine the issue. We can see it by looking at two different approaches to CSS backgrounds: a background using a linear gradient; a background using an image; Linear gradient. I want to keep the background gradient in a fixed position on scroll, so let's apply basic CSS styling to the body that does exactly ...

  5. Background image not showing in safari

    I am working on a responsive design and the class "mid-column" is having a background image but it is not showing on safari on all the devices. ... The forums ran from 2008-2020 and are now closed and viewable here as an archive. Home › Forums › CSS › Background image not showing in safari. This topic is empty. Viewing 9 posts - 1 through ...

  6. [Fix] Background image CSS not working fixes

    Fix 1 - check that the image path is correct. Fix 2 - check the height and width of the element. Fix 3 - check the syntax is correct. Fix 4 - check other styles for overrides. Browser support and bugs. Summary.

  7. Background images not showing in Mobile Safari? Try this..

    Apr 20, 2023. --. Background images are great to improve the appearance of your website and commonly these images will easily show without a problem. The simple code: header .main, header.page ...

  8. How to fix CSS background-image not working

    Go up one level out of the css folder, Navigate into the img folder, Then load the image file itself. The background-image property in the CSS file should look like this: background-image: url ('../img/cat-pic-1.jpg'). The ../ symbols mean that you will go up one level in the file structure. You can do the same thing by setting: background ...

  9. CSS: Background not showing up iPhone or …

    CSS: Background not showing up iPhone or iPad but works on iMac ( Safari ) I've got a full width hero background that is working properly on every browser we tested except for Safari on iPhone and iPad. It does work on iMac Safari. ... Safari not rendering images in Canvas Learning Management System When I use Canvas, very often embedded images ...

  10. css

    As you can see on the screenshot above often the content block image fails to display until the browser is forced to make a redraw by scrolling etc. I've tried preloading them, using both onload and hidden img tags separately, but it still happens. This is not a massive issue but if anyone understands why this occurs it would be really helpful.

  11. iPhone Safari

    In this blog post I will explain how to make your background image fixed in the Safari... Tagged with ios, safari, css. ... In this Codepen example you'll find a solution how to make the background image fixed in the Safari browser on an iPhone only with CSS. Shortly explained: ... Work Full-Stack Web-Developer Joined Dec 30, 2019 ...

  12. CSS Background Image Not Working: How to Resolve and Avoid Bugs

    Here are some ways to fix the problem of background-image not working. JUMP TO TOPIC [ hide] Make Sure Your CSS File Is Properly Embedded in Your HTML File. Set the Path of the Image Correctly to the Background Image URL. Use Accurate Syntax in CSS Background Images Properties.

  13. css

    My css code working fine in chrome but in safari it is not working at all .bg-gradient-dark { background-image: linear-gradient( 310deg , #141727 0%, #3A416F 100%); } Stack Overflow. About ... Background image not working in Safari 4 /5. 0. background image doesn't work on safari. 2.

  14. Supported CSS Properties

    The width and height of the background image. length_x. The width of the background image. length_y. The height of the background image. Discussion. Changes to this property can be animated in Safari 4.0 and later. Availability. Available in Safari 3.0 and later. Available in iOS 1.0 and later. Support Level. Experimental CSS 3. Fonts font

  15. Using Performant Next-Gen Images in CSS with image-set

    This can be used to specify a value for three different CSS properties: content, cursor, and most useful of all, background-image. .hero { background-image: image-set("platypus.png" 1x, "platypus-2x.png" 2x); } 1x is used to identify the low-res image, while 2x is used to define the high-res image. x is an alias of dppx, which stands for dots ...

  16. CSS background-color not working in Safari

    We can't get a CSS background colour to work in Safari. It works in Chrome, Edge & Firefox. It should look like this: Instead, the dark background colour is not showing at all, the background image for body is showing, which isn't what we want. Here's a snippet: .block-dark .block-overlay { background-color: #2d3133!important; position ...

  17. Background-size, fixed positioning and why won't Safari ...

    Thank you! October 30, 2014 at 9:58 am #187354. shaneisme. Participant. A quick correction: background-attachment: fixed is not the same as position: fixed. background-attachment: fixed : This keyword means that the background is fixed with regard to the viewport. Even if an element has a scrolling mechanism, a 'fixed' background doesn't ...

  18. Safari not displaying background colour correctly

    the background colour should be grey (the background of the actual content area is white). This displays correctly in all browsers EXCEPT Safari, which displays it as white. The CSS for the body is as follows: text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container ...

  19. Images not showing up on Safari, and on IPhone

    I am creating a photo gallery for a friend of mine and when I use safari to test my site, the images simply do not work. When I use any other web browser, the images show up. However, on iPhone every ... the images simply do not work. When I use any other web browser, the images show up. ... css; image; Share. Improve this question. Follow ...