How can I place my header in the center of the header box?

[kittyrefuge]

I have been trying to find out the answer for the last (OMG) 5 hours...Now I'm hoping somebody can help me out from this situation.

The Base Style I'm using is Blanket.



#title span { display: none; }
#title {
position: center;
width: 500px;
height: 250px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
background-image: url("https://ic.pics.livejournal.com/kittyrefuge/12716922/407688/407688_original.jpg");
background-repeat: no-repeat;
}

But the result is :



And when I check it on my phone :

My header pic goes out of the frame...

Somebody, please?

Comments

[syntheid]

Well, this is basically happening because you're setting the background image on the title instead of just inserting an image, so you have to set a defined width on that container (500px, looks like), to make the whole image display. You have a couple options I can see, that are all sort of compromises, so maybe try it and see what you can live with, but.

If you change the styling on #title to

#title {
  width: 100%;
  resize: both;
  height: 250px;
  background-image: url(https://ic.pics.livejournal.com/kittyrefuge/12716922/407688/407688_original.jpg);
  background-repeat: no-repeat;
  background-size: contain;
}

that will keep your image contained inside the div, but does result in different white space around the image depending on what size it's at.

You could use background-size: cover; instead of background-size: contain;, and then it'll try to always fill up the box, but depending on the resolution of the device you're viewing from, it will crop the image differently.

And you could try to fiddle with the @media query breakpoints to force the container to stay wider even on small resolutions/overwrite the container width always, but you'll still have it scroll off the side. And this is more involved so I don't really have a single solution upfront, but from a bit of fiddling you could say do a min-width: 585px; on the #header or change @media only screen and (min-width: 40em) to like @media only screen and (min-width: 50em) or something and set a larger width there or something.

Hope that helps?

[kittyrefuge]

Thank you for your advice!

I've tried the new styling code you suggested, the header pic is still not in the centre, and my username appears on the top of the box which I don't need.
How can I "just inserting an image" instead of setting the background image on the title?

I'm so not clever enough to fiddle with this coding stuff...still reading some articles about @media query. I will try it later.
Sorry to keep asking you and not understanding fully.

[kittyrefuge]

You are genius!

It's September, so I changed my DW layout (and the header). I used your styling code, and using a bigger pic (915px x 275px) and #title span { display: none; }. It works for me.

Thanks again.