How do I resize a .png file in dashboard?

mickt
mickt used Ask the Experts™
on
Hi, I'm trying to resize logo.png as it is too large for the space in the dashboard.

greping for logo.png leads me to the following:

from 500.html:

    div#container {
      position: absolute;
      top: 80px;
      padding-top: 170px;
      margin: 0px 0px 0px -196px;
      left: 50%;
      width: 390px;

      background: url("{% static "dashboard/img/logo.png" %}") no-repeat scroll center 35px padding-box rgb(255, 255, 255);
      border: 1px solid rgb(225, 225, 225);

      -webkit-border-radius: 6px;
      -moz-border-radius: 6px;
      border-radius: 6px;

      box-shadow: 0px 3px 7px rgba(0, 0, 0, 0.3);
      -webkit-box-shadow: 0px 3px 7px rgba(0, 0, 0, 0.3);
      -moz-box-shadow: 0px 3px 7px rgba(0, 0, 0, 0.3);
    }


from _topbar.scss:

.topbar {
  background: $gray-lighter;
  border-bottom: 1px solid $gray-light;
  padding-right: 15px;
  h1.brand {
    display: inline-block;
    width: 222px;
    margin: 0 0 0 10px;
    line-height: 1;
    a {
      background: url(../img/logo.png) left center no-repeat;
      display: block;
      text-indent: -9999px;
    }
  }

I've never worked with this stuff before so assistance is required.
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Top Expert 2004
Commented:
Have you tried resizing the physical image using Photoshop/Gimp/etc. ?

You can also use the background-size property in CSS.

Author

Commented:
The image is used in two locations so resizing wouldn't be desirable.  Looking and the second option, how would it be implemented in above examples?

Author

Commented:
I decided to resize and rename so I'll use two files; easiest option by far.  I still need to move the image the the left in the dashboard, i.e. remove the border.
Top Expert 2004

Commented:
You'll need to post the HTML for this snippet before we can help with style rules.  Generally, you find a way to target the image's parent container (e.g., class, id, or other selector), then apply style to it.  For example:
<!-- the styling -->
#my_image_container {
  background-image: url('/my-image.png');
  background-size: contain;
<!-- the HTML -->
<div id="my_image_container">
</div>

Open in new window

The CSS you posted is actually SCSS, which means you would need to add your rule then recompile.

Author

Commented:
I resized and it fits perfectly; couldn't tweak using other method and I don't have enough time at the moment to figure it out.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial