Hi Sanderson,
I’m not sure if I understand your requirements. The header section already spans the full width of the page. If you’d like the image at the top to be full width, and therefore align with the top header and the content below, add this snippet of CSS code to your custom CSS editor or child theme’s stylesheet and check out the result.
#header,
#header .pad {
padding-left: 0;
padding-right: 0;
}
.site-title a img {
min-width: 100%;
}
I hope this helps 🙂
– Maria Antonietta
Hi Maria Antonietta,
you are an angel – it does work!
please check my webpage now to see the result.
All I have to do now is resize/rescale the image so it looks O.K.
Dont you know where do I get the measurements about my header now so I can scale the picture to fit in there nicely?
Sanderson
I’m so glad you’ve made progress!
There’s no need to know the measurement: the header and the image inside it are both 100% wide. This means that if you shrink the screen the image shrinks with it. Have you tried? I have and it seems to me that it looks fine.
Let me know if there’s a problem on your end.
Hi Maria,
the picture shrinks with the mobile devices, but in Opera or Explorer the picture is “outstretched”. If I knew the parametres of the header space, I would adapt the picture pixels.
Hoping you know what i mean, if not, will somehow send the screen how I see it…
The problem is the aspect ration between the image width and its height. In responsive design, it’s not recommended to use fixed measurements and pixels are especially counterproductive. The best option is to delete the max-height rule on the header image, which at the moment is 200px, and add height: auto instead. This, together with min-width: 100%, ensures that your header spans the full width and the image is not stretched on larger screens.
Admittedly, on larger screens you would now have a higher header, but this is due to respecting the appropriate aspect ratio for your image. The alternative would be to crop your image so that it looks good when it’s longer and shorter rather than controlling the height artificially via CSS.
In any case, this is what your header looks like when you use min-width:100% and height:auto. I think it’s fine, but you might want it to look shorter:
http://snag.gy/37sGa.jpg
Don’t hesitate to reach out if things don’t work out.
Dear Maria,
yes, the problem is the aspect ratio between the image width and height.
I would rather adjust the picture than to play with CSS as adjusting the picture in Paint is much easier for me.
That is why I would appreciate to know the header measurement so I would crop the picture to fit there just like it should.
If I knew the exact measurements of my header, then I adjust the picture…
¨
Hopefully I understood you right:-)
If what I wrote does not make any sense,I would do what you also suggest –“The best option is to delete the max-height rule on the header image, which at the moment is 200px, and add height: auto instead.” just do not know where to find this in css…
Sanderson
Hi Sanderson,
The average desktop screen width is around 1200px, and given the header doesn’t span the entire width of the screen, this would be a good measurement. I’d say, crop your picture at about 1200px in your image editor, with the correct aspect ratio, and then use CSS as I said previously. You already have the right selectors, just amend the min-height rule:
.site-title a img {
min-width: 100%;
height: auto;
}
If there’s something I didn’t understand correctly, please let me know.
sanderson,
The natural size of the image you are using appears to be 906x300px, the space that it occupies is 1024x200px. I hope this helps.
Hi Maria and Beefstick.
I cropped the picture to 1200*300 and then put this code
.site-title a img {
min-width: 100%;
height: auto;
}
in my Custom Css plug in .
The picture is wider but still not alligned..
any ideas why please?
Hi Sanderson,
The alignment is due to the fact that the styles on the #header .pad element has not been kept as it was before. Although margin top and bottom are fine, margin left and right has to be 0, like so:
#header .pad {
padding: 30px 0;
}
Try this out and see if it works for you.
Hello Maria,
I put the code in Custom Css and it is alligned now, but unfortunatelly the picture is stretched again?
Did not know that adjusting the header image would be sooo difficult:-(
Sanderson
I don’t see it stretched, rather cropping meant that some interesting features have been eliminated. To be honest, I liked it the way it was before but leaving it with the height:auto value. In other words, it’s better to have it higher but showing more stuff rather than shorter and leaving only the top part visible. What do you think?
Alternatively, you probably need a more sophisticated image editor than paint so that you can crop and scale your image a bit better. Have you tried Gimp? It’s like Photoshop, but free.
Hello Maria,
I absolutely agree with you. thanks for you time.
I made a pic in Paint where I am trying to explain the situation.
please see this link where I explain what I need.
http://anglictinasmirou.cz/wp-content/uploads/2014/10/space.jpg
Simply put – that picture is not final.
