CSS background-size issue in Chrome

Question

I have a CSS property background-size set to 729px auto; for a center div for a blue frame,

Here are the results in IE and Firefox (i hide the content with red box):

enter image description here

Here is the result in Chrome:

enter image description here

Doees any know if there are special tricks for background-size property in Chrome?

Show us your HTML and CSS please. – Lowkase Mar 14 '13 at 17:24 — Lowkase, Mar 14 '13 at 17:24

score 2 · Answer 1 · answered Mar 14 '13 at 17:32

Why not use code instead of image? Problem solved.

http://jsfiddle.net/jDMxJ/

HTML:

<div class="blue">
    <div class="red">

    </div>
</div>

CSS:

.blue {
    width: 626px;
    height: 326px;
    box-sizing: border-box;
    border: 2px solid blue;
    border-radius: 10px;
}

.red {
    width: 600px;
    height: 300px;
    margin: 10px auto;
    box-sizing: border-box;
    border: 3px solid red;
    border-radius: 10px;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.7);
}

My box is made from 3 parts: top center and bottom. Code is not mine i cant overwrite it i just need to fix it. :) — rinchik, Mar 14 '13 at 17:36

score 1 · Answer 2 · answered Mar 14 '13 at 17:25

1

Try box-sizing: border-box; in your css.

answered Mar 14 '13 at 17:25

derek_duncan

1,377
1
13
22

Note to the OP that this won't work in IE7 if you're planning on supporting it. As for IE8, I recommend reading the chosen answer here: http://stackoverflow.com/questions/11608291/box-sizing-border-box-for-ie8 – Kyuuji Mar 14 '13 at 17:27

score 1 · Answer 3 · answered Mar 14 '13 at 17:35

1

After experiments i found out that Chrome doesn't recognize the auto property in here: 729px auto;

It just cuts it out:

enter image description here

But when i changed 729px auto; to 729px 1px; it WORKED!

I see the blue frame :)

answered Mar 14 '13 at 17:35

rinchik

2,642
8
29
46

What about putting 50% to center it then? To be more precise than just 1px. – Michael Mar 14 '13 at 17:38

CSS background-size issue in Chrome

3 Answers3