Has anyone had this problem? (css3 background)

[corralestito]

I’m coding a website in CSS3 and I’m having troubles making the background of a header fill the whole width of the browser.

Example

Does anyone have any idea why is this happening?

Thanks in advance.

[matthewfowles]

without seeing your code its hard! Is there a page wrap or something stopping it and how have you set the width?

[TheDoc]

Are you using this:

body {

-webkit-background-size: cover;

-moz-background-size: cover;

-o-background-size: cover;

background-size: cover;

}

[corralestito]

This is what I’m using for the header:

header

{

background: url("../images/interface/header-motif-bottom.png") repeat-x bottom,

url("../images/interface/header-bgr-shadow.png") repeat-x,

url("../images/interface/header-bgr-glow.png") no-repeat top center,

url("../images/interface/header-bgr-pattern.png"),

url("../images/interface/header-bgr-stripes.png"),

#6B161B;

}

I have several background images in order for it to work how I want.

You can see the full code here

[matthewfowles]

What your picture shows isn’t happening to me when i follow the link. I’m using the latest version of chrome. Which browsers are you using?

[corralestito]

I’m using the latest version of Chrome for Mac. On computers (Mac or Pc) the website looks just fine except for when I use the Chrome extention to resize the window.

I’ve noticed that the problem also occurs on mobile devices (iPhone, iPad, Android).

I thought this problem was more common.

[ylc66]

i have no problem here, it looks Ok . MacBook Pro :
. Chrome 19.0.1084.46 beta > OK
. Chrome 18.0.1025.168 (Standard) > OK

The only thing i can see is about your flags. Compared to Firefox : on Chrome (whatever version it is) the second one is under the english one.

[JadH]

Hello
Same here, no problem. IE9 on PC and Chrome on PC and macbook pro, both latest versions.

I noticed the eventos-especiales.php page is opening wrong on all of them (sidebar is under the content). You might not be done with it though :)

[corralestito]

Thanks for the feedback guys but have any of you tried to open the website on a mobile device? iphone, iPad or Android?
The design looks awful on those :(

[corralestito]

I’ve solved it myself, thanks for the collaboration.

[Author]

Posts