Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Mar 2012
    Posts
    156
    Thanks
    19
    Thanked 0 Times in 0 Posts

    Header image resize with browser

    Is there a way to make my header image resize with the browser?
    Rush Computer Tech Support | Just another WordPress site

  • #2
    Regular Coder Nerevarine's Avatar
    Join Date
    Jan 2013
    Location
    Phendrana Drifts, Tallon IV, W-Class
    Posts
    285
    Thanks
    0
    Thanked 17 Times in 17 Posts
    Blog Entries
    3
    Have the size of it be a percentage. If you have a fluid layout, there should be no issue just setting your height/width in the CSS to 'X%'.

    Example:

    Code:
    header {
    height: 45%;
    width 45%;
    position: relative;
    }
    If you're dealing in absolute values, you'll have to create separate rules for it based on the size of the person's screen.
    Which is a pain. Better to go with relative positioning and percentiles.
    Time kills us in our sleep and we watch it happen in our dreams. -K.K.
    THE END-ALL PROGRAMMING REFERENCE: CLICK HERE (Courtesy of Major Payne)
    My username was previously L0adOpt1c. :: Please read this before posting in the HTML/CSS forum.
    Validate your HTML here and your CSS here. :: Need basic HTML/CSS tutorials? Click here, don't post about it.

  • #3
    Regular Coder
    Join Date
    Mar 2012
    Posts
    156
    Thanks
    19
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Nerevarine View Post
    Have the size of it be a percentage. If you have a fluid layout, there should be no issue just setting your height/width in the CSS to 'X%'.

    Example:

    Code:
    header {
    height: 45%;
    width 45%;
    position: relative;
    }
    If you're dealing in absolute values, you'll have to create separate rules for it based on the size of the person's screen.
    Which is a pain. Better to go with relative positioning and percentiles.
    When I do this to "header-logo" it doesnt seem to be working when I make my browser smaller...

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello again taymag,
    Quote Originally Posted by taymag View Post
    When I do this to "header-logo" it doesnt seem to be working when I make my browser smaller...
    That's because you're applying the suggested % measurements to the containing div element .header-logo. Try applying that to the image instead, like this -
    Code:
    .header-logo img {
    width: 100%;
    height: 100%;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    taymag (03-21-2014)

  • #5
    Regular Coder
    Join Date
    Mar 2012
    Posts
    156
    Thanks
    19
    Thanked 0 Times in 0 Posts
    Thanks!!


  •  

    Posting Permissions

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