Forums

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

Home Forums CSS Has anyone had this problem? (css3 background)

  • This topic is empty.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #38032
    corralestito
    Member

    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.

    #102736

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

    #102737
    TheDoc
    Member

    Are you using this:

    body {
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    }
    #102738
    corralestito
    Member

    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

    #102739

    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?

    #102740
    corralestito
    Member

    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.

    #102764
    ylc66
    Participant

    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.

    #102766
    JadH
    Member

    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 :)

    #102859
    corralestito
    Member

    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 :(

    #103362
    corralestito
    Member

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

Viewing 10 posts - 1 through 10 (of 10 total)
  • The forum ‘CSS’ is closed to new topics and replies.