I recently rebranded and in the process of updating my social media, directory listings, etc. found that my logo would not work for certain instances where an image of a minimum size was required. So I’ve come up with a new logo but am having trouble getting it to act right on my website.
Can’t get the logo to scoot to the left like the original. I’ve tried resizing the image and cropping it as well as the background-position property. I don’t know what I’m not understanding about the box model here.
Relevant markup and css:
</head><body>
<div id = "tagline">
<span>DrumDrTom<span>-</span></span>
<small>Hand drum repair, restoration and sales </small>
</div>
<div id="columnWrapper">
I’ve resized from 1500pxl to 100plx and sizes in between. I’ve cropped it as much as possible and have added more and more space around it. And then cropped on top, left, right and bottom. I notice that as I crop the image enlarges on the page, filling the space I suppose.
We’d need to see the actual image you are using as it looks to me as though the aspect ratio is different from your previous image and the new image is actually taller than it is wide meaning it would need to be smaller overall to match the text nicely.
Also I would abandon the method that you are using to place it as you are placing it as a background to the span which contains the text as well. There are too many magic numbers going on in that section for any normal website use.
e.g. height:7.1428571%;
That does nothing as there is no basis for a percentage height in that section. You are also sizing the image with background-size added into the mix.
I would suggest you place the image in its own container using the pseudo element :before of the tagline element and then its size can be controlled from within that element exactly and not the padding and other stuff that you have going on. You will need to change so that the text elements have their own padding as required rather than also affecting the image.
Important: If you’ve added white space on the actual image itself then you can never remove that gap (If I understood correctly). The space on the image itself can’t really be removed and you would need all sorts of trickery to increase the image size without increasing the extra space at the same time. The image needs to be the size of the image and no white space around it unless that white space is intrinsic to the image. You need to be able to place the image to the edge of its neighbours and if there is white space on the image then that becomes a problem.
For example this image is 100px x 100px intrinsic size but the actual image content is nothing like that size and not even the same aspect ratio. the image content itself is probably something like 80 x 60 (just a guess). I would crop out the white space in your paint package and then you can fine control spacing in your css.
If you can post a link to the image you are using I can work out a better method but I’d need to see its intrinsic size as mentioned above.
Or if you have a link to the new page it might be that there is an easier fix as it’s much easier to work on the real code:)
Just as an example I have added the pseudo element method to this codepen using your original image. This is just to show the mechanics and not meant as a finished product. I also used gradients rather than repeating background images etc.
Of course the image is still the wrong size which is why magic numbers are being used to stretch it to fit without increasing the whitespace. The image should be the right size to start with and not have the white space on it (unless you always want 100% of the whitespace on it by default).
Thank you Paul. You’ve given me great advice in the past, so I’m glad you’re still here.
My only opportunity to do site maintenance is early in the morning during coffee and late at night during/after dinner, so I’ve only done a quick review of your suggestions. Will do a deeper dive as time permits.
For now I’ll just show you the image on the screenshot:
The original was something like this but a different color and slightly different font (I’ve deleted most of versions cause I’d begun to confuse myself):
I cropped out everything but the image including all possible white space and sized it to 1500 height. This was my original.
Since then I’ve tried resizing all the way down to 100pxl. I’ve added white space in various amounts because the image overflowed, so then I tried cropping.
Are you changing to the text version on that last screenshot or was that just where you cut the drum from?
If you are keeping the layout the same as you already had but just with the new image then I would start much like mentioned above. I just cut your image from the screenshot and I would do it like this:
Obviously the wider you make that drum image the taller it will get so it’s really up to you to decide what the exact look should be. It may be that the image should be larger and the two lines of text alongside it (like the last image you posted) rather than one underneath but these are design issues for you to work out
Edit: I just very roughly converted that logo to an svg to remove the background.
You would be better creating that logo from scratch as an svg and it will scale much better.
Figured out the image needed to be placed upper left to begin with. Then I started with a small version of the image and added a bunch of white space around it. A bunch. 3000 by 3000. The icon was just a speck on the page, but as I cropped it at the top and on the left it gained size. Once the space on top and left was pretty much gone I removed most of the bottom then took some off the right until the logo was just right.
Then I just had to decrease the padding on the left to make the title cozy up to the logo.
Of course I haven’t tried it live yet or on various browsers and devices.
I tried several things besides your suggestions, including background-size, but nothing worked for me. I’ll take a really deep dive into ::before when I get the chance.
When you get time have a look at the code in my last codepen it does what you want without hacking and is the most workable method. All the code is working so you just need to ensure that you remove existing rules that might affect it. I know it might look harder to you at first but is a more robust method.
That seems mad to me
However, if it works for you and you are happy that it is working under different screen sizes then I suppose you could just go with it
