7 {{ upvoteCount | shortNum }}
7 {{ upvoteCount | shortNum }}

How Do I Vertically Shrink the Banner?

by mrniceguy123
6 replies
  • WEB DESIGN
    • |
I would like to vertically shrink the banner on this site.

I found the below code, and found that if I reduce the height pixels for the header in this piece of the style.css...

Code:
.art-header
{
   margin:0 auto;
   height: 230px;
   background-image: url('images/object2016014759.png'),url('images/object1962882233.png'), url('images/header.jpg');
   background-position: 848px 65px,0px 38px, 0 0;
   background-repeat: no-repeat;
   position: relative;
   z-index: auto !important;
}
....that it indeed shrinks the banner, but it cuts-off parts of the bottom of the banner.

Because of this, I'm thinking that in order to get the banner shorter (without cutting-off the bottom portion of the banner as it is), is to reduce the size of the three images referenced in the code above. Am I right?
#banner #shrink #vertically
  • Profile picture of the author Sueblimely
    I changed the following part of .art-header to raise the images up higher, so that the bottom border shows on the main header background image.

    .art-header {
    background-position: 848px 45px, 0px 8px, 0px -20px;
    }

    It works but does not look good as the images are too close to the top menu. I would either increase the overall height of the header to 250px as follows.

    .art-header {
    margin: 0px auto;
    height: 250px;
    background-image: url('images/object2016014759.png'), url('images/object1962882233.png'), url('images/header.jpg');
    background-position: 848px 55px, 0px 23px, 0px -15px;
    background-repeat: no-repeat;
    position: relative;
    z-index: auto ! important;
    }

    Or reduce the size of the actual images.
    {{ DiscussionBoard.errors[8104460].message }}
    • Profile picture of the author mrniceguy123
      Originally Posted by Sueblimely View Post

      I changed the following part of .art-header to raise the images up higher, so that the bottom border shows on the main header background image.

      .art-header {
      background-position: 848px 45px, 0px 8px, 0px -20px;
      }

      It works but does not look good as the images are too close to the top menu. I would either increase the overall height of the header to 250px as follows.

      .art-header {
      margin: 0px auto;
      height: 250px;
      background-image: url('images/object2016014759.png'), url('images/object1962882233.png'), url('images/header.jpg');
      background-position: 848px 55px, 0px 23px, 0px -15px;
      background-repeat: no-repeat;
      position: relative;
      z-index: auto ! important;
      }

      Or reduce the size of the actual images.
      Thanks for your help. As you can see now, I've successfully made the banner smaller, but there's a gap between the top of the main portion of the page, and the bottom of the banner.

      How do I go about bringing them closer together?

      I'm getting better at using Firebug to fix issues, but this one has me stumped a little. Thanks in advance!
      {{ DiscussionBoard.errors[8119645].message }}
  • Profile picture of the author HostWind
    Actually all your doing with this code is building a container called art-header setting it's height, background image and position.

    If you want to resize the image in your website design then you could make this container with CSS without the background image. Then in your HTML code add the image in and resize it there.

    Are you using the 960 rule for your website design?
    How are you dividing the sections up in your website/ (div class, div id)

    Here is an example of what I'm talking about:

    <div id="header">
    <div id="header_container">
    <div class="one_third"><img src="images/Wedgewood Crest.png" width="123" height="156" alt="Crest" />
    </div>
    <div class="two_third">
    <h1><img src="images/welcome-pic.png" width="313" height="122" alt="Welcome" /></h1>
    </div>
    </div><!--end head cont-->
    </div><!--end header-->

    In CSS I have created the containers and have set values for height, padding and position, In the HTML code however I have given myself the option on the image in the container and can adjust the size to fit the containers the way I need to.

    I hope this helps. If you have any questions feel free to PM me
    Signature
    HostWinds
    Inexpensive Web Hosting
    Unlimited Web Hosting
    {{ DiscussionBoard.errors[8104485].message }}
    • Profile picture of the author mrniceguy123
      Originally Posted by HostWind View Post

      Are you using the 960 rule for your website design?
      Sorry, I don't know the answer to that question.

      Originally Posted by HostWind View Post

      How are you dividing the sections up in your website/ (div class, div id)
      Not sure. How do I find out?
      {{ DiscussionBoard.errors[8107623].message }}
  • Profile picture of the author Patrick
    themes/Wp/style.css.... Line 404....

    .art-header { height: 220px; }

    Adjust 220px to whatever you want ....
    Signature
    Website Development | Shopify Development | WordPress Development |Headless Development
    {{ DiscussionBoard.errors[8119667].message }}
  • Profile picture of the author mrniceguy123
    Thank you sir!
    {{ DiscussionBoard.errors[8119894].message }}

Trending Topics