www.webdeveloper.com
Results 1 to 6 of 6

Thread: Quick problem with background-image header

  1. #1
    Join Date
    Mar 2014
    Posts
    4

    Quick problem with background-image header

    Hello,

    i am having a small problem with extending the background-color of my website header.

    PROBLEM : I basically have an image that must be located in the center of the page, and as it's background color is black, I would like the color to extend throughout the whole width of the page.

    QUESTION : What is the best way to organize the image and the background in order to make it match exactly in a responsive way ?

    HOW IT SHOULD BE VISUALIZED (END RESULT) :

    http://postimg.org/image/f86f08jsr/

    Thank you very much for your attention

  2. #2
    Join Date
    Mar 2011
    Posts
    1,144
    I couldn't tell exactly what you wanted from the example you posted, but I'd use something like:
    Code:
    background-size:100% auto;
    background-position:center center;
    It's those two properties that you'll need to set, even if my suggestion doesn't quite work the way you wanted.
    Rick Trethewey
    Rainbo Design

  3. #3
    Join Date
    Mar 2014
    Posts
    40
    rtrethewey give the right way

  4. #4
    Join Date
    Mar 2014
    Posts
    4
    Thank you very much for your reply !

    I was just wondering what is the exact logic behind it, as I am just starting out with css and I haven't explored in great depth all the background options and properties yet. I am wondering what exactly does the "auto" attribute does in the background-size and also why did you use the "center" attribute two times instead of one.

    Thank you


    Quote Originally Posted by rtrethewey View Post
    I couldn't tell exactly what you wanted from the example you posted, but I'd use something like:
    Code:
    background-size:100% auto;
    background-position:center center;
    It's those two properties that you'll need to set, even if my suggestion doesn't quite work the way you wanted.

  5. #5
    Join Date
    Mar 2011
    Posts
    1,144
    'auto' tells the browser to use the image's native size. When you only use one position setting in 'background-position', the other setting defaults to 'center'.
    Rick Trethewey
    Rainbo Design

  6. #6
    Join Date
    Mar 2014
    Posts
    4
    Thank you very much guys, I managed to make it work in the end !

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles