Header – Make 100% Width, Single Image

rororo
(@rororo)

11 years, 1 month ago

Hi there!
Can someone please advise me how I can get a single image as my header, 100% width, with no padding/margin. The only way I have managed to achieve this effect was by tiling the header image horizontally but when you zoom in or out, this looks terrible.
Thanks in advance for any insights!
Website: http://www.littlewoosty.com

Viewing 3 replies - 1 through 3 (of 3 total)

konradS
(@konrads)

11 years, 1 month ago

hi rororo,

** maybe you checked resolved accidently ? **

regarding your site, i would simply try another way.

just make an image from the color fade only, maybe 5px wide, and about 200px height, the end should be the same blue as your body background color.

Then add this image as body background image and just repeat it horizontally.

This way you have a nie endless background.

Now, take the stars and owl thing, and make a .png from it with transparent background.

I would recommend to have it the same width as your website itself and leave the header “normal” sized, not full width.

Then you have a fitting header image, not repeating, and the nice endless background.

Hope this helps, let me know ^^ Konrad
Thread Starter rororo
(@rororo)

11 years, 1 month ago
Konrad,

Thank you so very much for your response! I really appreciate it! 🙂 This has been driving me mad for a long time, I really want to get to the bottom of it. (And yes: I must have set the post to “resolved” by accident, have fixed that now, thank you.)

So the .png / horizontal colour fade repeat idea is very clever! I will do this. It is certainly better than what I currently have (tiling the whole header image horizontally so that when you zoom out, you see repeats of the title & the owl, which looks terrible).

However, my main problem remains – I can’t seem to get a fixed 100% width header image to take up the entire width of browser. Like if I were to try your .png suggestion, I don’t know how I can make the .png “the width of the website”, like you say. It should be so simple!

I have obviously tried uploading the header image in the usual way through “”Theme Settings” > “Header”. In the settings, it states Default width is 1000px, the height (and full width option) can be adjusted above. So I uploaded a header that is 1000px wide but it just ends up looking like this.

I set the “Header width” to “default” as you suggested, instead of “full width”. The “Website width” is also set to 1000px. So I really don’t know why the 1000px wide header ends up the left & not the full width of the site? I am wondering if there is anything I should add to the “Header height” settings (currently blank). There, it says Your header height in px (and navigation position (y) at the same time), just enter a number. This is not your header image height, you can specify your header image separately in the fields below. Try 25px or 63px less than your header-image-height to fit perfectly …which I find a bit confusing?

I have also tried leaving the “Header image” setting blank and instead attempted to overwrite the CSS in both:
“Appearance” > “Editor” > “style.css”
“Appearance” > “Theme Settings” > “CSS”
with
```
#header {
    width:100% !important;
    background-image: url('http://www.littlewoosty.com/dev/wp-content/uploads/2013/03/woostyTreeBanner4.png');
    background-repeat:no-repeat;
    margin: 0;
    padding: 0;
    top: 0px;
}
```
but that didn’t work either :c

The reason I care so much about this is because I want to adjust the owl part of the header image to have him sitting on a tree and I want the tree to come to the right edge of the header, no matter how zoomed in or out the browser is.

I wonder if I need to make a change to the header.php file? I don’t know what is telling the header to behave this this. I suppose I just need advice from someone who really understands the intricacies of the Custom Community theme’s code. Or simply a pair of fresh eyes to tell me why I am being dumb!

Thank you so much in advance! And please forgive the length of this.

ro
konradS
(@konrads)

11 years, 1 month ago

Hi rororo,

firstly, please keep your things short and sweet 😉

it’s really hard to read through this 😉

now, regarding your problem:

1.) please never change theme files (“Appearance” > “Editor” > “style.css”)
only use the CSS tab – or create a child theme!

2.) The png snippet that will repeat horizontally:
Try to add it to your whole website background, NOT the header!!!

Means, go to Theme Settings -> General -> Background -> Background Image!

Whew. So this should help out with this, you can keep the header to default width.

3.) Now, the owl thing:

If it should be like you mentioned, maybe try to add it as the logo of the website.

This way it will be linked and you can position it fixed to the right of the site later on.

So first, go to Theme Settings -> Header -> Logo

and add the image there. Have a look.

Then, add some custom CSS to make it stick always to the right edge of the browser.

This should be exactly what you are looking for.

** IMHO, all in all it’s a weird tactic to build the website, but should work out as you wanted to have it.

Hope this helps!

If you get stuck on the CSS, just come back here.

Please make it as short as possible for the future. I cannot read so much, just look or code 🙂

Konrad

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Header – Make 100% Width, Single Image’ is closed to new replies.

Tags