Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Assign a style to your image, using the width of your image (preferably smaller than its parent element), display it block and centre it with margins.
E.g
header img {
display: block;
width: 800px;
margin: 0 auto;
}
But are you talking about a background image rather than an actual <img>
HTML element?
If so, try
#header {
background: url(/wp-content/uploads/xyz.jpeg) repeat-x center center;
}
Thread Starter
Iono
(@iono)
Andrew, thanks for the answer! I tried to insert display:block like this:
#header{display:block;width:1024px;position:relative;height:360px;padding:20px 0;background:url(/wp-content/uploads/xyz.jpeg)repeat-x 0 0;border-bottom:10px solid #ce3000}#header .wrap{width:980px;margin:0 auto}
But it didn’t change. (also tried position:center before) Do you think it’s fot to do with #header.wrap?
What do you mean by background image? I’m worried about the header on top of the page (like here https://bettercookies.wordpress.com/ (not my blog)).
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
How should that cookie image look when it’s centred?
WordPress has scaled down the image to a width of 770 pixels, which may be the problem.
Thread Starter
Iono
(@iono)
The cookie image is fine, it’s perfectly centered (mine is stuck in the top left corner of the page). It was just an example for what I mean by “header”.
Mine is still stuck on the top left of my page… 😉
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
But you’re using a background image, whereas the example website is using a HTML element.
Can you send us a Pastebin.com link of your HTML and CSS code for the problematic web page, or a link to the page?
Thread Starter
Iono
(@iono)
Like this? http://pastebin.com/C98uU7yt
It’s only the CSS code ((where) is there a html code on wordpress?), sorry.
I hope it’s OK if I don’t send you the link- it’s not a finished page and I don’t want Google to remember all that 😉
Thanks for helping!
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Assuming you’re using Windows, load the webpage, right click on the page and select ‘View source’. The contents of the subsequent pop-up window will hold the page’s HTML.
Thread Starter
Iono
(@iono)
Aah cool, thank you! Not using windows though, but found it anyways: http://pastebin.com/tf2J5Cfs
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Try adding
#header {
margin: 0 auto;
}
Thread Starter
Iono
(@iono)
Oh wow, thank you so much, Andrew! Made my evening!
Sorry for bothering you, but one more thing: Do you know how I could move the menu *below* the red line so it’s not crashing the header? I saw it on some pages (and as well on screenshots here: https://theme.wordpress.com/themes/retro-fitted/) but don’t see how to change it.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Try
#menu-primary {
margin-top: 0;
}
You had it on -75
Thread Starter
Iono
(@iono)
Great, thanks a million! 🙂